Next/font error, missing lightningcss.linux-x64-gnu.node on deployment

I am currently trying to deploy my project to Vercel but I keep running into this error

src/app/layout.tsx
12:48:04.571 : An error occurred in next/font.
12:48:04.572 : Error: Cannot find module ‘../lightningcss.linux-x64-gnu.node’

[11:57:16.016] Require stack:
[11:57:16.016] - /vercel/path0/node_modules/lightningcss/node/index.js
[11:57:16.016] - /vercel/path0/node_modules/@tailwindcss/node/dist/index.js
[11:57:16.016] - /vercel/path0/node_modules/@tailwindcss/postcss/dist/index.js
[11:57:16.016] - /vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js
[11:57:16.016] - /vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/index.js
[11:57:16.017] - /vercel/path0/node_modules/next/dist/build/webpack/config/index.js
[11:57:16.017] - /vercel/path0/node_modules/next/dist/build/webpack-config.js
[11:57:16.017] - /vercel/path0/node_modules/next/dist/build/webpack/plugins/next-trace-entrypoints-plugin.js
[11:57:16.017] - /vercel/path0/node_modules/next/dist/build/collect-build-traces.js
[11:57:16.017] - /vercel/path0/node_modules/next/dist/build/index.js
[11:57:16.017] - /vercel/path0/node_modules/next/dist/cli/next-build.js
[11:57:16.017] at Function. (node:internal/modules/cjs/loader:1401:15)
[11:57:16.017] at /vercel/path0/node_modules/next/dist/server/require-hook.js:55:36
[11:57:16.017] at defaultResolveImpl (node:internal/modules/cjs/loader:1057:19)
[11:57:16.017] at resolveForCJSWithHooks (node:internal/modules/cjs/loader:1062:22)
[11:57:16.017] at Function._load (node:internal/modules/cjs/loader:1211:37)
[11:57:16.017] at TracingChannel.traceSync (node:diagnostics_channel:322:14)
[11:57:16.017] at wrapModuleLoad (node:internal/modules/cjs/loader:235:24)
[11:57:16.017] at Module. (node:internal/modules/cjs/loader:1487:12)
[11:57:16.017] at mod.require (/vercel/path0/node_modules/next/dist/server/require-hook.js:65:28)
[11:57:16.017] at require (node:internal/modules/helpers:135:16)

For context, the issue began when I started using next-intl where I had to rearrange my folder structure to use the src folder.
Most solutions online recommend that I delete my package-lock.json file and reinstall the packages but it hasn’t worked for me yet. I’ve also read the next/js documentation and they recommend running their built-in-next-font codemod but it hasn’t helped either. I have even opted to downgrade my next version to 14.2.28 to see if it would help but the issue is still unresolved.

Does it succeed if you redeploy without build cache?

You may also need to adjust the Node.js and Next.js versions used by the project to make sure they’re compatible.

Unfortunately it does not.

I had earlier on thought that the error was because of my Node.js version so I upgraded it to 24.0.2 to run with Next 15.3.0 but the error persisted. It still running on that.

What versions should I use?

I wasn’t able to replicate the error with my test app. Do you have a minimal reproducible example that I can use to dig into this? That way we can debug it together from the same code

I was able to “fix” the error by remaking the project but this time I started with localization, using next-intl folder structure. So I have a hunch that rearranging my folder structure caused the problem. Could this be?

Changing folder organization could definitely have an effect. I’m glad you found a way to make it work!

I am facing the same issue for the past 5 hours , I am in pages router and trying to deploy on vercel.

[22:39:53.058] unhandledRejection Error: Cannot find module ‘../lightningcss.linux-x64-gnu.node’
[22:39:53.059] Require stack:
[22:39:53.060] - /vercel/path0/node_modules/lightningcss/node/index.js
[22:39:53.060] - /vercel/path0/node_modules/@tailwindcss/node/dist/index.js
[22:39:53.060] - /vercel/path0/node_modules/@tailwindcss/postcss/dist/index.js
[22:39:53.060] - /vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js
[22:39:53.060] - /vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/index.js
[22:39:53.060] - /vercel/path0/node_modules/next/dist/build/webpack/config/index.js
[22:39:53.060] - /vercel/path0/node_modules/next/dist/build/webpack-config.js
[22:39:53.060] - /vercel/path0/node_modules/next/dist/build/webpack/plugins/next-trace-entrypoints-plugin.js
[22:39:53.060] - /vercel/path0/node_modules/next/dist/build/collect-build-traces.js
[22:39:53.060] - /vercel/path0/node_modules/next/dist/build/index.js
[22:39:53.060] - /vercel/path0/node_modules/next/dist/cli/next-build.js
[22:39:53.060] at Function. (node:internal/modules/cjs/loader:1401:15)
[22:39:53.060] at /vercel/path0/node_modules/next/dist/server/require-hook.js:55:36
[22:39:53.060] at defaultResolveImpl (node:internal/modules/cjs/loader:1057:19)
[22:39:53.060] at resolveForCJSWithHooks (node:internal/modules/cjs/loader:1062:22)
[22:39:53.060] at Function._load (node:internal/modules/cjs/loader:1211:37)
[22:39:53.061] at TracingChannel.traceSync (node:diagnostics_channel:322:14)
[22:39:53.061] at wrapModuleLoad (node:internal/modules/cjs/loader:235:24)
[22:39:53.061] at Module. (node:internal/modules/cjs/loader:1487:12)
[22:39:53.061] at mod.require (/vercel/path0/node_modules/next/dist/server/require-hook.js:65:28)
[22:39:53.061] at require (node:internal/modules/helpers:135:16) {
[22:39:53.061] code: ‘MODULE_NOT_FOUND’,
[22:39:53.061] requireStack: [
[22:39:53.061] ‘/vercel/path0/node_modules/lightningcss/node/index.js’,
[22:39:53.061] ‘/vercel/path0/node_modules/@tailwindcss/node/dist/index.js’,
[22:39:53.061] ‘/vercel/path0/node_modules/@tailwindcss/postcss/dist/index.js’,
[22:39:53.061] ‘/vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js’,
[22:39:53.061] ‘/vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/index.js’,
[22:39:53.061] ‘/vercel/path0/node_modules/next/dist/build/webpack/config/index.js’,
[22:39:53.061] ‘/vercel/path0/node_modules/next/dist/build/webpack-config.js’,
[22:39:53.061] ‘/vercel/path0/node_modules/next/dist/build/webpack/plugins/next-trace-entrypoints-plugin.js’,
[22:39:53.061] ‘/vercel/path0/node_modules/next/dist/build/collect-build-traces.js’,
[22:39:53.061] ‘/vercel/path0/node_modules/next/dist/build/index.js’,
[22:39:53.061] ‘/vercel/path0/node_modules/next/dist/cli/next-build.js’
[22:39:53.061] ]
[22:39:53.062] }
[22:39:53.095] Error: Command “npm run build” exited with 1
[22:39:53.539]
[22:39:56.366] Exiting build container

Hello did you find a solution?

Maybe try rebuilding your project but initiate your internationalization first and use the app router. Also when starting the project accept the use ‘src’ folder option. Hope this works

I just had a similar issue and I fixed it by updating my Node.js to v22 (I used v18 previously).
Full steps:

  • Download/update Node.js
  • Delete package-lock.json
  • Run npm install to get an updated package-lock.json
3 Likes

I had similar issue with deploying with Bitbucket pipelines and this help solving the issue. Thanks.

2 Likes

I was using npm and I had to switch to yarn
Somehow this worked for me.. I deleted npm lock file and started fresh with yarn install.

Pushing changes without package-lock.json and with yarn.lock solved this for some reason. :slight_smile:

1 Like

None of the listed methods resolved the issue for me.

What did work was overriding the install command for vercel in vercel.json:

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "buildCommand": "npm run build",
  "installCommand": "npm ci && npm install --no-save --platform=linuxmusl --arch=x64 lightningcss",
  "framework": "nextjs"
}

If you use this method you probably will want to add the specific version of lightningcss in use. I did not need right now since this is for a POC.

1 Like

on local, some of these fixes worked, on production [SyntaxError: global.css: Cannot find module ‘../lightningcss.linux-x64-gnu.node’]

Here is my fix =
I was facing the same issue, the problem in my case was expo and nativewind is using the same package which is lightningcss but with different version. You can check in your project by running

npm list lightningcss

This command will list all the packages using lightningcss with its version if you see any version mismatch that’s the problem you can solve this by running

npm dedupe
and then
npm rebuild lightningcss

This solved the issue for me hope works for you as well.

1 Like

Hey did you manage to solve this , i’m stuck with this error even now.
I also tried codemod , and this command rm -rf node_modules package-lock.json && npm i
None of this worked.

Could use some help .
Please !

I resolved the issue adding the code below into vercel.json file

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "buildCommand": "npm run build","installCommand": "npm ci && npm install --no-save --platform=linuxmusl --arch=x64 lightningcss @tailwindcss/oxide",
  "framework": "nextjs",
  "env": {
     "npm_config_target_platform": "linuxmusl",
     "npm_config_target_arch": "x64"
  }
}
1 Like

I got the same bug, the solution was for is to change the npm runtime into bun, it’s just work like nothing happen for me.
This is a easy solution for me, bcs i already has bun install and changed the runtime is not that hard if you already installed the other runtime

1 Like

adding “@tailwindcss/oxide”: “^4.1.11” manually to your package.json solves it

1 Like

I was locally using bun instead of npm, this error didn’t appear locally, but only in vercel, hence i added this code snippet into vercel.json file, and it worked like a charm.

{
“buildCommand”: “bun run build”,
“installCommand”: “bun install”,
“framework”: “nextjs”
}

I use bun and in the vercel.json file and it works perfectly.
{

“buildCommand”: “bun run build”,

“devCommand”: “bun run dev”,

“installCommand”: “bun install”,

“framework”: “nextjs”

}

create vercel.json file and add this content: In my case build was working in dev but not in prod.
{

“$schema”: “https://openapi.vercel.sh/vercel.json”,

“buildCommand”: “npm run build”,

“installCommand”: “npm ci && npm install --no-save --platform=linuxmusl --arch=x64 lightningcss @tailwindcss/oxide”,

“framework”: “nextjs”

}

1 Like