vite-plugin-legacy
vite-plugin-legacy copied to clipboard
Error resolving from legacy bundle
My config:
import { defineConfig } from 'vite'
import legacyPlugin from 'vite-plugin-legacy'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
legacyPlugin({
// The browsers that must be supported by your legacy bundle.
// https://babeljs.io/docs/en/babel-preset-env#targets
targets: [
'> 0.5%',
'last 2 versions',
'Firefox ESR',
'not dead',
],
// Define which polyfills your legacy bundle needs. They will be loaded
// from the Polyfill.io server. See the "Polyfills" section for more info.
polyfills: [
'IntersectionObserver'
],
ignoreBrowserslistConfig: false,
corejs: true
})
],
build: {
manifest: true,
emptyOutDir: false,
target: "es2018",
outDir: "../../priv/static", // <- Phoenix expects our files here
sourcemap: true,
rollupOptions: {
input: {
main: "js/index.js",
}
},
terserOptions: {
mangle: true,
safari10: true,
output: {
comments: false
},
compress: {
pure_funcs: ['console.info', 'console.debug', 'console.warn'],
global_defs: {
module: false
}
}
}
}
})
Build output
building for production...
creating legacy bundle...
error during build:
Error: Could not resolve './vendor.17446dc3.js' from assets/application.8af83337.legacy.js
at error (/Users/trond/dev/elixir/sites/hp_vite/assets/frontend/node_modules/rollup/dist/shared/rollup.js:5240:30)
at ModuleLoader.handleResolveId (/Users/trond/dev/elixir/sites/hp_vite/assets/frontend/node_modules/rollup/dist/shared/rollup.js:18638:24)
at /Users/trond/dev/elixir/sites/hp_vite/assets/frontend/node_modules/rollup/dist/shared/rollup.js:18607:22
at async Promise.all (index 13)
at async ModuleLoader.fetchStaticDependencies (/Users/trond/dev/elixir/sites/hp_vite/assets/frontend/node_modules/rollup/dist/shared/rollup.js:18605:34)
at async Promise.all (index 0)
at async ModuleLoader.fetchModule (/Users/trond/dev/elixir/sites/hp_vite/assets/frontend/node_modules/rollup/dist/shared/rollup.js:18582:9)
at async Promise.all (index 0)
error Command failed with exit code 1.
I added a debug log in rollup's fetchStaticDependencies
:
async fetchStaticDependencies(module) {
console.log('module.sources', module.sources);
console.log('module.resolvedIds', module.resolvedIds);
// ...
}
which outputs
module.sources Set(28) {
'core-js/modules/es.array.concat.js',
'core-js/modules/es.array.find.js',
'core-js/modules/es.array.for-each.js',
'core-js/modules/es.array.from.js',
'core-js/modules/es.array.iterator.js',
'core-js/modules/es.object.assign.js',
'core-js/modules/es.object.to-string.js',
'core-js/modules/es.promise.js',
'core-js/modules/es.string.iterator.js',
'core-js/modules/web.dom-collections.for-each.js',
'core-js/modules/web.dom-collections.iterator.js',
'core-js/modules/web.url.js',
'regenerator-runtime/runtime.js',
'./vendor.01258015.js',
'\x00core-js/modules/es.array.concat.js?commonjs-proxy',
'\x00core-js/modules/es.array.find.js?commonjs-proxy',
'\x00core-js/modules/es.array.for-each.js?commonjs-proxy',
'\x00core-js/modules/es.array.from.js?commonjs-proxy',
'\x00core-js/modules/es.array.iterator.js?commonjs-proxy',
'\x00core-js/modules/es.object.assign.js?commonjs-proxy',
'\x00core-js/modules/es.object.to-string.js?commonjs-proxy',
'\x00core-js/modules/es.promise.js?commonjs-proxy',
'\x00core-js/modules/es.string.iterator.js?commonjs-proxy',
'\x00core-js/modules/web.dom-collections.for-each.js?commonjs-proxy',
'\x00core-js/modules/web.dom-collections.iterator.js?commonjs-proxy',
'\x00core-js/modules/web.url.js?commonjs-proxy',
'\x00regenerator-runtime/runtime.js?commonjs-proxy',
'\x00./vendor.01258015.js?commonjs-proxy'
}
module.resolvedIds [Object: null prototype] {}
module.sources Set(1) { './vendor.01258015.js' }
module.resolvedIds [Object: null prototype] {}
I wasn't able to figure out where things went wrong after that, this is a bit too heady for me 😅
This is what my manifest.json
looks like when building without legacyPlugin
:
{
"js/index.js": {
"file": "assets/main.88bb3872.js",
"src": "js/index.js",
"isEntry": true,
"imports": [
"_vendor.17446dc3.js"
],
"css": [
"assets/main.5ba20361.css"
]
},
"_vendor.17446dc3.js": {
"file": "assets/vendor.17446dc3.js"
}
}
Thanks for any insight and help!