tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard
Published 1 month ago • verified publisher icon tailwindlabs

`npm ls -a` reports unmet dependency errors on WASM package when installing `@tailwindcss/postcss`

Open foobar-star opened this issue 4 months ago • 7 comments

Possible Bug Report

What version of Tailwind CSS are you using? @tailwindcss/[email protected] and [email protected]

What build tool (or framework if it abstracts the build tool) are you using? npx create-next-app@latest or node.js

What version of Node.js are you using? v24.10.0 and v22.10.0

What browser are you using? N/A

What operating system are you using? Linux

Reproduction URL

Installing Tailwind CSS v4 in next.js projects or just plain node.js (specifically @tailwindcss/[email protected]) introduces either extraneous WebAssembly dependencies such as @emnapi/runtime(if using npm 11 and node version 22) or ESLProblems If using npm 11+ and node 24. In the former issue(node v 22) extraneous dependencies cannot be removed by standard methods (npm uninstall, npm prune, --ignore-scripts, etc.) and persist after installation and get reinstalled by post install scripts from napi-postinstall causing confusion and potentially interfering with clean environments or minimal builds.

Keep in mind these steps have only been identified when the sharp package is present either as a direct or as a transitive dependency. Sharp is a transitive dependency by default in all next.js projects.

You can reproduce these issues here: https://codesandbox.io/p/sandbox/github/vercel/next.js/tree/canary/examples/reproduction-template?file=%2F.gitignore

This issue originally was brought up here: https://github.com/vercel/next.js/issues/84450 and https://github.com/lovell/sharp/issues/4464 was thought to be caused by create-next-app, and the sharp packages Emscripten detection which uses similar WebAssembly binaries as tailwind and rebuilds them post-install https://github.com/lovell/sharp/issues/4442.

The two specific packages thought to explain the issue now are [email protected] and @tailwindcss/[email protected] by the way of tailwindcss/oxide-wasm32-wasi, unrs-resolver (optional dependency of eslint-config-next.js). See full explanation here: https://github.com/vercel/next.js/issues/84450#issuecomment-3393868023

Here are the exact steps to reproduce the issues using node version 22.10.0

To Reproduce

$ node -v
v22.10.0
$ npm -v
11.6.1

$ npx create-next-app@latest my-app -ts -tw -eslint
if flags are not working please select typescript, tailwind, and eslint


$ npm ls
[email protected] /project/workspace/my-app
├── @emnapi/[email protected] extraneous
├── @emnapi/[email protected] extraneous
├── @emnapi/[email protected] extraneous
├── @eslint/[email protected]
├── @napi-rs/[email protected] extraneous
├── @tailwindcss/[email protected]
├── @tybys/[email protected] extraneous
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Traditional cleanup commands have no effect so running npm uninstall emnapi/[email protected] or other cleanup commands (npm prune, reinstalling, clearing caches, ignore scripts) does not remove it or Post Install scripts from optional dependencies make these persist. https://github.com/vercel/next.js/issues/84450#issuecomment-3393868023

OR with node 24+ and NPM 11+ and installing @tailwindcss/postcss as per lovell https://github.com/lovell/sharp/issues/4464#issuecomment-3401048107

$ node -v
v24.10.0

$ npm -v
11.6.1

$ cat package.json 
{
  "dependencies": {
    "@tailwindcss/postcss": "^4.1.14",
    "sharp": "^0.34.4"
  }
}

$ npm install

added 76 packages, and audited 77 packages in 2s

38 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

$ npm ls
├── @tailwindcss/[email protected]
└── [email protected]

$ ls -w1 node_modules/@img
colour
sharp-libvips-linux-x64
sharp-linux-x64

$ npm ls --all
├─┬ @tailwindcss/[email protected]
│ ├── @alloc/[email protected]
│ ├─┬ @tailwindcss/[email protected]
│ │ ├─┬ @jridgewell/[email protected]
│ │ │ ├─┬ @jridgewell/[email protected]
│ │ │ │ ├── @jridgewell/[email protected] deduped
│ │ │ │ └── @jridgewell/[email protected] deduped
│ │ │ └─┬ @jridgewell/[email protected]
│ │ │   ├── @jridgewell/[email protected]
│ │ │   └── @jridgewell/[email protected] deduped
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected] deduped
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── @jridgewell/[email protected]
│ │ ├── [email protected]
│ │ └── [email protected] deduped
│ ├─┬ @tailwindcss/[email protected]
│ │ ├── @tailwindcss/[email protected]
│ │ ├── @tailwindcss/[email protected]
│ │ ├── @tailwindcss/[email protected]
│ │ ├── @tailwindcss/[email protected]
│ │ ├── @tailwindcss/[email protected]
│ │ ├── @tailwindcss/[email protected]
│ │ ├── @tailwindcss/[email protected]
│ │ ├── @tailwindcss/[email protected]
│ │ ├── @tailwindcss/[email protected]
│ │ ├─┬ @tailwindcss/[email protected]
│ │ │ ├── UNMET DEPENDENCY @emnapi/core@^1.5.0
│ │ │ ├── @emnapi/[email protected] deduped
│ │ │ ├── UNMET DEPENDENCY @emnapi/wasi-threads@^1.1.0
│ │ │ ├── UNMET DEPENDENCY @napi-rs/wasm-runtime@^1.0.5
│ │ │ ├── UNMET DEPENDENCY @tybys/wasm-util@^0.10.1
│ │ │ └── [email protected]
│ │ ├── @tailwindcss/[email protected]
│ │ ├── @tailwindcss/[email protected]
│ │ ├── [email protected] deduped
│ │ └─┬ [email protected]
│ │   ├─┬ @isaacs/[email protected]
│ │   │ └── [email protected] deduped
│ │   ├── [email protected]
│ │   ├── [email protected]
│ │   ├─┬ [email protected]
│ │   │ └── [email protected] deduped
│ │   └── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected] deduped
│ └── [email protected]
└─┬ [email protected]
  ├── @img/[email protected]
  ├─┬ @img/[email protected]
  │ └── @img/[email protected] deduped
  ├─┬ @img/[email protected]
  │ └── @img/[email protected] deduped
  ├── @img/[email protected]
  ├── @img/[email protected]
  ├── @img/[email protected]
  ├── @img/[email protected]
  ├── @img/[email protected]
  ├── @img/[email protected]
  ├── @img/[email protected]
  ├── @img/[email protected]
  ├── @img/[email protected]
  ├─┬ @img/[email protected]
  │ └── @img/[email protected] deduped
  ├─┬ @img/[email protected]
  │ └── @img/[email protected] deduped
  ├─┬ @img/[email protected]
  │ └── @img/[email protected] deduped
  ├─┬ @img/[email protected]
  │ └── @img/[email protected] deduped
  ├─┬ @img/[email protected]
  │ └── @img/[email protected] deduped
  ├─┬ @img/[email protected]
  │ └── @img/[email protected] deduped
  ├─┬ @img/[email protected]
  │ └── @img/[email protected] deduped
  ├─┬ @img/[email protected]
  │ └─┬ @emnapi/[email protected]
  │   └── [email protected] deduped
  ├── @img/[email protected]
  ├── @img/[email protected]
  ├── @img/[email protected]
  ├── [email protected]
  └── [email protected]

npm error code ELSPROBLEMS
npm error missing: @emnapi/core@^1.5.0, required by @tailwindcss/[email protected]
npm error missing: @emnapi/wasi-threads@^1.1.0, required by @tailwindcss/[email protected]
npm error missing: @napi-rs/wasm-runtime@^1.0.5, required by @tailwindcss/[email protected]
npm error missing: @tybys/wasm-util@^0.10.1, required by @tailwindcss/[email protected]

additional steps taken to identify/resolve the underlying issue shared below

$ node -v
v24.10.0
$ npm -v
11.6.1
$ npx create-next-app@latest my-app -ts -tw -eslint (if these options do not work please just select typescript, tailwind, and eslint from the prompt)

$ npm ls -all | grep -i invalid
│ │ │ ├─┬ @napi-rs/[email protected] invalid: "^1.0.5" from node_modules/@tailwindcss/oxide-wasm32-wasi
│ │   │ └── @napi-rs/[email protected] deduped invalid: "^1.0.5" from node_modules/@tailwindcss/oxide-wasm32-wasi
npm error code ELSPROBLEMS
npm error invalid: @napi-rs/[email protected] /project/workspace/my-app/node_modules/@napi-rs/wasm-runtime


$ rm -rf node_modules/sharp   
$ rm package-lock.json     
$ npm cache clean --force

$ npm install


$ npm ls -all | grep -i invalid
$

and also here for node version 22 LTS

$ node -v
v22.10.0
$ npm -v
11.6.1

$ npx create-next-app@latest my-app -ts -tw -eslint
if flags are not working please select typescript, tailwind, and eslint


$ npm ls
[email protected] /project/workspace/my-app
├── @emnapi/[email protected] extraneous
├── @emnapi/[email protected] extraneous
├── @emnapi/[email protected] extraneous
├── @eslint/[email protected]
├── @napi-rs/[email protected] extraneous
├── @tailwindcss/[email protected]
├── @tybys/[email protected] extraneous
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]


$ npm ls -all | grep -i invalid
$ 
$ rm -rf node_modules/sharp 
$ rm package-lock.json
$ npm cache clean --force
$ npm install sharp --no-optional
$ npm ls            
[email protected] /project/workspace/my-app
├── @eslint/[email protected]
├── @tailwindcss/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

$ npm ls -all | grep -i invalid
$

Sometimes removing the optional deps of Sharp resolved the issues entirely (as did it with tailwind or eslint). However, the sharp maintainer mentioned this is probably a question better suited for the @tailwindcss/oxide-wasm32-wasi maintainer and if not may be a bug with NPM.

Thank you!

foobar-star avatar Oct 16 '25 21:10 foobar-star

Installing @tailwindcss/postcss does not install the WASM dependencies. They show up in npm ls -a but they're not actually installed.

If you check the files in your node_modules folder you can see this:

Image

I'm not sure why npm ls -a is reporting unmet dependency errors. Maybe we need to also mark them as peers? I thought Optional dependencies should be enough 🤔

thecrypticace avatar Oct 17 '25 11:10 thecrypticace

I think there's definitely an NPM bug in here somewhere but maybe something with our package too?

This errors:

npm init -y
npm install @tailwindcss/postcss
npm ls -a

This does not and produces zero unmet dependency errors:

npm init -y
npm install sharp
npm ls -a

This produces unmet dependency warnings (but only sometimes??):

npm init -y
npm install sharp
rm -rf package-lock.json
npm install
npm ls -a

Likewise, with our package, this produces unmet dependency warnings (but only sometimes?? — other times it errors):

npm init -y
npm install @tailwindcss/postcss
rm -rf package-lock.json
npm install
npm ls -a

I can also occasionally reproduce this when deleting node_modules but i think less often?

If the previous step for sharp produced dependency warnings then you install @tailwindcss/postcss it also produces warnings instead of errors after installing it.

e.g. sometimes this produces a warning and sometimes an error:

npm init -y
npm install sharp
rm -rf package-lock.json
npm install
npm ls -a
npm install @tailwindcss/postcss
npm ls -a

thecrypticace avatar Oct 17 '25 12:10 thecrypticace

Hi all,

I’ve been debugging this issue myself and wanted to share my findings and a clear reproduction so others can reproduce and investigate.

Environment

  • Tailwind CSS version: [email protected] and @tailwindcss/[email protected]
  • Node.js version: v22.10.0 and v24.10.0
  • NPM version: 11.6.1
  • OS: Linux
  • Build tool / Framework: plain Node.js and create-next-app@latest

Description

When I install Tailwind CSS v4 in Next.js projects or plain Node.js (specifically @tailwindcss/[email protected]), I see either:

  1. Extraneous WebAssembly dependencies like @emnapi/runtime (with Node v22 & npm 11)
  2. ELSPROBLEMS errors (with Node v24 & npm 11+)

I believe the problem is linked to optional WASM dependencies (@tailwindcss/oxide-wasm32-wasi) and their interaction with Sharp as a transitive dependency.

I found these dependencies often cannot be removed by standard cleanup commands (npm uninstall, npm prune, --ignore-scripts, clearing cache) because post-install scripts reinstall them, which makes maintaining a clean environment difficult.

Reproduction Steps

Node v22.10.0 & npm 11.6.1

$ node -v
v22.10.0
$ npm -v
11.6.1
$ npx create-next-app@latest my-app -ts -tw -eslint
# (select TypeScript, Tailwind, ESLint if flags don’t work)

$ npm ls
[email protected]
├── @emnapi/[email protected] extraneous
├── @emnapi/[email protected] extraneous
├── @emnapi/[email protected] extraneous
├── @napi-rs/[email protected] extraneous
├── @tybys/[email protected] extraneous
├── @tailwindcss/[email protected]
├── [email protected]
...

Running npm ls -all | grep -i invalid produced nothing at first for me, but I observed the optional dependencies persisted in node_modules and were reinstalled after any postinstall script ran.

Node v24.10.0 & npm 11.6.1

$ node -v
v24.10.0
$ npm -v
11.6.1
$ npm init -y
$ npm install @tailwindcss/[email protected] sharp
$ npm ls -a | grep -i invalid
npm error code ELSPROBLEMS
npm error missing: @emnapi/core@^1.5.0
npm error missing: @emnapi/wasi-threads@^1.1.0
npm error missing: @napi-rs/wasm-runtime@^1.0.5
npm error missing: @tybys/wasm-util@^0.10.1

Even after I removed node_modules/sharp, deleted the lockfile, cleared the cache, and reinstalled packages, these dependencies either remained extraneous or produced ELSPROBLEMS warnings in subsequent installs.

Observations

  • npm ls -a consistently lists @tailwindcss/oxide-wasm32-wasi dependencies as missing, but the folder often never exists on disk.
  • Installing with --no-optional sometimes prevents the optional WASM packages from being present.
  • The behavior is inconsistent and seems influenced by npm’s handling of optional dependencies, WASM binaries, and postinstall scripts.

Sharp maintainers noted this might be more relevant to the @tailwindcss/oxide-wasm32-wasi package or NPM itself.

Conclusion

From my testing, this appears to be an npm edge case or bug involving optional WASM dependencies and postinstall behavior:

  • Optional dependencies in @tailwindcss/oxide-wasm32-wasi are reported as missing by npm ls -a but are not actually installed.
  • Postinstall scripts in Sharp or other packages can reinstall these binaries, causing persistent extraneous dependencies.
  • Standard cleanup commands (rm -rf node_modules, npm prune, clearing cache) are often insufficient.

References

Arun-kushwaha007 avatar Oct 22 '25 18:10 Arun-kushwaha007

Here's what worked for me:

  1. First, I cleaned up everything:
# Remove existing dependencies
rm -rf node_modules package-lock.json

# Clean npm cache completely
npm cache clean --force
  1. Then installed Tailwind with these specific flags:
npm install @tailwindcss/[email protected] --legacy-peer-deps --force
  1. Verified the fix:
npm ls -a | grep -i invalid

The Results

After following these steps:

  • No more extraneous WASM binaries
  • ELSPROBLEMS errors disappeared
  • Clean and stable environment
  • No manual cleanup needed for packages like @emnapi, @napi-rs, or @tybys

This solution worked consistently for me on both:

  • Node v22.10.0 + npm 11.6.1
  • Node v24.10.0 + npm 11.6.1

Why This Works

The key was using both --legacy-peer-deps and --force flags together. This seems to prevent the problematic optional WASM dependencies from being installed while maintaining the core functionality.

Arun-kushwaha007 avatar Oct 22 '25 18:10 Arun-kushwaha007

Build fails during npm prune --production with the following error:

ENOENT: no such file or directory, lstat '/home/node/node_modules/@tailwindcss/oxide-wasm32-wasi'

This happens because the package-lock.json was generated on a Windows machine, but the Docker build runs on Linux. Tailwind’s @tailwindcss/oxide-* dependencies are platform-specific, and the lockfile references the Windows variants. When npm prunes dependencies on Linux, it can’t find the corresponding binaries, leading to the missing file error.

sebcomeau avatar Oct 31 '25 12:10 sebcomeau

Can't do a clean install on Windows because we've recreated the package lockfile on Linux.

Windows 11 Node v24.11.0 NPM v11.6.2

$ npm ci
npm error code EUSAGE
npm error
npm error `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.
npm error
npm error Missing: @tailwindcss/[email protected] from lock file
npm error
npm error Clean install a project
npm error
npm error Usage:
npm error npm ci
npm error
npm error Options:
npm error [--install-strategy <hoisted|nested|shallow|linked>] [--legacy-bundling]
npm error [--global-style] [--omit <dev|optional|peer> [--omit <dev|optional|peer> ...]]
npm error [--include <prod|dev|optional|peer> [--include <prod|dev|optional|peer> ...]]
npm error [--strict-peer-deps] [--foreground-scripts] [--ignore-scripts] [--no-audit]
npm error [--no-bin-links] [--no-fund] [--dry-run]
npm error [-w|--workspace <workspace-name> [-w|--workspace <workspace-name> ...]]
npm error [--workspaces] [--include-workspace-root] [--install-links]
npm error
npm error aliases: clean-install, ic, install-clean, isntall-clean
npm error
npm error Run "npm help ci" for more info

sebcomeau avatar Oct 31 '25 13:10 sebcomeau

I was able to update Tailwind without deleting my lock-file by only deleting node_modules/@tailwindcss and running npm update. Was otherwise getting the ENOENT error on node_modules/@tailwindcss/oxide-wasm32-wasi

andrioid avatar Nov 29 '25 07:11 andrioid