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
- Upgrade deps https://github.com/nuxt/nuxt/issues/21231 — committed to divasilevski/nuxt-starter by divasilevski 9 months ago
- Dependency updates * Pin to nuxt/image 1.2.0, since 1.3.0 breaks IPX rendering. Most likely due to https://github.com/nuxt/image/pull/1177. * Add an explicit resolution for jackspeak to work around... — committed to fossi-foundation/fossi-foundation-web by imphil 5 months ago
- Dependency updates * Pin to nuxt/image 1.2.0, since 1.3.0 breaks IPX rendering. Most likely due to https://github.com/nuxt/image/pull/1177. * Add an explicit resolution for jackspeak to work around... — committed to fossi-foundation/fossi-foundation-web by imphil 5 months ago
- :bug: resolutions i package.json for wrap-ansi og string-width. Disse to pakkene fører til at yarn test krasjer etter oppgradering av deps. Se https://github.com/nuxt/nuxt/issues/21231\#issuecomment-1... — committed to navikt/mine-aap by tidnav 5 months ago
- regenerate lockfile, cause has bugs when use yarn v1 https://github.com/nuxt/nuxt/issues/21231#issuecomment-1921051936 — committed to agantelin/nuxt3-notifications by windx-foobar 5 months ago
- feat: bump @kyvg/vue3-notification Updated: — @kyvg/vue3-notification from 2 to latest 3 version — other dependencies — regenerate yarn lockfile (https://github.com/nuxt/nuxt/issues/21231#issuecom... — committed to windx-foobar/nuxt3-notifications by agantelin 5 months ago
- chore: bump string-width version, https://github.com/nuxt/nuxt/issues/21231#issuecomment-1573885747 — committed to AnsonDev42/uptime-monitor-front by AnsonDev42 4 months ago
- set resolutions to avoid Cloudflare error workaround: https://github.com/nuxt/nuxt/issues/21231#issuecomment-1573885747 — committed to zunda-pixel/niabis-web by zunda-pixel 3 months ago
- set resolutions to avoid Cloudflare error workaround: https://github.com/nuxt/nuxt/issues/21231#issuecomment-1573885747 — committed to zunda-pixel/niabis-web by zunda-pixel 3 months ago
I can confirm that adding the following to
package.jsonwill resolve the issue: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:
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:
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.And then run these commands.
Problem solved. 💕
After deleting
node_modulesandyarn.lockand then running yarn again to downloadnode_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 enableyarn set version berryyarn installI have the same error. For me yarn resolutions not working 😕 Without resolutions:
When I have
"string-with": "2.2.3":When I have
"string-with": "5.0.0":I still have this error and can’t start my project 😥
@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
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_modulesandyarn-lock, then installed everything again withnpm. In Vercel, I override the command for install tonpm iThis solved my problemI 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.
The issue here seems to be caused by your package manager. See the following logs from the stackblitz:
The actual version of
string-widthinstalled by yarn is v5 which seems to be incompatible withwide-align.I’m afraid this isn’t a Nuxt issue we can resolve.