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

[ineshbose]

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

[danielroe]

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

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.

[patrick-ve]

@danielroe, any ideas on how to ensure we can use an older version of string-width? I tried yarn clear cache, deleting all node_modules, lockfiles and manually setting version "^4.2.3" of string-width as a dependency, but all of this seems to fail unfortunately

[danielroe]

You can use yarn resolutions.

[patrick-ve]

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

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

[szulcus]

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 😥

[ObicaFF]

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.😥

[karadanay7]

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.

[robinbeatty]

+1 for struggling with this error

[urielb]

+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

[eylonshm]

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 :)

[mrleblanc101]

Still an issue for us

[hamrayev04]

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

[luckylooke]

I have clean new install of nuxt.. added testing setup by following installation from docs here. Hit the error right away.

tried solution:

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

but it hits next module... and I don't like the solution I would expect basic setup to work without hacks :/

Reproduced here: https://stackblitz.com/edit/nuxt-examples-g9ej3w?file=package.json

Thnks for any further hints 👍

EDIT:
I have find out that it is caused by installing "@vue/test-utils": "^2.4.4", package 😮

but it is in your docs to install it 🤔

yarn add --dev @nuxt/test-utils vitest @vue/test-utils happy-dom playwright-core

[qiuzman]

Any fix yet? This has killed multiple projects of mine when trying to deploy to azure static web apps. Can use locally but deploying is the problem!!

[danielroe]

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.

[karadanay7]

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.

[RyanClementsHax]

If it helps anyone encountering a similar error, when attempting to reproduce this issue, I was seeing a very odd error in code sandbox. When setting up a nuxt repo from scratch locally, everything worked fine for me (nuxt v3.10.0, @nuxt/image v1.3.0 at time of writing this).

[VIXI0]

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

[hyvyys]

Deleting node_modules and reinstalling worked for me. (Not using nuxt though, but vite).

[Mintimate]

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

[thezumrad]

In my case instead of yarn install override with pnpm install on vercel's deployment made it work.
Using Nuxt@3.11.1

[cesswhite]

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

[athachai29]

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. 💕

[developer239]

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.

[lance-anderson]

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.

[RomanSkrypnik]

Still facing this issue :\

[navidshad]

Solution

I had the same issue on docker and came across this solution:
remove the yarn.lock from copy list and let the yarn use original package.json the issue resolved.

In my case seems the yarn.lock contained some metadata relative to my locale environment and wont be used on docker environment.

[mrleblanc101]

@navidshad This is not a solution, that is terrible advice.

[danielroe]

To be clear, this is a yarn bug with a workaround. And the bug has been fixed in a newer version of yarn.

See #21231 (comment)