nuxt: Requested module does not provide export named 'default'

Environment

  • Node Version: v14.16.0
  • Nuxt Version: 3.0.0
  • Package Manager: npm@7.17.0
  • 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

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 2
  • Comments: 42 (7 by maintainers)

Most upvoted comments

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']
    }
  }
})

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

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 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

@nuxt/devtools

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" }

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'
  }

I just created a new project with latest version of Nuxt 3.4.3. When I installed @nuxtjs/tailwindcss@v6.6.7, 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/tailwindcss@v6.6.8 please? Sorry about this 🙏

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

Thank you! 😄

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’

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'],
    }
  },
});

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…

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 😉))

@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.

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

@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.

Would you open a new issue with a reproduction? 🙏

@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']
},

Here’s a workaround until https://github.com/nuxt/framework/pull/5398 is merged.

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

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