ERROR ExperimentalWarning: CommonJS module is loading ES Module

[kswedberg]

Environment

• Operating System: Darwin
• Node Version: v22.12.0
• Nuxt Version: 3.14.1592
• CLI Version: 3.16.0
• Nitro Version: 2.10.4
• Package Manager: [email protected]
• Builder: -
• User Config: default
• Runtime Modules: @pinia/[email protected], @nuxtjs/[email protected], [email protected], [email protected], [email protected]
• Build Modules: -

Reproduction

No response

Describe the bug

Using Node LTS version (22.12.0) produces this error/warning:

[4:24:26 PM]  ERROR  (node:94662) ExperimentalWarning: CommonJS module [...]/nuxt3-app/.nuxt/tailwind.config.cjs is loading ES Module [...]/nuxt3-app/node_modules/@nuxtjs/tailwindcss/dist/runtime/merger.js using require().
Support for loading ES Module in require() is an experimental feature and might change at any time

Is there a way @nuxt/tailwindcss could produce an ES module instead (e.g. .nuxt/tailwind.config.mjs)?

Additional context

No response

Logs

[ineshbose]

Possible duplicate of #902 - could you try nightly version and see if the issue persists?

[Baloche]

I am also reproducing when using latest nuxt and @nuxt/ui dependencies. Using the nightly of @nuxt/tailwindcss does not remove the error 😢

[zedo-san]

I am also having this issue. This is what I have in my package.json

 "@nuxtjs/tailwindcss": "^6.12.2",

node: v22.12.0
nuxt: 3.13.0

[ineshbose]

I guess I should go down this route again: #922

[skkap]

Getting the same error with clean nuxt setup

    "@nuxtjs/tailwindcss": "^6.12.2",
    "nuxt": "^3.14.1592",

[davidreyg]

I'm also running nuxt inside devcontainer. same issue. :(
this npm issue suggest upgrading node to v23.4.0.
It didn't work for me.

[ineshbose]

Working on a fix!

[ineshbose]

Could you give nightly version a try? Will reopen if issue persists.

[davidreyg]

yeah same here.

[ineshbose]

Ah, I guess issue will persist if any config file uses ESM syntax. Let me reopen and investigate on priority.

Though it should be partly resolved still in nightly if your tailwind configs are CJS (which would be discouraged).

[mavyfaby]

any updates on these? I can't run nuxt on my project until this fix gets merged.

[ineshbose]

any updates on these? I can't run nuxt on my project until this fix gets merged.

Could you try adding tailwindcss.disableHMR: true in your nuxt.config as a workaround?

[fmgrafikdesign]

Could you try adding tailwindcss.disableHMR: true in your nuxt.config as a workaround?

This did not resolve the issue for me. Still getting a ERROR [worker reload] [worker init] <snip>/.nuxt/dev/index.mjs failed

[ineshbose]

Could you try adding tailwindcss.disableHMR: true in your nuxt.config as a workaround?

This did not resolve the issue for me. Still getting a ERROR [worker reload] [worker init] <snip>/.nuxt/dev/index.mjs failed

Hm, thats a dev server startup issue. Might not 100% be tailwind module issue. Could try the suggestion in this comment to see what exactly is the error? primefaces/primevue#6712 (comment)

[fmgrafikdesign]

Thank you for linking this! This allowed me to debug :) The issue was in fact that I was on a new device and had not set up the .env with secrets correctly because they are not checked into the repo. Seems like the nitropack error swallowed the actual reason, as per your linked comment. Thank you for taking your time to help me out 👍

[fmgrafikdesign]

FWIW I came here because I too had the CommonJS module is loading ES Module error and thought it was the cause of the dev server startup error - upgrading to Node 23 fixed the warning, using 6.12.2 of the nuxt module

[ineshbose]

Apologies for taking a while - I was quite puzzled with the Vite dev server issues in the environment and realised it was mostly due to exposeConfig, so we are now able to have a ESM config. Please try out nightly version to confirm if the fix is working, and I'll make a stable release accordingly.

(Merry Christmas! 🎄)

[arun-mani-j]

Thanks a lot! Bugs during holidays are always annoying, but thanks for working on it. Merry Christmas!!

…

-------- Original Message --------

On 25/12/2024 11:34 pm, Inesh Bose wrote: Apologies for taking a while - I was quite puzzled with the Vite dev server issues in the environment and realised it was mostly due to exposeConfig, so we are now able to have a ESM config. Please try out [nightly version](https://tailwindcss.nuxtjs.org/getting-started/installation#nightly-releases) to confirm if the fix is working, and I'll make a stable release accordingly. (Merry Christmas! 🎄) — Reply to this email directly, [view it on GitHub](#927 (comment)), or [unsubscribe](https://github.com/notifications/unsubscribe-auth/AL5DLCQRF5NVSYQWW5ADUMD2HLXRTAVCNFSM6AAAAABTJGRB4WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNRRHE3DMMJQGM). You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[s-slavchev]

Had the same error in the terminal and after trying the suggestions above here here is my feedback:

1. Using the nightly channel did not solve the issue for me (node v22.12.0)
2. Switching to node v23.5.0 solved the problem

[navinpeiris]

Tested with the nightly release and can confirm that the warning no longer appears and everything works as expected. Thanks for getting this sorted during the holidays @ineshbose 🫶

Package versions:

    "nuxt": "^3.15.0",
    "@nuxtjs/tailwindcss": "npm:@nuxtjs/tailwindcss@nightly",

[aquila1968]

Had the same error in the terminal and after trying the suggestions above here here is my feedback:

1. Using the nightly channel did not solve the issue for me (node v22.12.0)
2. Switching to node v23.5.0 solved the problem

for me as well

[ineshbose]

Had the same error in the terminal and after trying the suggestions above here here is my feedback:

1. Using the nightly channel did not solve the issue for me (node v22.12.0)
2. Switching to node v23.5.0 solved the problem

Hmm, would it be possible to get more context by a reproduction please?

[dungsil]

In my case also I need to use nightly version and Node v23.5.0 so I don't see the error. It is still visible in v22.12.0.

node_modules와 .nuxt 디렉토리를 지우고 다시 설치 하니까 v22.12.0에서도 작동합니다.

[gmdias727]

For me adding the "tailwindcss": "npm:@nuxtjs/tailwindcss@nightly", into "devDependencies" didn't work

meanwhile adding disableHMR: true, into nuxt.config.ts as a workaround makes the ERROR (node:29868) ExperimentalWarning: CommonJS module /home/grande/work/app-cutpass/.nuxt/tailwind.config.cjs is loading ES Module /home/grande/work/app-cutpass/node_modules/@nuxtjs/tailwindcss/dist/runtime/merger.js using require(). no longer appear.

What else I should provide here to support this issue to be solved?

[ineshbose]

For me adding the "tailwindcss": "npm:@nuxtjs/tailwindcss@nightly", into "devDependencies" didn't work

just want to confirm as its a common mistake at times, you are updating @nuxtjs/tailwindcss in your package.json, not tailwindcss right?

[jayjake0]

node upgrade to v23.5.0 solved the issue.

check:

node -v
v23.5.0

[gmdias727]

For me adding the "tailwindcss": "npm:@nuxtjs/tailwindcss@nightly", into "devDependencies" didn't work

just want to confirm as its a common mistake at times, you are updating @nuxtjs/tailwindcss in your package.json, not tailwindcss right?

my package.json:

{
  "name": "potato",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  },
  "dependencies": {
    "@mdi/font": "^7.4.47",
    "@nuxt/fonts": "^0.10.3",
    "@pinia/nuxt": "^0.9.0",
    "@vicons/ionicons5": "^0.13.0",
    "nuxt": "^3.14.1592",
    "nuxt-app": "file:",
    "pinia": "^2.3.0",
    "vue": "latest",
    "vue-router": "latest",
    "vuetify-nuxt-module": "^0.18.3",
    "vuetify-sonner": "^0.3.20"
  },
  "devDependencies": {
    "@nuxt/eslint": "^0.7.4",
    "@nuxtjs/tailwindcss": "^6.12.2",
    "@stylistic/eslint-plugin": "^2.12.1",
    "@types/tailwindcss": "^3.0.11",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.17.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.2.1",
    "postcss": "^8.4.49",
    "tailwindcss": "^3.4.17",
    "typescript": "^5.7.2",
    "unplugin-auto-import": "^0.19.0",
    "unplugin-vue-components": "^0.28.0",
    "vite-plugin-vuetify": "^2.0.4",
    "vuetify": "^3.7.6"
  }
}

I think I've installed tailwind with npx nuxi@latest module add tailwindcss only and as you can see "tailwindcss": "^3.4.17" is the only thing that exists inside package.json.

I'm still using disableHMR at nuxt.config.ts as a workaround btw

tailwindcss: {
disableHMR: true,
}

And to answer your question I'm definetely updating tailwindcss package, I don't think I have any @nuxtjs/tailwindcss

[navinpeiris]

Hi @gmdias727,

You're meant to point @nuxtjs/tailwindcss, the second item in your devDependencies to npm:@nuxtjs/tailwindcss@nightly, not the tailwindcss dependency, which is the 10th item in your devDependencies.

See: #927 (comment)

[forinda]

Here is ahow to set it up the nightly channel

{
  "devDependencies": {
-   "@nuxtjs/tailwindcss": "^6.10.0"
+   "@nuxtjs/tailwindcss": "npm:@nuxtjs/tailwindcss@nightly"
  }
}

You can check the documentatioin here Link to resource

I still get this error

[PavlosDefoort]

My Experience and Current Solution

I've also encountered this error recently. In my case, the error originates from both the @nuxt/tailwindcss and the @nuxt/ui packages. Since @nuxt/ui internally uses TailwindCSS, it suggests that the root cause might be related to the @nuxt/tailwindcss library.

Steps I Tried

1. Using the Nightly Version:
   I initially tried switching to the nightly version in devDependencies while using Node.js 22. Unfortunately, this did not resolve the issue.

2. Node.js Version Change:
   I found that the error could be resolved by either:

   • Downgrading to Node.js 20, or
   • Upgrading to Node.js 23.5.

   Since Vercel deployment does not currently support Node.js 23.5, I opted to use Node.js 20 as a temporary solution. This approach has been working well for me so far.

Key Takeaways

While I'm unsure if this is fundamentally a Node.js issue, trying a different Node.js version seems to be a feasible workaround. I recommend experimenting with compatible versions to see if it resolves the problem for your setup.

My Working Solution

Here is my package.json for reference (note that I've reverted to the stable version instead of the nightly version):

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxt/ui": "^2.20.0",
    "@nuxtjs/google-fonts": "^3.2.0",
    "@nuxtjs/tailwindcss": "^6.12.2",
    "axios": "^1.7.7",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "lucide-vue-next": "^0.469.0",
    "nuxt": "^3.15.0",
    "pixi.js": "^8.6.6",
    "radix-vue": "^1.9.11",
    "tech-stack-icons": "^2.1.0",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  },
  "devDependencies": {
    "@iconify-json/radix-icons": "^1.2.0",
    "typescript": "^5.7.2"
  }
}

---

I hope this helps others experiencing a similar issue. Let me know if additional context would be useful!

[hidarikani]

I'm not using nuxt, but I did get similar error. I made it disappear by renaming vite.config.ts to vite.config.mts not sure if it's good or bad but it worked.

[ineshbose]

I'm not using nuxt, but I did get similar error. I made it disappear by renaming vite.config.ts to vite.config.mts not sure if it's good or bad but it worked.

I think that wouldn't be encouraged (as vite config should be inlined within nuxt.config).

I do want to point out that I would not expect or ask devs to be switching node versions (esp to non-LTS) just to make this go away. A stable release is on its way, but if issues persist, I would believe them to be per-project basis, and I am happy to debug if context/repro would be provided.