In Vite/Vue3 app I import two identical umd.js files:
One is in node_modules/foo/bar/dist/foobar.umd.js
(and imported with alias @foo = node_modules/@foo
).
Second .umd.js
file is in <root dir>/foo/bar/dist/foobar.umd.js
.
Both paths are resolved, but when imported, the module outside of node_modules
is not imported correctly as ES module:
import * as foobar1 from '@foo/bar/dist/foobar.umd' // is in 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
returns only Symbol(Symbol.toStringTag): "Module"
Where is this difference coming from?
If it's relevant, this how the alias (for the correctly imported module) is defined in vite.config.js
:
resolve: {
alias: {
'@foo': fileURLToPath(
new URL('./node_modules/@foo', import.meta.url)
),
}
}
Edit. Vite's dependency optimization seems to be affecting this. If I add to vite.config.js
:
optimizeDeps: {
exclude: ['@foo'],
},
foobar1
is also not returning named exports, but that doesn't help me much.
As mentioned in edited question, apparently Vite's
optimizeDeps
seems to be the key here.After adding to
vite.config.js
:this will import named exports correctly:
It is imperative to use the exact same path as provided to
optimizeDeps.include
.