Bundle requests twice in Firefox 93 with default polyfillModulePreload enabled

[imShara]

Describe the bug

I have found that default vite build makes bundle request twice in firefox.

When I switch off build.polyfillModulePreload: false it makes only one request. Why this happens? Vite docs says that polyfill need for firefox and safari, Can I Use says that modulepreload not supported in Firefox. Is this proper polyfill work?

There is no problem in Chrome or Safari

Reproduction

pnpm create vite test
> vue
> vue-ts
cd test
pnpm install
pnpm  build
pnpm serve

Open http://127.0.0.1:5000/ in Firefox 93.0 (64-bit)
Check dev tools F12 -> Network ->Reload

System Info

System:
    OS: Linux 5.14 Arch Linux
    CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
    Memory: 19.28 GB / 27.27 GB
    Container: Yes
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.11.1 - /usr/bin/node
    Yarn: 1.22.17 - /usr/bin/yarn
    npm: 8.1.2 - /usr/bin/npm
  Browsers:
    Firefox: 93.0

Used Package Manager

pnpm

Logs

▶ pnpm vite build --debug
  vite:config bundled config file loaded in 89.20ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'alias',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-script-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:vue',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:build-import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:reporter',
  vite:config     'vite:load-fallback'
  vite:config   ],
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     cssTarget: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
  vite:config   },
  vite:config   define: { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false },
  vite:config   ssr: { external: [ 'vue', '@vue/server-renderer' ] },
  vite:config   configFile: '/home/user/test/vite.config.ts',
  vite:config   configFileDependencies: [ 'vite.config.ts' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     build: {}
  vite:config   },
  vite:config   root: '/home/user/test',
  vite:config   base: '/',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object], [Object] ] },
  vite:config   publicDir: '/home/user/test/public',
  vite:config   cacheDir: '/home/user/test/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isProduction: true,
  vite:config   server: { fs: { strict: undefined, allow: [Array] } },
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: {
  vite:config     esbuildOptions: { keepNames: undefined, preserveSymlinks: undefined }
  vite:config   }
  vite:config } +6ms
vite v2.6.13 building for production...
✓ 14 modules transformed.
dist/assets/logo.03d6d6da.png    6.69 KiB
dist/index.html                  0.48 KiB
dist/assets/index.e40264f2.js    1.95 KiB / gzip: 1.03 KiB
dist/assets/index.459f8680.css   0.34 KiB / gzip: 0.24 KiB
dist/assets/vendor.dac2b406.js   49.61 KiB / gzip: 19.93 KiB

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[SergeiMinaev]

The same here. It looks like this polyfill doesn't work in Firefox.

[imShara]

Actually, it looks like polyfill works AND native import works too. I can see no problems when polyfill disabled.

It's wrong, see below.

[imShara]

Okay, I have made minimal reproducible example of polyfill used in vite and confirm that it makes two requests by design.

First, dummy, request makes polyfill with fetch(link) function, which used to cache resource.
Second request makes import from link when module loads at first time in application runtime.

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="modulepreload" href="module.mjs">
</head>

<body>
  Hello

  <script>
    function processPreload(link) {
      const fetchOpts = {};
      if (link.integrity)
        fetchOpts.integrity = link.integrity;
      if (link.referrerpolicy)
        fetchOpts.referrerPolicy = link.referrerpolicy;
      if (link.crossorigin === 'use-credentials')
        fetchOpts.credentials = 'include';
      else if (link.crossorigin === 'anonymous')
        fetchOpts.credentials = 'omit';
      else
        fetchOpts.credentials = 'same-origin';

      fetch(link.href, fetchOpts).then(res => res.ok && res.arrayBuffer());
    }

    for (const link of document.querySelectorAll('link[rel=modulepreload]')) {
      processPreload(link);
    }
  </script>

  <script type="module">
    import { test } from './module.mjs';
    test('yay');
  </script>
</body>

</html>

module.mjs

export function test(message) {
  alert(message)
}

access.log

"GET / HTTP/2.0" 200 919 "-" "Mozilla/5.0 (X11; Linux x86_64; rv:94.0) Gecko/20100101 Firefox/94.0"
"GET /module.mjs HTTP/2.0" 200 50 "https://modulepreload.local/" "Mozilla/5.0 (X11; Linux x86_64; rv:94.0) Gecko/20100101 Firefox/94.0"
"GET /module.mjs HTTP/2.0" 200 50 "https://modulepreload.local/" "Mozilla/5.0 (X11; Linux x86_64; rv:94.0) Gecko/20100101 Firefox/94.0"
"GET /favicon.ico HTTP/2.0" 404 153 "https://modulepreload.local/" "Mozilla/5.0 (X11; Linux x86_64; rv:94.0) Gecko/20100101 Firefox/94.0"

I think it's can't be fixed. Any suggestions?

[kunKun-tx]

Can confirm this issue also occurs on Firefox 95.0.2. It's a simple React project using Vite and Firefox is downloading all non index.js assets twice.

[Kadeluxe]

So what is the workaround for that?
I created empty Vue project using pnpm create vite, did cd project && pnpm build and it indeed makes double requests for all js files except index.js in Firefox 95.0.2.
It does double requests even if I use build.polyfillModulePreload: false. What's the deal?

Edit: actually if I turn off build.polyfillModulePreload: false then it only does double requests for dynamically imported modules because it generates the following code:

function __variableDynamicImportRuntime0__(path) {
  switch (path) {
    case "../../pages/overview.vue":
      return __vitePreload(() => import("./overview.85cf6486.js"), true ? ["assets/overview.85cf6486.js","assets/vendor.0dbf3cec.js"] : void 0);
    default:
      return new Promise(function(resolve, reject) {
        (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(reject.bind(null, new Error("Unknown variable dynamic import: " + path)));
      });
  }
}

Notice how module has dependency on itself. That's why it would load twice, first by doing dependency loading and then by doing browser import.

[Zsapi]

I've just noticed this myself, and although it is not causing any measurable harm in my case, it is really messing with me. Vite version 2.8.4, Firefox 97.0.1. I'm using Vue, and the vendor js file is downloaded twice.

[sutarmin]

Same for me, vendor.js is loaded twice and that bothers me a lot!

[fahidmohammad]

Any update on this issue?
not only bundle, but every file is loading twice.

[sapphi-red]

I think this is because maxAge is not set here.

vite/packages/vite/src/node/preview.ts

Line 93 in 9a93233

dev: true,

If there is no Cache-Control header, browser needs to revalidate the response.