Chunks reporting a preload link warning in Firefox

[johnpangalos]

Describe the bug

When using lazy loading assets, we are getting this warning when running in Firefox:

The resource at “<CHUNK URL>” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

Reproduction

Reproduction repo: https://github.com/JohnPangalos/vite-preload-firefox-error

Reproduction steps:

• From Repo run these commands to get a local production development server running:

npm i
npm run build
npm run serve

• Open Firefox to http://localhost:5000 and click the About link to go the About page.
• Open the javascript console.
• Wait for about a minute
• You should see the above warning show up.

System Info

System:
    OS: macOS 11.4
    CPU: (8) arm64 Apple M1
    Memory: 105.33 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.2.0 - /var/folders/gj/38htw22s6zj_nw81r9647xg80000gn/T/fnm_multishells/99920_1625049615026/bin/node
    Yarn: 1.22.10 - /opt/homebrew/bin/yarn
    npm: 7.13.0 - /var/folders/gj/38htw22s6zj_nw81r9647xg80000gn/T/fnm_multishells/99920_1625049615026/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Firefox: 89.0.2
    Safari: 14.1.1
  npmPackages:
    vite: ^2.3.8 => 2.3.8

Used Package Manager

npm

Logs

# command: vite preview --debug
',
  vite:config     'react-refresh',
  vite:config     'vite:dynamic-import-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  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:define',
  vite:config     'vite:css-post',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillDynamicImport: false,
  vite:config     outDir: 'build',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: true,
  vite:config     rollupOptions: { external: [], output: [Object] },
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     cleanCssOptions: {},
  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     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null
  vite:config   },
  vite:config   server: {
  vite:config     open: undefined,
  vite:config     fsServe: {
  vite:config       root: '/Users/johnpangalos/repos/preload-firefox-error',
  vite:config       strict: false
  vite:config     }
  vite:config   },
  vite:config   configFile: '/Users/johnpangalos/repos/preload-firefox-error/vite.config.ts',
  vite:config   configFileDependencies: [ 'vite.config.ts' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     server: { open: undefined, fsServe: [Object] }
  vite:config   },
  vite:config   root: '/Users/johnpangalos/repos/preload-firefox-error',
  vite:config   base: '/',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object] ] },
  vite:config   publicDir: '/Users/johnpangalos/repos/preload-firefox-error/public',
  vite:config   cacheDir: '/Users/johnpangalos/repos/preload-firefox-error/node_modules/.vite',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   isProduction: false,
  vite:config   env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
  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   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: { esbuildOptions: { keepNames: undefined } }
  vite:config } +2ms

### Validations

- [X] Follow our [Code of Conduct](https://github.com/vitejs/vite/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/vitejs/vite/blob/main/.github/contributing.md).
- [X] Read the [docs](https://vitejs.dev/guide).
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] 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.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vitejs/vite/discussions) or join our [Discord Chat Server](https://chat.vitejs.dev/).

[johnpangalos]

It seems like that this is a firefox specific bug or it might be that it's a bug with any browser that doesn't support the real type of modulepreload.

Seems like this is the code that "causes" this bug along when the link rel is added for script files.

I can look a little more into this, though it seems to go away when instead of preload I default to prefetch prefetch.

MDN Links:
Prefetch
Preload
Modulepreload

[johnpangalos]

Prefetch might not be the right rep link either actually. I'm not sure what the right way to do this for Firefox, and potentially Safari...

[johnpangalos]

Something else I noticed is that the module is being downloaded twice in Firefox

[johnpangalos]

It seems like there is a bug ticket in Firefox for this.

[patak-dev]

Thanks for digging into this @johnpangalos, would you try to yarn link vite with feat: modulepreload polyfill #4058?
We are going to polyfill modulepreload for safari and firefox, and this may have an effect on the warning you are reporting.

[patak-dev]

I tested and #4058 should solve this issue 👍🏼

[johnpangalos]

Wow, that was quick! Let me know if you need anything else. Thanks again!