Storybook not building due to string-width ES Module dependency error.

You upgraded or just installed the latest Storybook 7 and now you can’t build the project. No matter which Node version, NPM, Yarn, whatever other modules you have.

Error [ERR_REQUIRE_ESM]: require() of ES Module /x/node_modules/string-width/index.js from /x/node_modules/cli-table3/src/utils.js not supported.
Instead change the require of index.js in /x/node_modules/cli-table3/src/utils.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/x/node_modules/cli-table3/src/utils.js:1:21)
    at Object.<anonymous> (/x/node_modules/cli-table3/src/table.js:2:15)
    at Object.<anonymous> (/x/node_modules/cli-table3/index.js:1:18)
    at Object.<anonymous> (/x/node_modules/@storybook/core-server/dist/index.js:113:7858)
    at Object.<anonymous> (/x/node_modules/@storybook/cli/dist/generate.js:11:4494)
    at Object.<anonymous> (/x/node_modules/@storybook/cli/bin/index.js:9:1)
    at Object.<anonymous> (/x/node_modules/storybook/index.js:3:1) {
  code: 'ERR_REQUIRE_ESM'
}
error Command failed with exit code 1.

The reason lies in multiple modules’ dependency on string-width. The module transitioned to ES modules quite some time ago (in 2021, to be exact as per git commit), and all the dependants have to update to dynamic imports too. However, you know how painful some migrations are… Meanwhile, the solution is simply pinning to the previous versions of string-width.

Solution

With NPM, use overrides in package.json to temporary set the module’s version to ^4. With Yarn, use resolutions to do the same:

{
  ...  
  "overrides": {
    "string-width": "^4"
  },
  "resolutions": {
    "string-width": "^4"
  }
  ...
}

---

Did you know that I made an in-browser image converter, where you can convert your images without uploading them anywhere? Try it out and let me know what you think. It's free.