nodejs
After updating to v22.12, always got ReferenceError: require is not defined in tailwind config
Version
v22.12.0
Platform
Darwin Satriadhikaras-MacBook-Pro.local 24.1.0 Darwin Kernel Version 24.1.0: Thu Oct 10 21:03:11 PDT 2024; root:xnu-11215.41.3~2/RELEASE_ARM64_T6020 arm64
Subsystem
No response
What steps will reproduce the bug?
npm run build on vite project that has already setup tailwindcss and shadcnui
How often does it reproduce? Is there a required condition?
always
What is the expected behavior? Why is that the expected behavior?
build succeded
What do you see instead?
$ tsc -b && vite build
♻️ Generating routes... ✅ Processed routes in 285ms vite v6.0.0 building for production... transforming (1) src/main.tsxfile:///Users/......./tailwind.config.js:74 plugins: [require("tailwindcss-animate")], ^
ReferenceError: require is not defined at file:///Users/......./tailwind.config.js:74:11 at ModuleJobSync.runSync (node:internal/modules/esm/module_job:395:35) at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:329:47) at loadESMFromCJS (node:internal/modules/cjs/loader:1414:24) at Module._compile (node:internal/modules/cjs/loader:1547:5) at Object..js (node:internal/modules/cjs/loader:1677:16) at Module.load (node:internal/modules/cjs/loader:1318:32) at Function._load (node:internal/modules/cjs/loader:1128:12) at TracingChannel.traceSync (node:diagnostics_channel:322:14) at wrapModuleLoad (node:internal/modules/cjs/loader:219:24)
Node.js v22.12.0
Additional information
i found this bug when i deploy it to vercel, but in my local it succeded built. and when i checked the node version of vercel it use v22.12.0, and at the time in my local i use v22.11.0. so when i update to the v22.12.0, it has the same error as vercel's build log. so i think the error is from v22.12.0
require doesn't work in ES Modules, and that's a .js file - do you have type module in your package.json?
If so, then you may want to either remove it, or change your tailwind config to be a .cjs file.
Considering you are using vite, you may have "type": "module" somewhere in your package.json, which means all .js files are interpreted as ESM, which won't have access to require. In that case you can apply the suggestions by @ljharb (I think vite looks at the type field too, so you should probably rename it to tailwind.config.cjs instead, or just make your tailwind.config.js use ESM syntax).
As to why this starts to happen in v22.12, I am guessing it might be similar to https://github.com/nodejs/node/issues/56127#issuecomment-2517703537 ? Some package in your toolchain may have been monkey patching the Node.js CJS loader internals to hide this bug, and we changes the signature of some internal methods (specifically module format is now passed as a third argument of Module.prototype._compile and must be passed down if someone patches it) which they are not in sync with so the bug gets exposed?
