const stringWidth = require('string-width'); #27370

AdamBCo · 2023-07-23T15:51:37Z

Current behavior

Every time I run yarn add "cypress", I get the following error:

error /Users/me/Developer/Fictive/fictive/node_modules/cypress: Command failed.
Exit code: 1
Command: node index.js --exec install
Arguments: 
Directory: /Users/me/Developer/Fictive/fictive/node_modules/cypress
Output:
/Users/me/Developer/Fictive/fictive/node_modules/cli-truncate/index.js:3
const stringWidth = require('string-width');
                    ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/me/Developer/Fictive/fictive/node_modules/string-width/index.js from /Users/me/Developer/Fictive/fictive/node_modules/cli-truncate/index.js not supported.
Instead change the require of /Users/me/Developer/Fictive/fictive/node_modules/string-width/index.js in /Users/me/Developer/Fictive/fictive/node_modules/cli-truncate/index.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/me/Developer/Fictive/fictive/node_modules/cli-truncate/index.js:3:21)
    at Object.<anonymous> (/Users/me/Developer/Fictive/fictive/node_modules/listr2/dist/renderer/default.renderer.js:4:21)
    at Object.<anonymous> (/Users/me/Developer/Fictive/fictive/node_modules/listr2/dist/utils/renderer.js:4:28)
    at Object.<anonymous> (/Users/me/Developer/Fictive/fictive/node_modules/listr2/dist/lib/task.js:11:20)
    at Object.<anonymous> (/Users/me/Developer/Fictive/fictive/node_modules/listr2/dist/listr.js:7:16)
    at Object.<anonymous> (/Users/me/Developer/Fictive/fictive/node_modules/listr2/dist/index.js:13:14)
    at Object.<anonymous> (/Users/me/Developer/Fictive/fictive/node_modules/cypress/lib/tasks/install.js:10:5)
    at Object.<anonymous> (/Users/me/Developer/Fictive/fictive/node_modules/cypress/index.js:12:5) {
  code: 'ERR_REQUIRE_ESM'
}

Debug logs

No response

Cypress Version

Latest

Node version

v18.16.0

Package Manager

yarn

Package Manager Version

1.22.19

Operating system

Mac

Operating System Version

13.2.1 (22D68)

Other

No response

MikeMcC399 · 2023-07-24T08:27:42Z

@AdamBCo

I couldn't reproduce this issue. Perhaps if you post your package.json it would help to reproduce?

nagash77 · 2023-07-24T15:39:51Z

Hi @AdamBCo unfortunately we cannot replicate this behavior with the provided information. Can you provide a reproducible example using cypress-test-tiny?

fabio-d-m · 2023-07-24T22:03:43Z

Same identical issue on Ubuntu 22.04

Node - v16.18.1
yarn - v1.22.19

  "dependencies": {
    "@apollo/client": "^3.7.4",
    "@apollo/react-ssr": "^4.0.0",
    "@bugsnag/js": "^7.20.0",
    "@bugsnag/plugin-react": "^7.19.0",
    "@next/bundle-analyzer": "^13.1.1",
    "@types/node": "^20.4.4",
    "classnames": "^2.3.2",
    "graphql": "^16.6.0",
    "isomorphic-unfetch": "^4.0.2",
    "mapbox-gl": "^2.12.0",
    "moment": "2.29.4",
    "next": "^13.1.1",
    "normalize-scss": "^7.0.1",
    "picturefill": "^3.0.3",
    "react": "^18.2.0",
    "react-dates": "21.8.0",
    "react-dom": "^18.2.0",
    "react-gtm-module": "^2.0.11",
    "react-hook-form": "^7.41.5",
    "react-html-parser": "^2.0.2",
    "react-waypoint": "^10.3.0",
    "sharp": "^0.32.1",
    "swiper": "^8.4.5",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "@apollo/react-testing": "^4.0.0",
    "@babel/core": "^7.20.12",
    "@babel/preset-env": "^7.20.2",
    "@storybook/addon-actions": "^7.0.17",
    "@storybook/addon-docs": "^7.0.17",
    "@storybook/addon-essentials": "^7.0.17",
    "@storybook/addon-links": "^7.0.17",
    "@storybook/addon-mdx-gfm": "^7.0.17",
    "@storybook/nextjs": "^7.0.17",
    "@storybook/react": "^7.0.17",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@types/jest": "^29.2.5",
    "@types/mapbox-gl": "^2.7.10",
    "@types/picturefill": "^3.0.1",
    "@types/react": "^18.0.26",
    "@types/react-dates": "^21.8.3",
    "@types/react-dom": "^18.0.10",
    "@types/react-gtm-module": "^2.0.1",
    "@types/react-html-parser": "^2.0.2",
    "@types/uuid": "^9.0.0",
    "@typescript-eslint/eslint-plugin": "^5.48.1",
    "@typescript-eslint/parser": "^5.48.1",
    "babel-loader": "^9.1.2",
    "babel-plugin-module-resolver": "^5.0.0",
    "babel-preset-react-app": "^10.0.1",
    "cross-env": "^7.0.3",
    "css-loader": "^6.7.3",
    "eslint": "^8.31.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-next": "^13.1.1",
    "eslint-config-prettier": "^8.6.0",
    "eslint-plugin-cypress": "^2.12.1",
    "eslint-plugin-import": "^2.27.4",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "jest": "^29.3.1",
    "jest-environment-jsdom": "^29.3.1",
    "mocha": "^10.2.0",
    "mochawesome": "^7.1.3",
    "mochawesome-merge": "^4.3.0",
    "mochawesome-report-generator": "^6.2.0",
    "prettier": "^2.8.2",
    "sass-loader": "^13.2.0",
    "storybook": "^7.0.17",
    "style-loader": "^3.3.1",
    "typescript": "^4.9.4",
    "typescript-plugin-css-modules": "^5.0.1",
    "webpack": "^5.75.0"
  }

I tried cypress 12.3.0, 12.13.0, and 12.17.0

Thanks :)

MikeMcC399 · 2023-07-25T07:01:02Z

@fabio-d-m

Many thanks for the snippet from your package.json. It seems there is a conflict between Cypress and storybook.

yarn why string-width led me in the direction of storybook.

When I removed all storybook entries there was no issue installing Cypress.

You may like to try downgrading to Storybook 7.0. When I did this by changing "^7.0.17" to "~7.0.17" it reverted to using Storybook 7.0 instead of 7.1.

This will need some more investigation. CommonJS and ESM modules can normally coexist. Perhaps this issue should be reported to storybook as an upgrade issue to Storybook 7.1. released on July 18, 2023?

MikeMcC399 · 2023-07-25T07:01:31Z

@AdamBCo

Please let us know if you are also using Storybook.

MikeMcC399 · 2023-07-25T12:08:37Z

@fabio-d-m

I did some more investigation. When I execute the following, based on your package.json:

npm install yarn@latest -g
yarn cache clean
yarn install
yarn add cypress -D

there is a warning output:

warning Pattern ["string-width@^4.1.0"] is trying to unpack in the same destination "/home/mike/.cache/yarn/v6/npm-string-width-cjs-4.2.3-269c7117d27b05ad2e536830a8ec895ef9c6d010-integrity/node_modules/string-width-cjs" as pattern ["string-width-cjs@npm:string-width@^4.2.0"]. This could result in non-deterministic behavior, skipping.

This looks like a Yarn caching issue Warning: pattern is trying to unpack in the same destination yarnpkg/yarn#4812 fixed in Yarn Modern. Yarn Classic (1.x) is frozen, so there are no more bug fixes for this version. This problem is independent of Cypress, since the warning also appears when executing yarn install --force before trying to install Cypress.

Would you like to try updating to Yarn Modern? This will be Yarn 3.6.1. I tried it and it worked for me, at least in terms of getting Cypress to install:

yarn set version berry
yarn install
yarn add cypress -D

Edit: I noticed that storybook is already using Yarn Modern.

MikeMcC399 · 2023-07-26T14:35:58Z

Thanks to @fabio-d-m we have a reproducible example 👍🏻

This is an open issue [Bug]: string-width dependency stops storybook from executing storybookjs/storybook#22431 with Storybook.

The workaround listed there is to update to Yarn Modern.

So, pending feedback about whether upgrading from Yarn Classic to Yarn Modern resolved the issue, then this issue could be closed as far as Cypress is concerned.

Hopefully @AdamBCo will also be able to respond soon.

MikeMcC399 · 2023-07-27T05:53:07Z

@fabio-d-m

Another user with a similar issue installing Cypress on topic of Storybook reported in a Discord topic that they successfully followed advice from storybookjs/storybook#22431 (comment) to resolve their issue.

The recommendation says basically:

add

  "resolutions": {
    "jackspeak": "2.1.1"
  }

to package.json, delete yarn.lock, run yarn install. I tried this out with your package.json and I was able to install Cypress.

Alternatively avoid using Yarn Classic.

fabio-d-m · 2023-07-27T12:50:37Z

@MikeMcC399 perfect! Thanks a lot for your help :)

MikeMcC399 · 2023-07-27T12:58:03Z

@fabio-d-m

You're very welcome. It was quite a difficult issue due to the root cause not being Cypress itself.

Can you confirm that the suggestion worked for you?

If yes, then I suggest to close this issue unless we hear from the original poster @AdamBCo that there is still something outstanding.

mattleong · 2023-07-31T17:39:32Z

@MikeMcC399 Ran into the same issue and adding the package resolution fixed things for me 👍

levon-dalakyan · 2023-08-07T12:16:24Z

@MikeMcC399 Worked for me as well, thanks a lot!

nagash77 · 2023-08-16T12:34:36Z

Going to close this as resolved.

Also updated yarn to version 3 to avoid an issue where both storybook and cypress depend on the same node module (string-width) but different versions. See: https://github.com/cypress-io/cypress/issues/27370\#issuecomment-1649715561

yarn set version classic Previously I had switched to yarn version 3 to get around a collision in a dependency between storybook and cypress. Instead I am now going with a solution to set a resolution entry in package.json: https://github.com/cypress-io/cypress/issues/27370\#issuecomment-1652953961

because there is a conflict between Cypress and storybook cypress-io/cypress#27370 (comment)

cypress-io/cypress#27370

… (comment)

… (comment) (#268)

TheJazzDev · 2024-07-31T04:34:54Z

Thanks @MikeMcC399

hieuht-htv · 2024-10-21T01:45:03Z

Thank you @MikeMcC399

AdamBCo added the topic: installation Issue during installation or downloading Cypress label Jul 23, 2023

nagash77 self-assigned this Jul 24, 2023

nagash77 closed this as completed Aug 16, 2023

nagash77 removed their assignment Aug 16, 2023

01G271BR9H8WH1VNE8QHKYGDCX mentioned this issue Sep 30, 2023

Storybook更新 01G271BR9H8WH1VNE8QHKYGDCX/yorudokimayu-info#200

Merged

joekrump mentioned this issue Oct 18, 2023

Add storybook joekrump/rails-svelte-inertia-tinker#1

Merged

sonsurim mentioned this issue Nov 13, 2023

config: cd 환경 구축 price-offer/offer-fe#159

Merged

ovidiuch mentioned this issue Nov 20, 2023

Upgrade dependencies react-cosmos/react-cosmos#1566

Merged

7 tasks

kyotodevIndie added a commit to kyotodevIndie/react-login-page that referenced this issue Dec 11, 2023

fix: remove .github/workflows directory

0445526

because there is a conflict between Cypress and storybook cypress-io/cypress#27370 (comment)

d36choi added a commit to d36choi/lotto-map that referenced this issue Dec 14, 2023

fix: netlify이슈로 package수정

f740f5b

cypress-io/cypress#27370

d36choi added a commit to d36choi/lotto-map that referenced this issue Dec 14, 2023

fix: netlify이슈로 package수정

1b07732

cypress-io/cypress#27370

omykhayl mentioned this issue Dec 30, 2023

The affected projects might have not been identified properly. The package(s) @swc/helpers, @nx/cypress, @nx/eslint-plugin, @nx/jest, @nx/js were not found nrwl/nx#20956

Closed

4 tasks

crodriguezvega added a commit to cosmos/ics23 that referenced this issue Jan 18, 2024

wip: trying to fix error using suggestion in cypress-io/cypress#27370…

921d110

… (comment)

crodriguezvega added a commit to cosmos/ics23 that referenced this issue Jan 18, 2024

wip: trying to fix error using suggestion in cypress-io/cypress#27370…

6c77125

… (comment) (#268)

bnussman-akamai mentioned this issue Feb 12, 2024

refactor: [M3-7585] - Upgrade to React 18 linode/manager#10169

Merged

12 tasks

jxjj mentioned this issue May 6, 2024

change package manager from classic (deprecated) yarn to npm UMN-LATIS/ChimeIn2.0#820

Merged

MGJamJam mentioned this issue Jul 25, 2024

Feat/AN-4120 playwright e2e tests bitmovin/analytics-grafana-datasource#93

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

const stringWidth = require('string-width'); #27370

const stringWidth = require('string-width'); #27370

AdamBCo commented Jul 23, 2023 •

edited by nagash77

Loading

MikeMcC399 commented Jul 24, 2023

nagash77 commented Jul 24, 2023

fabio-d-m commented Jul 24, 2023 •

edited

Loading

MikeMcC399 commented Jul 25, 2023 •

edited

Loading

MikeMcC399 commented Jul 25, 2023

MikeMcC399 commented Jul 25, 2023 •

edited

Loading

MikeMcC399 commented Jul 26, 2023

MikeMcC399 commented Jul 27, 2023

fabio-d-m commented Jul 27, 2023

MikeMcC399 commented Jul 27, 2023

mattleong commented Jul 31, 2023

levon-dalakyan commented Aug 7, 2023

nagash77 commented Aug 16, 2023

TheJazzDev commented Jul 31, 2024

hieuht-htv commented Oct 21, 2024

const stringWidth = require('string-width'); #27370

const stringWidth = require('string-width'); #27370

Comments

AdamBCo commented Jul 23, 2023 • edited by nagash77 Loading

Current behavior

Debug logs

Cypress Version

Node version

Package Manager

Package Manager Version

Operating system

Operating System Version

Other

MikeMcC399 commented Jul 24, 2023

nagash77 commented Jul 24, 2023

fabio-d-m commented Jul 24, 2023 • edited Loading

MikeMcC399 commented Jul 25, 2023 • edited Loading

MikeMcC399 commented Jul 25, 2023

MikeMcC399 commented Jul 25, 2023 • edited Loading

MikeMcC399 commented Jul 26, 2023

MikeMcC399 commented Jul 27, 2023

fabio-d-m commented Jul 27, 2023

MikeMcC399 commented Jul 27, 2023

mattleong commented Jul 31, 2023

levon-dalakyan commented Aug 7, 2023

nagash77 commented Aug 16, 2023

TheJazzDev commented Jul 31, 2024

hieuht-htv commented Oct 21, 2024

AdamBCo commented Jul 23, 2023 •

edited by nagash77

Loading

fabio-d-m commented Jul 24, 2023 •

edited

Loading

MikeMcC399 commented Jul 25, 2023 •

edited

Loading

MikeMcC399 commented Jul 25, 2023 •

edited

Loading