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!

[aleclarson]

Does it work without manifest: true?

Are you using dynamic import()?

[tmjoen]

Same error with manifest: false.

I'm not using any dynamic import() in my code at least, not sure what happens in the vendored stuff.

[aleclarson]

Are you using multiple paths in rollupOptions.input?

Trying to understand why that _vendor.17446dc3.js import exists.

[tmjoen]

Only one path in input:

    rollupOptions: {
      input: {
        main: "js/index.js"
      }
    }

Hmm about the vendor import, I am importing stuff in my js/index.js:

import 'objectFitPolyfill'
import autosize from 'autosize'
/**
 * JUPITER IMPORTS
 */
import {
  Application,
  Cookies,
  Events,
  Lazyload,
  Lightbox,
  Links,
  MobileMenu,
  Moonwalk,
  Popup,
  StackedBoxes,
  FixedHeader,
  Dom,
  gsap
} from '@univers-agency/jupiter'

etc.

If I remove everything inside index.js, and just do a console.log('hello') -- it builds OK without a _vendor chunk.

[aleclarson]

Hmm, I wouldn't expect a vendor chunk if you only have one input.

Can you provide a git repository that reproduces the issue?

[tmjoen]

Absolutely!

https://github.com/tmjoen/repro_gh11

[jsnanigans]

I am having the same issue, when I set corejs: false it works, but I would like to use corejs instead of Polyfill.io