Fresh project error: pinceau/volar Error [ERR_REQUIRE_ESM]

[McSneaky]

trafficstars

When creating fresh project, getting error like this:

Load plugin failed: pinceau/volar Error [ERR_REQUIRE_ESM]: require() of ES Module /home/mcsneaky/Projects/content-app/node_modules/chalk/source/index.js from /home/mcsneaky/Projects/content-app/node_modules/style-dictionary-esm/dist/index.cjs not supported.

Full stack strace

ℹ Building client...                                                                                                                                                                                    2:07:42 AM
ℹ vite v4.4.9 building for production...                                                                                                                                                                2:07:42 AM
Load plugin failed: pinceau/volar Error [ERR_REQUIRE_ESM]: require() of ES Module /home/mcsneaky/Projects/content-app/node_modules/chalk/source/index.js from /home/mcsneaky/Projects/content-app/node_modules/style-dictionary-esm/dist/index.cjs not supported.
Instead change the require of index.js in /home/mcsneaky/Projects/content-app/node_modules/style-dictionary-esm/dist/index.cjs to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/home/mcsneaky/Projects/content-app/node_modules/style-dictionary-esm/dist/index.cjs:10:13)
    at Object.<anonymous> (/home/mcsneaky/Projects/content-app/node_modules/pinceau/dist/shared/pinceau.71cfe6a3.cjs:13:1)
    at Object.<anonymous> (/home/mcsneaky/Projects/content-app/node_modules/pinceau/dist/volar.cjs:5:15)
    at /home/mcsneaky/Projects/content-app/node_modules/@vue/language-core/out/utils/ts.js:144:28
    at Array.map (<anonymous>)
    at getPartialVueCompilerOptions (/home/mcsneaky/Projects/content-app/node_modules/@vue/language-core/out/utils/ts.js:140:14)
    at Object.createParsedCommandLineByJson (/home/mcsneaky/Projects/content-app/node_modules/@vue/language-core/out/utils/ts.js:36:20)
    at /home/mcsneaky/Projects/content-app/node_modules/vue-component-meta/out/index.js:38:55
    at createComponentMetaCheckerWorker (/home/mcsneaky/Projects/content-app/node_modules/vue-component-meta/out/index.js:50:29)
    at createComponentMetaCheckerByJsonConfig (/home/mcsneaky/Projects/content-app/node_modules/vue-component-meta/out/index.js:38:12)
    at refreshChecker (file:///home/mcsneaky/Projects/content-app/node_modules/nuxt-component-meta/dist/parser.mjs:66:15)
    at fetchComponent (file:///home/mcsneaky/Projects/content-app/node_modules/nuxt-component-meta/dist/parser.mjs:102:9)
    at Array.map (<anonymous>)
    at Object.fetchComponents (file:///home/mcsneaky/Projects/content-app/node_modules/nuxt-component-meta/dist/parser.mjs:162:49)
    at Object.buildStart (file:///home/mcsneaky/Projects/content-app/node_modules/nuxt-component-meta/dist/module.mjs:22:24)
    at file:///home/mcsneaky/Projects/content-app/node_modules/rollup/dist/es/shared/node-entry.js:25544:40
    at async Promise.all (index 11)
    at async PluginDriver.hookParallel (file:///home/mcsneaky/Projects/content-app/node_modules/rollup/dist/es/shared/node-entry.js:25472:9)
    at async file:///home/mcsneaky/Projects/content-app/node_modules/rollup/dist/es/shared/node-entry.js:26704:13
    at async catchUnfinishedHookActions (file:///home/mcsneaky/Projects/content-app/node_modules/rollup/dist/es/shared/node-entry.js:25910:16)
    at async rollupInternal (file:///home/mcsneaky/Projects/content-app/node_modules/rollup/dist/es/shared/node-entry.js:26701:5)
    at async Module.build (file:///home/mcsneaky/Projects/content-app/node_modules/vite/dist/node/chunks/dep-df561101.js:48005:18)
    at async buildClient (file:///home/mcsneaky/Projects/content-app/node_modules/@nuxt/vite-builder/dist/shared/vite-builder.9fb9b8e0.mjs:614:5)
    at async bundle (file:///home/mcsneaky/Projects/content-app/node_modules/@nuxt/vite-builder/dist/shared/vite-builder.9fb9b8e0.mjs:1468:3)
    at async bundle (file:///home/mcsneaky/Projects/content-app/node_modules/nuxt/dist/index.mjs:4439:5)
    at async Promise.all (index 1)
    at async build (file:///home/mcsneaky/Projects/content-app/node_modules/nuxt/dist/index.mjs:4314:5)
    at async Object.run (file:///home/mcsneaky/Projects/content-app/node_modules/nuxi/dist/chunks/build.mjs:92:5)
    at async runCommand$1 (file:///home/mcsneaky/Projects/content-app/node_modules/nuxi/dist/shared/nuxi.9d864d83.mjs:1647:7)
    at async runCommand$1 (file:///home/mcsneaky/Projects/content-app/node_modules/nuxi/dist/shared/nuxi.9d864d83.mjs:1638:11)
    at async runMain$1 (file:///home/mcsneaky/Projects/content-app/node_modules/nuxi/dist/shared/nuxi.9d864d83.mjs:1770:7) {
  code: 'ERR_REQUIRE_ESM'
}

Tried Node 20, 18 and 16, they all result with same error

Steps to reproduce:

• Create new project: npx nuxi@latest init tmp-content
• Inside tmp-content folder: npm i @nuxt-themes/docus
• Add extends to nuxt.config.ts extends: "@nuxt-themes/docus", so it looks like this

  // https://nuxt.com/docs/api/configuration/nuxt-config
  export default defineNuxtConfig({
    extends: "@nuxt-themes/docus",
    devtools: { enabled: true },
    modules: ['@nuxt/content']
  })
  

• Run npm run build

Example repo: https://github.com/McSneaky/nuxt-docus-volar-bug

[ndianabasi]

The error above ends with esm/dist/index.cjs. Does the ESM loader support cjs file?

[ndianabasi]

I cloned and ran this project and it is working. No errors on console.

[McSneaky]

npm run dev works flawlessly, but try to build or generate

[ndianabasi]

Building succeeded. Though there was an initial error as shown below.

Environment: Node: 16.18.2 NPM: 8.19.2

Load plugin failed: pinceau/volar Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/ndianabasi/nuxt-docus-volar-bug/node_modules/chalk/source/index.js from /Users/ndianabasi/nuxt-docus-volar-bug/node_modules/style-dictionary-esm/dist/index.cjs not supported.
Instead change the require of index.js in /Users/ndianabasi/nuxt-docus-volar-bug/node_modules/style-dictionary-esm/dist/index.cjs to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/ndianabasi/nuxt-docus-volar-bug/node_modules/style-dictionary-esm/dist/index.cjs:10:13)
    at Object.<anonymous> (/Users/ndianabasi/nuxt-docus-volar-bug/node_modules/pinceau/dist/shared/pinceau.71cfe6a3.cjs:13:1)
    at Object.<anonymous> (/Users/ndianabasi/nuxt-docus-volar-bug/node_modules/pinceau/dist/volar.cjs:5:15)
    at /Users/ndianabasi/nuxt-docus-volar-bug/node_modules/@vue/language-core/out/utils/ts.js:144:28
    at Array.map (<anonymous>)
    at getPartialVueCompilerOptions (/Users/ndianabasi/nuxt-docus-volar-bug/node_modules/@vue/language-core/out/utils/ts.js:140:14)
    at Object.createParsedCommandLineByJson (/Users/ndianabasi/nuxt-docus-volar-bug/node_modules/@vue/language-core/out/utils/ts.js:36:20)
    at /Users/ndianabasi/nuxt-docus-volar-bug/node_modules/vue-component-meta/out/index.js:38:55
    at createComponentMetaCheckerWorker (/Users/ndianabasi/nuxt-docus-volar-bug/node_modules/vue-component-meta/out/index.js:50:29)
    at createComponentMetaCheckerByJsonConfig (/Users/ndianabasi/nuxt-docus-volar-bug/node_modules/vue-component-meta/out/index.js:38:12)
    at refreshChecker (file:///Users/ndianabasi/nuxt-docus-volar-bug/node_modules/nuxt-component-meta/dist/parser.mjs:66:15)
    at fetchComponent (file:///Users/ndianabasi/nuxt-docus-volar-bug/node_modules/nuxt-component-meta/dist/parser.mjs:102:9)
    at Array.map (<anonymous>)
    at Object.fetchComponents (file:///Users/ndianabasi/nuxt-docus-volar-bug/node_modules/nuxt-component-meta/dist/parser.mjs:162:49)
    at Object.buildStart (file:///Users/ndianabasi/nuxt-docus-volar-bug/node_modules/nuxt-component-meta/dist/module.mjs:22:24)
    at file:///Users/ndianabasi/nuxt-docus-volar-bug/node_modules/rollup/dist/es/shared/node-entry.js:25544:40
    at async Promise.all (index 11)
    at async PluginDriver.hookParallel (file:///Users/ndianabasi/nuxt-docus-volar-bug/node_modules/rollup/dist/es/shared/node-entry.js:25472:9)
    at async file:///Users/ndianabasi/nuxt-docus-volar-bug/node_modules/rollup/dist/es/shared/node-entry.js:26704:13
    at async catchUnfinishedHookActions (file:///Users/ndianabasi/nuxt-docus-volar-bug/node_modules/rollup/dist/es/shared/node-entry.js:25910:16)
    at async rollupInternal (file:///Users/ndianabasi/nuxt-docus-volar-bug/node_modules/rollup/dist/es/shared/node-entry.js:26701:5)
    at async Module.build (file:///Users/ndianabasi/nuxt-docus-volar-bug/node_modules/vite/dist/node/chunks/dep-df561101.js:48005:18)
    at async buildClient (file:///Users/ndianabasi/nuxt-docus-volar-bug/node_modules/@nuxt/vite-builder/dist/shared/vite-builder.9fb9b8e0.mjs:614:5)
    at async bundle (file:///Users/ndianabasi/nuxt-docus-volar-bug/node_modules/@nuxt/vite-builder/dist/shared/vite-builder.9fb9b8e0.mjs:1468:3)
    at async bundle (file:///Users/ndianabasi/nuxt-docus-volar-bug/node_modules/nuxt/dist/index.mjs:4439:5)
    at async Promise.all (index 1)
    at async build (file:///Users/ndianabasi/nuxt-docus-volar-bug/node_modules/nuxt/dist/index.mjs:4314:5)
    at async Object.run (file:///Users/ndianabasi/nuxt-docus-volar-bug/node_modules/nuxi/dist/chunks/build.mjs:92:5)
    at async runCommand$1 (file:///Users/ndianabasi/nuxt-docus-volar-bug/node_modules/nuxi/dist/shared/nuxi.9d864d83.mjs:1647:7)
    at async runCommand$1 (file:///Users/ndianabasi/nuxt-docus-volar-bug/node_modules/nuxi/dist/shared/nuxi.9d864d83.mjs:1638:11)
    at async runMain$1 (file:///Users/ndianabasi/nuxt-docus-volar-bug/node_modules/nuxi/dist/shared/nuxi.9d864d83.mjs:1770:7) {
  code: 'ERR_REQUIRE_ESM'
}

[ppshobi]

same problem

[BrunoGGM]

same problem

[vejja]

same

[shershen08]

same for me

[hywax]

Same problem

[1714080902120]

It seems not effect the building result, but still is a issue.

[andyslack]

This is breaking our builds :(

[skoenfaelt]

This is breaking our builds :(

i had this issue too. in my case it helped to remove the .nuxt folder an make sure to run the postinstall script nuxt prepare. You would not get rid of the error message but the build should be successfull and the output should work just fine

[Dino-Kupinic]

issue still persists

[ndragun92]

Installing npm i -D [email protected] in your project should fix it for now until it is fixed in repo

Raised an issue here as well so it can be fixed in proper place https://github.com/nuxt-themes/tokens/issues/9