Error resolving from legacy bundle

[tmjoen]

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!