N
Nuxt•2mo ago
rich

Error "...node_modules/vue/index.mjs' does not provide an export named 'default'" with latest

I'm currently getting a error on generate (which I have had for a few months now but always have to downgrade to fix it so I'm curious to know if anyone can help me resolve this. ├── @nuxtjs/sanity@1.14.1 ├── @pinia/nuxt@0.11.2 ├── nuxt@3.17.7 ├── pinia@3.0.3 └── unhead@2.0.12 
    import require$$0, { hasInjectionContext, inject, getCurrentInstance, defineComponent, createElementBlock, shallowRef, provide, cloneVNode, h, defineAsyncComponent, computed, unref, shallowReactive, ref, Suspense, Fragment, createApp, toRef, onErrorCaptured, onServerPrefetch, createVNode, resolveDynamicComponent, reactive, effectScope, isReadonly, isRef, isShallow, isReactive, toRaw, mergeProps, watch, withCtx, getCurrentScope, nextTick, useSSRContext } from 'node_modules/vue/index.mjs';
    ^^^^^^^^^^
    SyntaxError: The requested module 'node_modules/vue/index.mjs' does not provide an export named 'default'
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:182:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:266:5)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:644:26)
    at async .nuxt/prerender/chunks/_/renderer.mjs:113:24
    at async Object.render (.nuxt/prerender/chunks/_/renderer.mjs:292:20)
    at async Object.handler (.nuxt/prerender/chunks/nitro/nitro.mjs:1236:22)
    at async Object.handler (node_modules/h3/dist/index.mjs:2003:19)
...etc
    import require$$0, { hasInjectionContext, inject, getCurrentInstance, defineComponent, createElementBlock, shallowRef, provide, cloneVNode, h, defineAsyncComponent, computed, unref, shallowReactive, ref, Suspense, Fragment, createApp, toRef, onErrorCaptured, onServerPrefetch, createVNode, resolveDynamicComponent, reactive, effectScope, isReadonly, isRef, isShallow, isReactive, toRaw, mergeProps, watch, withCtx, getCurrentScope, nextTick, useSSRContext } from 'node_modules/vue/index.mjs';
    ^^^^^^^^^^
    SyntaxError: The requested module 'node_modules/vue/index.mjs' does not provide an export named 'default'
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:182:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:266:5)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:644:26)
    at async .nuxt/prerender/chunks/_/renderer.mjs:113:24
    at async Object.render (.nuxt/prerender/chunks/_/renderer.mjs:292:20)
    at async Object.handler (.nuxt/prerender/chunks/nitro/nitro.mjs:1236:22)
    at async Object.handler (node_modules/h3/dist/index.mjs:2003:19)
...etc
4 Replies
kapa.ai
kapa.ai•2mo ago
Hi @rich. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error you're encountering: 
SyntaxError: The requested module 'node_modules/vue/index.mjs' does not provide an export named 'default'
SyntaxError: The requested module 'node_modules/vue/index.mjs' does not provide an export named 'default'
is related to how ES modules and CommonJS modules interoperate, especially when importing dependencies like Vue in a Nuxt project. This issue can occur if a library or your build setup expects a default export from Vue, but Vue's ESM build does not provide one in the way expected. Relevant Troubleshooting Steps: 1. Manual Interop for Default Exports:
The Nuxt documentation explains that sometimes, due to differences in module formats, you may need to manually interop the default export. For example: 
   import { default as Vue } from 'vue'
   // or, for dynamic imports:
   import('vue').then(m => m.default || m)
   
   import { default as Vue } from 'vue'
   // or, for dynamic imports:
   import('vue').then(m => m.default || m)
This is necessary because sometimes the import will result in an object like { default: { ... } } instead of the expected default export. Nuxt internally uses the mlly package to help with these situations, but if a dependency or your code is not handling this correctly, you may see this error.
See: Nuxt Docs - Troubleshooting ESM Issues 2. Transpiling or Aliasing Libraries:
If a third-party library is causing the issue (for example, if it expects a default export from Vue), you can try adding it to the build.transpile array or aliasing it to a compatible version in your nuxt.config: 
   export default defineNuxtConfig({
     build: {
       transpile: ['the-problematic-library']
     },
     alias: {
       'vue': 'vue/dist/vue.esm-bundler.js'
     }
   })
   
   export default defineNuxtConfig({
     build: {
       transpile: ['the-problematic-library']
     },
     alias: {
       'vue': 'vue/dist/vue.esm-bundler.js'
     }
   })
This can sometimes resolve issues where the wrong module format is being used. 3. Check for Dependency Mismatches:
Ensure that all your dependencies are compatible with each other and with your Nuxt version. Sometimes, a library may import Vue incorrectly, or you may have a mix of ESM and CJS dependencies that are not compatible. 4. Clear Node Modules and Reinstall:
Sometimes, simply deleting node_modules and your lock file (package-lock.json or pnpm-lock.yaml), then reinstalling dependencies, can resolve module resolution issues. Summary:
This error is typically caused by a mismatch in how modules are imported (ESM vs CJS) or by a dependency expecting a default export that doesn't exist. The Nuxt documentation provides guidance on how to handle these situations, including manual interop, transpiling, or aliasing problematic libraries. If the issue persists, check your dependencies for compatibility and try a clean install. If you need more specific help, please provide information about which library or part of your code is importing Vue in this way, as the error may be coming from a third-party dependency or a misconfiguration in your project setup. See: Nuxt Docs - Troubleshooting ESM Issues ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@705371687679688774> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
rich
richOP•3w ago
This is still an issue. ├── @nuxtjs/sanity@1.13.3 (needed to avoid another issue) ├── @pinia/nuxt@0.11.2 ├── nuxt@3.18.1 ├── pinia@3.0.3 └── unhead@2.0.12
Reckonyd
Reckonyd•4d ago
@rich I recently bumped into this issue and managed to narrow down the cause. Pinia uses a CJS build, so it expects a default import from Vue. There is already an open issue on this matter here: https://github.com/vuejs/pinia/issues/2205 A possible workaround (that worked for me) is to use the alias property on Nuxt config to force Pinia to use the ESM build. 
  alias: {
    pinia: './node_modules/pinia/dist/pinia.mjs',
  },

// For Layer use
  alias: {
    pinia: join(currentDir, './node_modules/pinia/dist/pinia.mjs'),
  },
  alias: {
    pinia: './node_modules/pinia/dist/pinia.mjs',
  },

// For Layer use
  alias: {
    pinia: join(currentDir, './node_modules/pinia/dist/pinia.mjs'),
  },
GitHub
Bundle ESM for Vue 3 prod · Issue #2205 · vuejs/pinia
What problem is this solving I&#39;m trying to use pinia in a microfrontends architecture, and we are planing to use importmaps to solve duplication of bundling dependencies. So we&#39;re mapping p...

Did you find this page helpful?