nuxt / module-builder

Complete solution to build and ship Nuxt modules.
MIT License
212 stars 22 forks source link

Common js related error: does not provide an export named 'default' #246

Closed amritk closed 2 months ago

amritk commented 2 months ago

Hello! First of all here is the error:

The requested module '/_nuxt/node_modules/.pnpm/debug@4.3.4/node_modules/debug/src/browser.js?v=f2a9d9a8' does not provide an export named 'default'

I'm trying to create the Nuxt module for Scalar API References. You can find the code for the module here. It works fine in the playground and when I'm testing. However when I either use pnpm pack or release the package to NPM and install it a fresh Nuxt app, it gives me this error. Also the error does not exist in prod, its only in development. I looked into the debug package and it does not support esm at all. I'm thinking that when I run it in the playground the esm conversion is being taken care of. However I'm missing some config for the nuxt build. I tried a number of different build configs like commonjsOptions or optimizeDeps etc but couldn't get it to work. The only thing that worked was using stub: true but that only worked on my machine as all of the paths become hard coded.

What would be the proper build config to get all of the commonJS only packages optimized?

amritk commented 2 months ago

Alright I have made a new minimum reproducible repo

https://github.com/amritk/module-repro just clone then:

cd module-repo/nuxt npm i && npm run dev

in this case the app does run, but if you inspect and check the dev tools console you see

Uncaught SyntaxError: import not found: default  

I just packaged up the module, but you can find it in the module-test folder

amritk commented 2 months ago

Alright so if I add

// nuxt/nuxt.config.ts
  vite: {
    optimizeDeps: { include: ["debug"] },
  },

to the consuming nuxt app, it works. What would the equivalent config be for the module build?

amritk commented 2 months ago

Alright so I placed them in the module.ts setup function. Not sure if that's best practice, but it works!

    _nuxt.options.vite.optimizeDeps ||= {}
    _nuxt.options.vite.optimizeDeps.include ||= []

    // Ensure we transform these cjs dependencies, remove as they get converted to ejs
    _nuxt.options.vite.optimizeDeps.include.push('debug')