Requested module does not provide export named 'default'

[abdulhadi-lababidi]

Environment

• Node Version: v14.16.0
• Nuxt Version: 3.0.0
• Package Manager: [email protected]
• Bundler: Vite

Reproduction

here you can see a very simple reproduction link
https://stackblitz.com/edit/github-nl4dyg?file=app.vue

npm run dev

Describe the bug

I'm trying to use class-validator packages.
first I faced a problem mentioned here and solved it by adding this package to build.transpile in nuxt.config.ts file.

then this error starts to show up
SyntaxError: The requested module '/_nuxt/node_modules/validator/lib/isLatLong.js?v=cba03522' does not provide an export named 'default'
the validator package is one of class-validator dependencies.

the weird part is that the code runs perfectly on the server process

and the error only occurs on the browser
and it works fine on both server and browser in production mode!

Additional context

No response

Logs

No response

[danielroe]

This seems to be solved by disabling 'optimizeDeps' on this module:

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  build: {
    transpile: ["class-validator"],
  },
  vite: {
    optimizeDeps: {
      exclude: ['class-validator']
    }
  }
})

[abdulhadi-lababidi]

This seems to be solved by disabling 'optimizeDeps' on this module:

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  build: {
    transpile: ["class-validator"],
  },
  vite: {
    optimizeDeps: {
      exclude: ['class-validator']
    }
  }
})

NO it's not, the problem still exits
please try it on the Reproduction link
it's still just working on the server process
here you can see the output at stackblitz:

[abdulhadi-lababidi]

I found a workaround for this issue by using Webpack instead of Vite.

you can enable Webpack by setting vite to false in nuxt.config.ts

export default defineNuxtConfig({
  vite: false
})

but you should remove the class-validator package from build.transpile

[viso-works]

same +1

[leoolivier]

Is there any progress about using class-validator with Nuxt 3 and Vite?

[Luferov]

Same problem. I've built the types using the openApi but I can't import them.
Use zero configuration with Vite.

[Luferov]

Webpack works good, but added pug, pug-plain-loader, vue-demi... Vite better then webpack, but should works.

[slavco86]

Same here - can we please get an update if this is being looked at?
Shame not to be able to use Nuxt3 for large scale apps, which benefit greatly from Class Validator package.
@danielroe ?

[danielroe]

Here's a workaround until nuxt/framework#5398 is merged.

export default defineNuxtConfig({
  alias: {
    'class-validator': 'class-validator/cjs/index.js',
  },
})

https://stackblitz.com/edit/github-nl4dyg-yqrfug

[slavco86]

Here's a workaround until nuxt/framework#5398 is merged.

export default defineNuxtConfig({
  alias: {
    'class-validator': 'class-validator/cjs/index.js',
  },
})

https://stackblitz.com/edit/github-nl4dyg-yqrfug

Awesome!!!!
Thank you so much, @danielroe

[ArjunAtlast]

I am still facing similar issue with @amcharts/amcharts5 package when using the map polygon series.

Environment:

• Node: 16.15.1
• Nuxt: 3.0.0-rc.11
• Package Manager: npm 8.11.0
• Bundler: vite

Reproduction

Please checkout this reproduction link
https://stackblitz.com/edit/github-nl4dyg-lpawak

npm run dev

Describe the bug

I'm trying to use @amcharts/amcharts5 to create a world map chart similar to the one described here.
I placed the amcharts library in build.transpile in nuxt.config.ts.

This error shows up in the client:

MapPolygon.ts:6 Uncaught SyntaxError: The requested module '/_nuxt/node_modules/polylabel/polylabel.js?v=3340e452' does not provide an export named 'default' (at MapPolygon.ts:6:8)

I inspected the polylabel.js file and it does have an export named default. I came across this issue and it has all similarities.

The code builds without issue and works perfectly in production mode. The problem only exists in the development mode just like this issue mentioned here.

[danielroe]

Check out https://vitejs.dev/config/dep-optimization-options.html#dep-optimization-options.

[ArjunAtlast]

@danielroe Thank you. Added these settings to vite config and it is working fine now:

optimizeDeps: {
  exclude:['@amcharts/amcharts5', '@amcharts/amcharts5-geodata'],
  include: ['@amcharts/amcharts5-geodata > polylabel']
},

[LuXDAmore]

Hello 😄

After updating from "nuxt": "3.1.2" to "nuxt": "3.2.3", I'm getting this error in the console:

"Uncaught SyntaxError: The requested module 'nuxt/@fs/D:/Projects/studiomado/backoffice/node_modules/.vite/deps/vue.js?v=d26ca8db' does not provide an export named 'Component' (at imports.mjs:4:716)"

The line in the imports.mjs file is:

export { withCtx, withDirectives, withKeys, withMemo, withModifiers, withScopeId, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onServerPrefetch, onUnmounted, onUpdated, computed, customRef, isProxy, isReactive, isReadonly, isRef, markRaw, proxyRefs, reactive, readonly, ref, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toRefs, triggerRef, unref, watch, watchEffect, isShallow, effect, effectScope, getCurrentScope, onScopeDispose, defineComponent, defineAsyncComponent, resolveComponent, getCurrentInstance, h, inject, nextTick, provide, useAttrs, useCssModule, useCssVars, useSlots, useTransitionState, Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'nuxt/@fs/D:/Projects/studiomado/backoffice/node_modules/.vite/deps/vue.js?v=d26ca8db';

Any solutions @danielroe ? :)

[danielroe]

Would you open a new issue with a reproduction? 🙏

[LuXDAmore]

Of course I can do it, i need just a couple of days, i will ping you back in here later!

Thank you! 😄

[LuXDAmore]

With Nuxt version "nuxt": "3.1.2" the imports.mjs is just:

export { withCtx, withDirectives, withKeys, withMemo, withModifiers, withScopeId, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onServerPrefetch, onUnmounted, onUpdated, computed, customRef, isProxy, isReactive, isReadonly, isRef, markRaw, proxyRefs, reactive, readonly, ref, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toRefs, triggerRef, unref, watch, watchEffect, isShallow, effect, effectScope, getCurrentScope, onScopeDispose, defineComponent, defineAsyncComponent, resolveComponent, getCurrentInstance, h, inject, nextTick, provide, useAttrs, useCssModule, useCssVars, useSlots, useTransitionState } from 'vue';

With no 'Component' 🤔

[LuXDAmore]

Ok @danielroe !! I did it!! 😄

HERE the Github repo (synchronized with Codesandbox)

---

Step to reproduce:

• Install the project yarn install, with [email protected] yarn add --exact [email protected];
• Run yarn dev (everything is working) [image 1];
• Upgrade nuxt npx nuxi upgrade --force (to version 3.2.3);
• Run yarn dev, the page appear blank ("Requested module 'nuxt/@fs/C:/Users/luxdamore/Desktop/nuxt3-component-vite-bug/node_modules/.vite/deps/vue.js?v=14ad53f6' does not provide an export named 'Component'" error appear in the browser console) [image 2].

---

• With version 3.1.2:

• With version ^3.2.3:

[danielroe]

@LuXDAmore You have Nuxt 2 as a dependency in your project: https://github.com/LuXDAmore/nuxt3-component-vite-bug/blob/main/package.json#L84

[LuXDAmore]

@danielroe Sorry, i copy/pasted wrong 😆!

But in the original project this package was not installed..
So yes, the error still even without this package involved.

[LuXDAmore]

I've also updated the repo so you can check @danielroe 😄

[danielroe]

@LuXDAmore Sorry you're experiencing this. The issue is now that an outdated version of unimport is being hoisted up to the top level in your dependencies. If you manually install the latest unimport, things should (hopefully) work for you.

[LuXDAmore]

@danielroe I've tried to install the latest version of unimport@3, but the problem is not resolved.

I've also noticed that the version 2 is a dependency from the @nuxt/devtools package

[Floppy012]

Currently facing the same issue after upgrading my packages:

Also tried directly installing unimport. Didn't change anything. However, I can reach my index page normally. As soon as I switch to another route the error occurs.

Edit: This only happens to me when I'm running the app througg nuxi dev when using nuxi generate and then opening the app everything works fine

Update: I found out that deep in my app in a composable there still was an import from import { computed, unref, watch } from '#build/imports';. This is what caused the error for me. Removing it solved the problem

[LuXDAmore]

@Floppy012 how did you debugged it?

I have some imports from import { ref } from '#imports', but before version 3.2.3 was working well

[Floppy012]

@Floppy012 how did you debugged it?

I have some imports from import { ref } from '#imports', but before version 3.2.3 was working well

In a totally un-elegant way. My root route worked but others didn't. So I took the page with least code and started to comment out things until it worked again. Then went into the component that broke the page and started the same thing over, then in the composable it was just a guess as I've had removed all the #imports stuff from the other files some time ago and seemed to have forgotten that one.

The only reason I used the imports was because WebStorm didn't support the way, that Nuxt uses to make the whole import-less stuff happen.

[LuXDAmore]

@Floppy012 thank you very much, yes at the end the problem was caused by this row

import { ref } from '#imports'

Now i have just to handle with the ESLint warning telling me that ref is not defined XD, but still, i can update and the project is working so i don't care!!

Also thanks to you @danielroe ❤️

[tvld]

I just upgraded from v3.3.3 to v3.4.2 I wish I had not :( as I am getting lots of these same errors as well.

Example:
Uncaught SyntaxError: The requested module '/_nuxt/components/ui/form/country/country-codes.ts?t=1682519720961' does not provide an export named 'default'
I do not have any import { ref } from '#imports'

I know Nuxt is infamous for breaking errors on minor upgrades, but well... we keep trying ;)))

[LuXDAmore]

@tvld do you have any imports from #imports?
It's not just the ref one, but probably any imports from '#imports', '#app', ecc

[tvld]

Nope, no imports at all with "#" (did not even know that's possible :))... I only use @/... )

I managed to solve the errors either renaming all my xyz.ts imported files to xyz.d.ts for type-only files and including a export default {} for the others.

[hyp530]

I just created a new project with latest version of Nuxt 3.4.3. When I installed @nuxtjs/[email protected], I get similar issue:

`Cannot restart nuxt: The requested module 'minimatch' does not provide an export named 'default' 22:06:02

import minimatch from 'minimatch';
^^^^^^^^^
SyntaxError: The requested module 'minimatch' does not provide an export named 'default'
at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)
`
How to fix this? thanks.

[derogate]

I just created a new project with latest version of Nuxt 3.4.3. When I installed @nuxtjs/[email protected], I get similar issue:

`Cannot restart nuxt: The requested module 'minimatch' does not provide an export named 'default' 22:06:02

import minimatch from 'minimatch'; ^^^^^^^^^ SyntaxError: The requested module 'minimatch' does not provide an export named 'default' at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21) at async ModuleJob.run (node:internal/modules/esm/module_job:190:5) ` How to fix this? thanks.

Having the same issue with Github Actions (Node v18.15.0, pnpm v6) for Nuxt (Nuxt v3.3.3, Nuxt Content v2.5.2) but locally, it ran without a problem.

One of my workflow steps where it occurred:

Run npm run generate
npm run generate
shell: /usr/bin/bash -e {0}
env:
working-directory: blog
PNPM_HOME: /home/runner/setup-pnpm/node_modules/.bin

generate
nuxt generate
[log] Nuxi 3.4.3
[log] Nuxt 3.4.3 with Nitro 2.4.0
[warn] Using experimental payload extraction for full-static output. You can opt-out by setting experimental.payloadExtraction to false.
Error: The requested module 'minimatch' does not provide an export named 'default'
import minimatch from 'minimatch';
^^^^^^^^^
SyntaxError: The requested module 'minimatch' does not provide an export named 'default'
at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)
Error: Process completed with exit code 1.

[atinux]

I just created a new project with latest version of Nuxt 3.4.3. When I installed @nuxtjs/[email protected], I get similar issue:

`Cannot restart nuxt: The requested module 'minimatch' does not provide an export named 'default' 22:06:02

import minimatch from 'minimatch'; ^^^^^^^^^ SyntaxError: The requested module 'minimatch' does not provide an export named 'default' at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21) at async ModuleJob.run (node:internal/modules/esm/module_job:190:5) ` How to fix this? thanks.

Can you upgrade to @nuxtjs/[email protected] please? Sorry about this 🙏

[wesley3295]

How do I fix this? @danielroe

[sf-cg]

I've tried the optimizeDeps fix with no luck, and I'm trying to remove the #import and #app imports, however I get:

nuxt3/nuxt cannot be imported directly. Instead, import runtime Nuxt composables from #app or #imports.

How do I import without these then if it throws errors like that? Am I just using the wrong import in general?

[wesley3295]

How do I fix this? @danielroe

I was importing jsonwebtoken into a module that had a Middleware for H3 Nitro server that was utilizing the package and another Middleware that was being used for my front-end that wasn't utilizing the package. Once the package was being imported from the module in my front-end Nuxt didn't like a Node Library being imported in the front-end and not server side. So I separated the two Middlewares and placed them in their recommended folders and everything is working now.

[Quineone]

still have the same issue on "nuxt": "^3.6.5" with the nuxt layer, and set these will working

alias: {
    'tiny-case': 'tiny-case/index.js',
    'property-expr': 'property-expr/index.js',
    toposort: 'toposort/index.js'
  }

[nonInfelix]

I have this issue The requested module 'vite-plugin-inspect' does not provide an export named 'default' .
Only fix was to delete devtools: { enabled: true }, from nuxt.config.ts

"devDependencies": { "@nuxt/devtools": "latest", "nuxt": "^3.7.4", "vue": "^3.3.4", "vue-router": "^4.2.5" }

[BayBreezy]

I have this issue The requested module 'vite-plugin-inspect' does not provide an export named 'default' . Only fix was to delete devtools: { enabled: true }, from nuxt.config.ts

"devDependencies": { "@nuxt/devtools": "latest", "nuxt": "^3.7.4", "vue": "^3.3.4", "vue-router": "^4.2.5" }

This worked for me. I had to remove devtools. Nuxt now needs to explicitly install vue and vue-router? Okkkk....

[broox]

i was facing the same issue with a custom package and was able to resolve it with the following in nuxt.config.ts.

(nuxt 3.9.0 with vite 5.0.10)

export default defineNuxtConfig({
  ...
  build: {
    // This fixes a 500 error when trying to run the app after building for production.
    // e.g: mypackagefunction is not a function.
    transpile: ['mypackage'],
  },
  vite: {
    optimizeDeps: {
      // This fixes a 500 error when running in dev mode after adding the build.transpile option above.
      // e.g: The requested module '/_nuxt/node_modules/mypackage/dist/index.js?v=85eb31b5' does not provide an export named 'default'
      include: ['mypackage > mypackage'],
    }
  },
});

[wahibAbdou]

Hi guys,

I'm facing same error but with dayjs: The requested module '/_nuxt/node_modules/dayjs/plugin/advancedFormat.js?v=b8982373' does not provide an export named 'default'

[pwnkdigital]

Same here, with vueform/nuxt module:

nuxt.js?v=00be99e8:98 [nuxt] error caught during app initialization SyntaxError: The requested module '/_nuxt/node_modules/wnumb/wNumb.js?v=00be99e8' does not provide an export named 'default' (at useTooltip.js?v=00be99e8:2:8)

[RodrigoCarvalhoCode]

Hi guys,

I'm facing same error but with dayjs: The requested module '/_nuxt/node_modules/dayjs/plugin/advancedFormat.js?v=b8982373' does not provide an export named 'default'

Did you fixed the issue? I'm having the same problem with arraySupport

[unformalized]

Hi guys,
I'm facing same error but with dayjs: The requested module '/_nuxt/node_modules/dayjs/plugin/advancedFormat.js?v=b8982373' does not provide an export named 'default'

Did you fixed the issue? I'm having the same problem with arraySupport

it works for me
my project use arco-design ui components, error happen in file https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/_utils/date.ts

export default defineNuxtConfig({
  vite: {
    optimizeDeps: {
      include: [
        "dayjs",
        "dayjs/locale/zh-cn",
        "dayjs/plugin/advancedFormat",
        "dayjs/plugin/quarterOfYear",
        "dayjs/plugin/customParseFormat",
        "dayjs/plugin/isBetween",
        "dayjs/plugin/weekOfYear",
        "dayjs/plugin/weekYear",
      ],
    },
  }
})