Layers and non-ESM dependencies
I am running into some issues with dependencies in my nuxt layer. Basically, in my parent project, I get some client errors like "mapbox-gl does not provide an export named 'default'". I don't see this issue when I'm running the layer in it's own playground. This appears to happen when using the built version of the layer in an external app.
Does anyone know a good way to find these issues and how I'd troubleshoot them?
2 Replies
here's a simple example https://github.com/marr/deleteme-nuxt-layer
The steps I did to reproduce:
1. Create fresh layer
2. Add a CJS dependency.
3. Use that CJS package just fine in the layer.
4. Depend on the layer from the .playground dir. This uses the file generated by
npm pack as the dependency.
5. Load the playground and see the console error:
Uncaught SyntaxError: The requested module '/_nuxt/node_modules/deepmerge/dist/cjs.js?v=3c444594' does not provide an export named 'default' (at useDeepMerge.ts:1:8)
GitHub
GitHub - marr/deleteme-nuxt-layer
Contribute to marr/deleteme-nuxt-layer development by creating an account on GitHub.
now the fix, from what I understand is to add
deepmerge to the vite.optimizeDeps.include array. However, maybe there is something i'm missing? Because I would like to be able to develop a layer in isolation and not have to always know if my deps are CJS or not. The fact that they "just work" within the repo is great. Do I need to know about every package's format so consumers of this layer don't get this error?