Next.js: Error: Cannot find module '@tailwindcss/jit'

[sachinraja]

I'm running Next.js in a Docker container mounted to my project directory. I get the message: ready - started server on 0.0.0.0:3000, url: http://localhost:3000, but I get the error Error: Cannot find module '@tailwindcss/jit' right after. The latest versions of @tailwindcss/jit, tailwindcss, postcss, and autoprefixer are installed as dependencies.
PostCSS config:

module.exports = {
  plugins: {
    '@tailwindcss/jit': {},
    autoprefixer: {},
  },
};

Full Error

Error: Cannot find module '@tailwindcss/jit'
web_1  | Require stack:
web_1  | - /usr/src/app/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js
web_1  | - /usr/src/app/node_modules/next/dist/build/webpack/config/blocks/css/index.js
web_1  | - /usr/src/app/node_modules/next/dist/build/webpack/config/index.js
web_1  | - /usr/src/app/node_modules/next/dist/build/webpack-config.js
web_1  | - /usr/src/app/node_modules/next/dist/server/hot-reloader.js
web_1  | - /usr/src/app/node_modules/next/dist/server/next-dev-server.js
web_1  | - /usr/src/app/node_modules/next/dist/server/next.js
web_1  | - /usr/src/app/node_modules/next/dist/server/lib/start-server.js
web_1  | - /usr/src/app/node_modules/next/dist/cli/next-dev.js
web_1  | - /usr/src/app/node_modules/next/dist/bin/next
web_1  |     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:924:15)
web_1  |     at Function.mod._resolveFilename (/usr/src/app/node_modules/next/dist/build/webpack/require-hook.js:4:1784)
web_1  |     at Function.resolve (node:internal/modules/cjs/helpers:98:19)
web_1  |     at loadPlugin (/usr/src/app/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:1:1556)
web_1  |     at /usr/src/app/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:7:1761      
web_1  |     at Array.map (<anonymous>)
web_1  |     at getPostCssPlugins (/usr/src/app/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:7:1754)
web_1  |     at async __overrideCssConfiguration (/usr/src/app/node_modules/next/dist/build/webpack/config/blocks/css/overrideCssConfiguration.js:1:272)
web_1  |     at async getBaseWebpackConfig (/usr/src/app/node_modules/next/dist/build/webpack-config.js:144:166)
web_1  |     at async Promise.all (index 0)
web_1  |     at async HotReloader.start (/usr/src/app/node_modules/next/dist/server/hot-reloader.js:14:1997)
web_1  |     at async DevServer.prepare (/usr/src/app/node_modules/next/dist/server/next-dev-server.js:15:414)
web_1  |     at async /usr/src/app/node_modules/next/dist/cli/next-dev.js:22:1 {
web_1  |   code: 'MODULE_NOT_FOUND',
web_1  |   requireStack: [
web_1  |     '/usr/src/app/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js',
web_1  |     '/usr/src/app/node_modules/next/dist/build/webpack/config/blocks/css/index.js',
web_1  |     '/usr/src/app/node_modules/next/dist/build/webpack/config/index.js',
web_1  |     '/usr/src/app/node_modules/next/dist/build/webpack-config.js',
web_1  |     '/usr/src/app/node_modules/next/dist/server/hot-reloader.js',
web_1  |     '/usr/src/app/node_modules/next/dist/server/next-dev-server.js',
web_1  |     '/usr/src/app/node_modules/next/dist/server/next.js',
web_1  |     '/usr/src/app/node_modules/next/dist/server/lib/start-server.js',
web_1  |     '/usr/src/app/node_modules/next/dist/cli/next-dev.js',
web_1  |     '/usr/src/app/node_modules/next/dist/bin/next'

[adamwathan]

Can you include a GitHub repo that reproduces the issue? My first guess is just something weird happening with the installation, would try blowing out node_modules and double checking the package is really in your package.json for sure and reinstalling.

[sachinraja]

I had a look at node_modules (the one folder I don't have locally mounted) inside the container and saw that the @tailwindcss/jit folder wasn't there. It should have installed the package as I'm running npm ci in my build script. Not exactly sure why this worked, but I just brought my container down (docker-compose down) and back up again (docker-compose up --build) and the package was there.

[surjithctly]

I'm also getting compile error in the Next.js project after following the instructions,

Was eager to try it out, maybe I need to wait for a little more :)

ready - started server on http://localhost:3000
error - ./styles/tailwind.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ref--5-oneOf-6-2!./styles/tailwind.css)
Error: ENOENT: no such file or directory, stat '/project/tailwind.config.js'
event - build page: /next/dist/pages/_error
wait  - compiling...
error - ./styles/tailwind.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ref--5-oneOf-6-2!./styles/tailwind.css)
Error: ENOENT: no such file or directory, stat '/project/tailwind.config.js'
Error: Cannot find module 'project\.next\build-manifest.json'

[will-stone]

I couldn't get this to work with NextJS either; getting a Maximum call stack size exceeded error. I then updated to latest jit and autoprefixer (as per this comment: #29 (comment)) and it now seems to be working. Just going to kick the tyres now. Thanks @adamwathan & team 😄

[surjithctly]

@will-stone It doesn't fix for me. My Error was

Error: ENOENT: no such file or directory, stat ....[my path].../tailwind.config.js

[will-stone]

Is your path to your styles correctly imported in _app? The log message you showed looks like it’s using “.” instead of “..”

[surjithctly]

@will-stone It works when I change "@tailwindcss/jit": {}, to tailwindcss: {},
So, the issue comes with JIT and its dependencies.

I did try with a fresh create-next-app on my Windows + Node 14.16.0.

But I got the same error.

[Chizzah]

Having the same issue

[adamwathan]

Can someone provide a reproduction? Impossible to find out the cause without a reproduction.

[mrdarkside]

@will-stone It works when I change "@tailwindcss/jit": {}, to tailwindcss: {},
So, the issue comes with JIT and its dependencies.

I did try with a fresh create-next-app on my Windows + Node 14.16.0.

But I got the same error.

Seems like you ran into the same issue #78 (comment)

[surjithctly]

Thanks @mrdarkside

Yes, my issue was because of space in folder name as per #78 & #22

[zyzski]

looks like this requires "tailwindcss": "^2.0.3", I had a similar issue until I upgraded from 1.8.10

[zyzski]

may also be some related issues due to PostCSS compatibility (noted in readme, but not a high priority atm), read more here: https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

[littleiffel]

I run into the same issue, I added a repo that gives this error

Repo: https://github.com/littleiffel/tailwind-jit-nextjs

Node version is v14.16.0 & running Windows with WSL2

Full Error Stacktrace

error - ./styles/globals.css ((webpack)/css-loader/cjs.js??ref--5-oneOf-6-1!(webpack)/postcss-loader/cjs.js??ref--5-oneOf-6-2!./styles/globals.css)
TypeError: plugins.forEach is not a function
    at Array.forEach (<anonymous>)
Error: Cannot find module '/home/thierry/code/tailwind-next/tailwind-next/.next/build-manifest.json'
Require stack:
- /home/thierry/code/tailwind-next/tailwind-next/node_modules/next/dist/next-server/server/load-components.js
- /home/thierry/code/tailwind-next/tailwind-next/node_modules/next/dist/next-server/server/api-utils.js
- /home/thierry/code/tailwind-next/tailwind-next/node_modules/next/dist/next-server/server/next-server.js
- /home/thierry/code/tailwind-next/tailwind-next/node_modules/next/dist/server/next.js
- /home/thierry/code/tailwind-next/tailwind-next/node_modules/next/dist/server/lib/start-server.js
- /home/thierry/code/tailwind-next/tailwind-next/node_modules/next/dist/cli/next-dev.js
- /home/thierry/code/tailwind-next/tailwind-next/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.mod._resolveFilename (/home/thierry/code/tailwind-next/tailwind-next/node_modules/next/dist/build/webpack/require-hook.js:4:1784)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at loadComponents (/home/thierry/code/tailwind-next/tailwind-next/node_modules/next/dist/next-server/server/load-components.js:1:1063)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async DevServer.findPageComponents (/home/thierry/code/tailwind-next/tailwind-next/node_modules/next/dist/next-server/server/next-server.js:74:257)
    at async DevServer.renderErrorToHTML (/home/thierry/code/tailwind-next/tailwind-next/node_modules/next/dist/next-server/server/next-server.js:136:266)
    at async DevServer.render (/home/thierry/code/tailwind-next/tailwind-next/node_modules/next/dist/next-server/server/next-server.js:72:236)
    at async Object.fn (/home/thierry/code/tailwind-next/tailwind-next/node_modules/next/dist/next-server/server/next-server.js:56:580)
    at async Router.execute (/home/thierry/code/tailwind-next/tailwind-next/node_modules/next/dist/next-server/server/router.js:23:67)
    at async DevServer.run (/home/thierry/code/tailwind-next/tailwind-next/node_modules/next/dist/next-server/server/next-server.js:66:1042)
    at async DevServer.handleRequest (/home/thierry/code/tailwind-next/tailwind-next/node_modules/next/dist/next-server/server/next-server.js:34:504) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/thierry/code/tailwind-next/tailwind-next/node_modules/next/dist/next-server/server/load-components.js',
    '/home/thierry/code/tailwind-next/tailwind-next/node_modules/next/dist/next-server/server/api-utils.js',
    '/home/thierry/code/tailwind-next/tailwind-next/node_modules/next/dist/next-server/server/next-server.js',
    '/home/thierry/code/tailwind-next/tailwind-next/node_modules/next/dist/server/next.js',
    '/home/thierry/code/tailwind-next/tailwind-next/node_modules/next/dist/server/lib/start-server.js',
    '/home/thierry/code/tailwind-next/tailwind-next/node_modules/next/dist/cli/next-dev.js',
    '/home/thierry/code/tailwind-next/tailwind-next/node_modules/next/dist/bin/next'
  ]
}