nuxt: `require()` of ES Module `node_modules\string-width\index.js` from `node_modules\wide-align\align.js` not supported

Environment

Stackblitz environment and local


  • Operating System: Windows_NT
  • Node Version: v16.17.0
  • Nuxt Version: 3.5.2
  • Nitro Version: 2.4.1
  • Package Manager: yarn@1.22.19
  • Builder: vite
  • User Config: -
  • Runtime Modules: -
  • Build Modules: -

Reproduction

https://stackblitz.com/edit/github-e7ro7z?file=README.md

Describe the bug

Nuxt can’t seem to work due to a dependency.

❯ yarn why wide-align
yarn why v1.22.19
[1/4] 🤔  Why do we have the module "wide-align"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "wide-align@1.1.5"
info Reasons this module exists
   - "nuxt#nitropack#@vercel#nft#@mapbox#node-pre-gyp#npmlog#gauge" depends on it
   - Hoisted from "nuxt#nitropack#@vercel#nft#@mapbox#node-pre-gyp#npmlog#gauge#wide-align"
info Disk size without dependencies: "16KB"
info Disk size with unique dependencies: "188KB"
info Disk size with transitive dependencies: "344KB"
info Number of shared dependencies: 4
✨  Done in 0.80s.

Now I refresh the lock-file multiple times. Take the Stackblitz - I refresh the lockfile there, and it works, but then I copy that lockfile locally and the issue persists there, while I refresh locally (and small chances it doesn’t help) and copy to Stackblitz, then the container fails.

Additional context

No response

Logs

No response

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 5
  • Comments: 26 (4 by maintainers)

Commits related to this issue

Most upvoted comments

I can confirm that adding the following to package.json will resolve the issue:

"resolutions": {
    "string-width": "4.2.3"
 }

Still an issue for us

How many of the people recommending the deletion of yarn.lock actually work with production application? 🤣 The lock file is there for a reason. Deleting it is an insanity.

1.Add this code inside package.json:

"resolutions": {
    "jackspeak": "2.1.1"
 }
  1. Remove node_modules folder and yarn.lock package.lock files.
  2. Run npm/yarn install.

Worked for me 😃

rm -rf node_modules rm -rf yarn.lock yarn yarn dev

+1, still happening, although using the resolution, removing the yarn.lock and node_modules folder, it worked, even though it warned against an incompatibility between requested versions.

wide-align, which is used by npmlog, which is used by vite, eventually, forces the use of string-width<5, which from what I understand, was a dependency that yarn failed to comply with, causing the error.

from wide-align package.json:

"//": "But not version 5 of string-width, as that's ESM only",
  "dependencies": {
    "string-width": "^1.0.2 || 2 || 3 || 4"

Again, using the resolutions seems to be working, as long as you don’t have a breaking dependency with the string-width ^5, it should be fine, but it can be really annoying. Wide-align has been inactive for over 2 years now, I doubt we will have a fix from them anytime soon. I might make a PR later to fix it

+1 for struggling with this error

You can use yarn resolutions.

I came to confirm here. The below steps can resolve the issue.

Add this to package.json.

"resolutions": {
    "string-width": "4.2.3"
 }

And then run these commands.

rm -rf node_modules
rm -rf yarn.lock
yarn cache clean
yarn install

Problem solved. 💕

After deleting node_modules and yarn.lock and then running yarn again to download node_modules, the error was gone. It worked very well 🎉.

If you’re still encountering this, you should be aware that this is a bug in yarn. See https://github.com/search?q=strip-ansi+string-width&type=issues.

This comment explains the issue and provides a workaround.

The solution is to change the yarn version. corepack enable yarn set version berry yarn install

I have the same error. For me yarn resolutions not working 😕 Without resolutions:

$ yarn
yarn install v1.22.19
[1/4] Resolving packages...
warning Lockfile has incorrect entry for "string-width@^5.1.2". Ignoring it.
warning Lockfile has incorrect entry for "string-width@^5.0.1". Ignoring it.
warning Lockfile has incorrect entry for "string-width@^5.0.0". Ignoring it.

When I have "string-with": "2.2.3":

$ yarn
yarn install v1.22.19
[1/4] Resolving packages...
warning Resolution field "string-width@4.2.3" is incompatible with requested version "string-width@^5.1.2"
warning Resolution field "string-width@4.2.3" is incompatible with requested version "string-width@^5.0.1"
warning Resolution field "string-width@4.2.3" is incompatible with requested version "string-width@^5.0.0"

When I have "string-with": "5.0.0":

$ yarn
yarn install v1.22.19
[1/4] Resolving packages...
warning Resolution field "string-width@5.0.0" is incompatible with requested version "string-width@^5.1.2"
warning Resolution field "string-width@5.0.0" is incompatible with requested version "string-width@^5.0.1"
warning Resolution field "string-width@5.0.0" is incompatible with requested version "string-width@^4.1.0"
warning Resolution field "string-width@5.0.0" is incompatible with requested version "string-width@^4.2.0"
warning Resolution field "string-width@5.0.0" is incompatible with requested version "string-width@^4.2.0"
warning Resolution field "string-width@5.0.0" is incompatible with requested version "string-width@^4.1.0"
warning Resolution field "string-width@5.0.0" is incompatible with requested version "string-width@^4.2.3"
warning Resolution field "string-width@5.0.0" is incompatible with requested version "string-width@^4.1.0"
warning Resolution field "string-width@5.0.0" is incompatible with requested version "string-width@^4.2.3"
warning Resolution field "string-width@5.0.0" is incompatible with requested version "string-width@^4.2.0"
warning Resolution field "string-width@5.0.0" is incompatible with requested version "string-width@^4.1.0"
warning Resolution field "string-width@5.0.0" is incompatible with requested version "string-width@^4.2.3"
warning Resolution field "string-width@5.0.0" is incompatible with requested version "string-width@^1.0.2 || 2 || 3 || 4"
warning Resolution field "string-width@5.0.0" is incompatible with requested version "string-width@^4.2.3"
warning Resolution field "string-width@5.0.0" is incompatible with requested version "string-width@^4.2.3"

I still have this error and can’t start my project 😥

If you’re still encountering this, you should be aware that this is a bug in yarn. See https://github.com/search?q=strip-ansi+string-width&type=issues.

This comment explains the issue and provides a workaround.

@danielroe The root issue is fixed in current version of Yarn. Perhaps it’ll be helpful for folks if the first comment in this thread directs them to the Yarn update instructions here: https://yarnpkg.com/getting-started/install#updating-yarn

yarn set version stable
yarn install

While the "resolutions" shim is a reasonable temporary fix, if you can update your version of Yarn that is the proper fix.

I deleted node_modules and yarn-lock, then installed everything again with npm. In Vercel, I override the command for install to npm i This solved my problem

I also had the same issue with nuxt.js I suggest to change the package manager from yarn to npm. Remove node_modules and yarn-lock then npm install . It worked for me.

Is this an actual issues? Is there a solution to the problems? This applies not only with nuxt, unfortunately. And also nest js, with the nest-modules/mailer library.😥 I solved it by removing yarn-lock file and node modules firstly but later i got the same issue during deployment then I solved the issue by changing my package manager to npm from yarn .now i am able to deploy my site without any issue. I hope this works for you too.

The issue here seems to be caused by your package manager. See the following logs from the stackblitz:

CleanShot 2023-05-30 at 12.26.43.png

The actual version of string-width installed by yarn is v5 which seems to be incompatible with wide-align.

I’m afraid this isn’t a Nuxt issue we can resolve.