Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

After updating to v22.12, always got ReferenceError: require is not defined in tailwind config #56140

Open
satriadhikara opened this issue Dec 5, 2024 · 2 comments

Comments

@satriadhikara
Copy link

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

@ljharb
Copy link
Member

ljharb commented Dec 5, 2024

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.

@joyeecheung
Copy link
Member

joyeecheung commented Dec 5, 2024

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 #56127 (comment) ? 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?

hilverd added a commit to hilverd/glossary-page-template that referenced this issue Dec 7, 2024
FloezeTv added a commit to SaplingSquad/SoftwareEngineering-WS2025-SaplingSquad that referenced this issue Dec 9, 2024
Use ESM-`import` to import `daisyui` in `tailwind.config.js`.
Fails to compile in node 22.12.0 (but not in 22.11.0).
Using CJS-syntax is not allowed, as `package.json` sets `type: module`.
This means that all `.js`-files are interpreted as ESM-modules.

See nodejs/node#56140 (comment)
FloezeTv added a commit to SaplingSquad/SoftwareEngineering-WS2025-SaplingSquad that referenced this issue Dec 9, 2024
Use ESM-`import` to import `daisyui` in `tailwind.config.js`.
Fails to compile in node 22.12.0 (but not in 22.11.0).
Using CJS-syntax is not allowed, as `package.json` sets `type: module`.
This means that all `.js`-files are interpreted as ESM-modules.

See nodejs/node#56140 (comment)
FloezeTv added a commit to SaplingSquad/SoftwareEngineering-WS2025-SaplingSquad that referenced this issue Dec 10, 2024
Use ESM-`import` to import `daisyui` in `tailwind.config.js`.
Fails to compile in node 22.12.0 (but not in 22.11.0).
Using CJS-syntax is not allowed, as `package.json` sets `type: module`.
This means that all `.js`-files are interpreted as ESM-modules.

See nodejs/node#56140 (comment)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants