[Bug]: Upgrade to 7.1.0 breaks Cypress

JoostKersjes commented 1 year ago

Describe the bug

My (Vue 3 & Vite) project has Storybook and Cypress installed. Renovate created an update request for Storybook to go from 7.0.27 to 7.1.0. Installing the project dependencies throws an error. Any pipeline job that uses a Cypress CLI command also fails. Here is an example of the error:

yarn run v1.22.19
$ cypress open --component
/path/to/project/root/node_modules/cli-table3/src/utils.js:1
const stringWidth = require('string-width');
                    ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /path/to/project/root/node_modules/string-width/index.js from /path/to/project/root/node_modules/cli-table3/src/utils.js not supported.
Instead change the require of index.js in /path/to/project/root/node_modules/cli-table3/src/utils.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/path/to/project/root/node_modules/cli-table3/src/utils.js:1:21)
    at Object.<anonymous> (/path/to/project/root/node_modules/cli-table3/src/table.js:2:15)
    at Object.<anonymous> (/path/to/project/root/node_modules/cli-table3/index.js:1:18)
    at Object.<anonymous> (/path/to/project/root/node_modules/cypress/lib/tasks/cache.js:10:15)
    at Object.<anonymous> (/path/to/project/root/node_modules/cypress/lib/cli.js:14:15)
    at Object.<anonymous> (/path/to/project/root/node_modules/cypress/bin/cypress:3:1) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v20.4.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

To Reproduce

npx storybook@next sandbox
Select Vue3 Vite (TS)
Choose project name (e.g. vue3-vite/default-ts)
cd vue3-vite/default-ts
yarn install
yarn add -D cypress@latest
Observe the error at the end of the install logs

System

Environment Info:

  System:
    OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-11370H @ 3.30GHz
  Binaries:
    Node: 20.4.0 - ~/.nvm/versions/node/v20.4.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.7.2 - ~/.nvm/versions/node/v20.4.0/bin/npm
  npmPackages:
    @storybook/addon-a11y: 7.1.0 => 7.1.0 
    @storybook/addon-actions: 7.1.0 => 7.1.0 
    @storybook/addon-essentials: 7.1.0 => 7.1.0 
    @storybook/addon-links: 7.1.0 => 7.1.0 
    @storybook/vue3: 7.1.0 => 7.1.0 
    @storybook/vue3-vite: 7.1.0 => 7.1.0

Additional context

No response

alexei commented 1 year ago

I don't think this has anything to do with Cypress. I'm getting the same error when running either yarn storybook dev or yarn storybook build locally:

/project/node_modules/cli-table3/src/utils.js:1
const stringWidth = require('string-width');
                    ^

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

FWIW:

Environment Info:
  Binaries:
    Node: 18.16.0
    Yarn: 1.22.19
    npm: 9.5.1
  npmPackages:
    @storybook/addon-storysource: 7.1.0 => 7.1.0 
    @storybook/html: ^7.1.0 => 7.1.0 
    @storybook/html-webpack5: ^7.0.8 => 7.1.0 
    @storybook/preset-scss: ^1.0.3 => 1.0.3 
    @storybook/source-loader: 7.1.0 => 7.1.0

valentinpalkovic commented 1 year ago

Duplicate of https://github.com/storybookjs/storybook/issues/22431. Please take a look at the following comment/workaround: https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092

storybookjs / storybook