Error when manually including vite/modulepreload-polyfill

[rynpsc]

Describe the bug

When manually including vite/modulepreload-polyfill as per backend integration an error is thrown in the browser when running vite serve.

Uncaught ReferenceError: __VITE_IS_MODERN__ is not defined
    <anonymous> http://localhost:3000/@id/vite/modulepreload-polyfill:43

I'm guessing because __VITE_IS_MODERN__ is replaced during build and during "normal" Vite usage the polyfill is only added to the output during build, but with a backend integration the polyfill is present during dev and build.

Reproduction

Issue can be replicated outside of a backend integration by:

1. Importing vite/modulepreload-polyfill into an entry file
2. Running vite serve, visiting the dev server and opening the browser dev tools

This yields the same result as I'm seeing with my backend setup.

https://github.com/rynpsc/vite-modulepreload-polyfill

System Info

System:
    OS: macOS 11.5.2
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Memory: 681.98 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
Binaries:
    Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
    npm: 7.5.2 - ~/.nvm/versions/node/v12.18.3/bin/npm
Browsers:
    Edge: 92.0.902.84
    Firefox: 91.0.1
    Safari: 14.1.2

Used Package Manager

npm

Logs

No response

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.

[yoshiotobe]

I've got the exactly same error when importing vite/modulepreload-polyfill with backend integration.

[andrefelipe]

Same here, any solutions appreciated

[jitingcn]

if (import.meta.env.MODE !== 'development') {
  import('vite/modulepreload-polyfill')
}

Here is my workaround.

[kaibyao]

Unfortunately in TypeScript, the workaround throws the error: Cannot find module 'vite/modulepreload-polyfill' or its corresponding type declarations.

My workaround was to copy the polyfill function at https://github.com/vitejs/vite/blob/cb75dbd4a2b1c56e2a7aeaf1625818a4d1865f00/packages/vite/src/node/plugins/modulePreloadPolyfill.ts and run it in its own file.

[gnuletik]

If you have eslint rule import/first and use typescript, here's how to ignore the workaround errors :

/* eslint-disable import/first */
if (import.meta.env.MODE !== 'development') {
  // @ts-expect-error
  import('vite/modulepreload-polyfill')
}

// other imports...

[jeromebon]

if (import.meta.env.MODE !== 'development') {
  import('vite/modulepreload-polyfill')
}

Here is my workaround.

How do you turn the dynamic into a static import?
With just this solution, the modulepreload-polyfill is always in it's own chunk.

For those who already changed manualChunks from it's default value then vite/modulepreload-polyfill can be added to manualChunks so that it behave as a static import. But it's not always practical.

[sadeghbarati]

@patak-dev

also if using @vitejs/plugin-legacy and use dynamic import instead of static import for this issue

it's will generate two chunk, modulepreload-polyfill-*******.js and modulepreload-polyfill-legacy.********.js

---

modulepreload-polyfill-legacy.********.js :

System.register([],(function(){"use strict";return{execute:function(){}}}));

---

modulepreload-polyfill-*******.js:

!function(){const e=document.createElement("link").relList;if(!(e&&e.supports&&e.supports("modulepreload"))){for(const e of document.querySelectorAll('link[rel="modulepreload"]'))r(e);new MutationObserver((e=>{for(const o of e)if("childList"===o.type)for(const e of o.addedNodes)"LINK"===e.tagName&&"modulepreload"===e.rel&&r(e)})).observe(document,{childList:!0,subtree:!0})}function r(e){if(e.ep)return;e.ep=!0;const r=function(e){const r={};return e.integrity&&(r.integrity=e.integrity),e.referrerpolicy&&(r.referrerPolicy=e.referrerpolicy),"use-credentials"===e.crossorigin?r.credentials="include":"anonymous"===e.crossorigin?r.credentials="omit":r.credentials="same-origin",r}(e);fetch(e.href,r)}}();

[gone]

If you are running tsc against this, the import() call will raise the error error TS2468: Cannot find global value 'Promise'.