next.js: Next.js Build fails on Vercel when using TailwindCSS

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

This is happening within Vercel Environment

Which area(s) of Next.js are affected? (leave empty if unsure)

Font optimization (next/font)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/nodejs/nodejs.org/pull/5689

To Reproduce

Builds Locally Work but on Vercel Fail.

Reproduction: Simply trigger Build on Vercel

Describe the Bug

Vercel Build Fails with Log below

[22:36:31] Running build in Washington, D.C., USA (East) – iad1
[22:36:32] Cloning github.com/nodejs/nodejs.org (Branch: feat(style), Commit: f26add1)
[22:36:32] Skipping build cache, deployment was triggered without cache.
[22:36:34] Cloning completed: 2.007s
[22:36:34] Running "[[ "$VERCEL_GIT_COMMIT_REF" =~ dependabot* ]]"
[22:36:34] Running "vercel build"
[22:36:35] Vercel CLI 32.1.0
[22:36:35] Running "install" command: `npm install --omit=dev`...
[22:36:46] 
[22:36:46] > nodejs.org@1.0.0 postinstall
[22:36:46] > npx next telemetry disable
[22:36:46] 
[22:36:46] Attention: Next.js now collects completely anonymous telemetry regarding usage.
[22:36:46] This information is used to shape Next.js' roadmap and prioritize features.
[22:36:46] You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
[22:36:46] https://nextjs.org/telemetry
[22:36:46] 
[22:36:46] Your preference has been saved to /vercel/path0/cache/config.json.
[22:36:46] 
[22:36:46] Status: Disabled
[22:36:46] 
[22:36:46] You have opted-out of Next.js' anonymous telemetry program.
[22:36:46] No data will be collected from your machine.
[22:36:46] Learn more: https://nextjs.org/telemetry
[22:36:46] 
[22:36:46] 
[22:36:46] > nodejs.org@1.0.0 prepare
[22:36:46] > husky install
[22:36:46] 
[22:36:46] husky - Git hooks installed
[22:36:46] 
[22:36:46] added 401 packages, and audited 402 packages in 11s
[22:36:46] 
[22:36:46] 159 packages are looking for funding
[22:36:46]   run `npm fund` for details
[22:36:46] 
[22:36:46] found 0 vulnerabilities
[22:36:46] Detected Next.js version: 13.4.19
[22:36:46] Detected `package-lock.json` generated by npm 7+...
[22:36:46] Running "npm run build"
[22:36:46] 
[22:36:46] > nodejs.org@1.0.0 prebuild
[22:36:46] > npm run scripts:generate-next-data
[22:36:46] 
[22:36:47] 
[22:36:47] > nodejs.org@1.0.0 scripts:generate-next-data
[22:36:47] > cross-env NODE_NO_WARNINGS=1 node scripts/generate-next-data/index.mjs
[22:36:47] 
[22:36:47] 
[22:36:47] > nodejs.org@1.0.0 build
[22:36:47] > cross-env NODE_NO_WARNINGS=1 next build
[22:36:47] 
[22:36:48] - warn You have enabled experimental feature (largePageDataBytes) in next.config.mjs.
[22:36:48] - warn Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
[22:36:48] 
[22:36:48] Attention: Next.js now collects completely anonymous telemetry regarding usage.
[22:36:48] This information is used to shape Next.js' roadmap and prioritize features.
[22:36:48] You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
[22:36:48] https://nextjs.org/telemetry
[22:36:48] 
[22:36:48] - info Creating an optimized production build...
[22:36:58] Failed to compile.
[22:36:58] 
[22:36:58] util/nextFonts.ts
[22:36:58] An error occured in `next/font`.
[22:36:58] 
[22:36:58] Error: Cannot find module 'tailwindcss'
[22:36:58] Require stack:
[22:36:58] - /vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js
[22:36:58] - /vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/index.js
[22:36:58] - /vercel/path0/node_modules/next/dist/build/webpack/config/index.js
[22:36:58] - /vercel/path0/node_modules/next/dist/build/webpack-config.js
[22:36:58] - /vercel/path0/node_modules/next/dist/build/webpack-build/impl.js
[22:36:58] - /vercel/path0/node_modules/next/dist/build/webpack-build/index.js
[22:36:58] - /vercel/path0/node_modules/next/dist/build/index.js
[22:36:58] - /vercel/path0/node_modules/next/dist/cli/next-build.js
[22:36:58] - /vercel/path0/node_modules/next/dist/lib/commands.js
[22:36:58] - /vercel/path0/node_modules/next/dist/bin/next
[22:36:58]     at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
[22:36:58]     at /vercel/path0/node_modules/next/dist/server/require-hook.js:110:36
[22:36:58]     at Function.resolve (node:internal/modules/cjs/helpers:116:19)
[22:36:58]     at loadPlugin (/vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:54:32)
[22:36:58]     at /vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:162:56
[22:36:58]     at Array.map (<anonymous>)
[22:36:58]     at getPostCssPlugins (/vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:162:47)
[22:36:58]     at async /vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/index.js:124:36
[22:36:58]     at async /vercel/path0/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js:86:34
[22:36:58]     at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:105:20)
[22:36:58] 
[22:36:58] util/nextFonts.ts
[22:36:58] An error occured in `next/font`.
[22:36:58] 
[22:36:58] Error: Cannot find module 'tailwindcss'
[22:36:58] Require stack:
[22:36:58] - /vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js
[22:36:58] - /vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/index.js
[22:36:58] - /vercel/path0/node_modules/next/dist/build/webpack/config/index.js
[22:36:58] - /vercel/path0/node_modules/next/dist/build/webpack-config.js
[22:36:58] - /vercel/path0/node_modules/next/dist/build/webpack-build/impl.js
[22:36:58] - /vercel/path0/node_modules/next/dist/build/webpack-build/index.js
[22:36:58] - /vercel/path0/node_modules/next/dist/build/index.js
[22:36:58] - /vercel/path0/node_modules/next/dist/cli/next-build.js
[22:36:58] - /vercel/path0/node_modules/next/dist/lib/commands.js
[22:36:58] - /vercel/path0/node_modules/next/dist/bin/next
[22:36:58]     at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
[22:36:58]     at /vercel/path0/node_modules/next/dist/server/require-hook.js:110:36
[22:36:58]     at Function.resolve (node:internal/modules/cjs/helpers:116:19)
[22:36:58]     at loadPlugin (/vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:54:32)
[22:36:58]     at /vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:162:56
[22:36:58]     at Array.map (<anonymous>)
[22:36:58]     at getPostCssPlugins (/vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:162:47)
[22:36:58]     at async /vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/index.js:124:36
[22:36:58]     at async /vercel/path0/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js:86:34
[22:36:58]     at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:105:20)
[22:36:58] 
[22:36:58] 
[22:36:58] > Build failed because of webpack errors
[22:36:58] Error: Command "npm run build" exited with 1

Expected Behavior

Build should work. (Pass)

Note:

  • Using TailwindCSS with next/font and we used Next.js’s own docs for doing so.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

About this issue

  • Original URL
  • State: closed
  • Created 10 months ago
  • Comments: 16 (2 by maintainers)

Most upvoted comments

I’m glad this worked out!

Thanks @eben-vranken for trying to chime in! Keep up this good attitude 💚. And good advise from @ovflowd too, make sure to check shared links in the future. 🙏

+2
balazsorban44 on Sep 1, 2023

Interested in what this could be though. Even though I might not be of any help, would you mind sharing the eventual resolution?

+2
eben-vranken on Sep 1, 2023

As @balazsorban44 said themselves. I also wanted to double down, that I appreciate you for coming and trying to provide support to a fellow Next.js user 😃

People helping each other is what makes open source strong!

+1
ovflowd on Sep 2, 2023

Again, appreciate the support 😉

+1
ovflowd on Sep 1, 2023

I was able to diagnose the issue, and pretty much it was because on the PR the dependency is a devDependency but we omit devDependencies during the production build, as we want to omit unnecessary dependencies. (We have a custom install script for npm ci --omit=dev

Closing the issue. This was a straightforward oversight.

+1
ovflowd on Sep 1, 2023

Doesn’t tailwind config need plugins: []?

Nope. It’s optional. Again, the issue is not on the Tailwind-side, (afaik), but pretty much next/fonts while compiling the CSS files (and adding its own font families) probably is unable to recognize what “tailwind” (@tailwind) is.

Either by not importing PostCSS at the time of building itself or some other weird shenanigan.

+1
ovflowd on Sep 1, 2023

Doesn’t tailwind config need plugins: []?

Either way, I appreciate your comment, good luck!

+1
eben-vranken on Sep 1, 2023

Are you sure tailwind is added to the package.json dependency list? Also, add it to postcss.config.js

package.json:

{
  ...
  },
  "dependencies": {
    ...
    "tailwindcss": "3.3.3"
  }
}

postcss.config.js:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
+1
eben-vranken on Sep 1, 2023
Read more comments on GitHub
← next.js: Next.js application showcases intermittent slow responses, in Google Cloud Run instance running, from 30 seconds up to more than 1 minute
next.js: NextJs compiling extremely slow →