Within my Vite/Vue3 application, I am importing two identical umd.js files:
One is located at
node_modules/foo/bar/dist/foobar.umd.js@foo = node_modules/@foo).The second
.umd.js file can be found at <root dir>/foo/bar/dist/foobar.umd.jsBoth paths are successfully resolved, however, the module imported from outside of node_modules does not import correctly as an ES module:
import * as foobar1 from '@foo/bar/dist/foobar.umd' // comes from node_modules/foo/bar/dist/foobar.umd.js, works
import * as foobar2 from 'foo/bar/dist/foobar.umd' // NOT recognized as ES module
console.log('foobar', foobar1, foobar2)
foobar1 returns named exports (app, pinia, router), __esModule: true, and
Symbol(Symbol.toStringTag): "Module"foobar2 only returns Symbol(Symbol.toStringTag): "Module"What is causing this difference?
If relevant, here is how the alias (for the correctly imported module) is defined in my vite.config.js:
resolve: {
alias: {
'@foo': fileURLToPath(
new URL('./node_modules/@foo', import.meta.url)
),
}
}
Edit. It seems that Vite's dependency optimization may be impacting this issue. Adding the following to vite.config.js:
optimizeDeps: {
exclude: ['@foo'],
}
Results in foobar1 also not returning named exports, but unfortunately, this doesn't provide much clarity.