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

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

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