Uncaught SyntaxError: Unexpected token ?

[igorMondu]

Describe the bug

After upgrading from Vite 3.2.7 to 4.4.9, my production build is not working in old browsers, despite using vite legacy plugin. Reverting back to 3.2.7 fixes the issue, so the bug is somewhere in Vite v4.

The error I get when I try to load an app in Chrome 69 for example results in this error:

Uncaught SyntaxError: Unexpected token ?

Reproduction

https://github.com/paradox37/monorepo/tree/vite-legacy-bug

Steps to reproduce

1. Run yarn install
2. Run yarn build
3. Run yarn preview
4. Open the app in some old browser like Chrome 69 and observe DevTools Console

System Info

System:
    OS: macOS 13.2.1
    CPU: (8) arm64 Apple M1
    Memory: 110.33 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.0/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Chrome: 116.0.5845.96
    Firefox: 116.0.3
    Firefox Developer Edition: 104.0
    Safari: 16.3

Used Package Manager

yarn

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 vuejs/core 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.

[sapphi-red]

This is by design, support for legacy browsers is a build-only feature. During dev mode, Vite doesn't transpile files.

[igorMondu]

@sapphi-red Please re-open this. The build is not working in legacy browsers. I created a build and used vite preview to start it, then I opened it in Chrome 69 and got the error from the title, app crashed. And, if I downgrade to 3.2.7, it works. I see I wrote the wrong reproduction steps, I edited it.

[sapphi-red]

Your browserslist doesn't contain Chrome 69. So it's expected.
https://github.com/paradox37/monorepo/blob/d4c89ce64dbd7055b205e353195f64a85994e119/packages/project1/package.json#L29-L33
https://browsersl.ist/#q=%3E0.2%25%2C+not+dead%2C+not+op_mini+all

plugin-legacy 3.x didn't respect browserslist and it was fixed since 4.0.0.
https://github.com/vitejs/vite/blob/main/packages/plugin-legacy/CHANGELOG.md#:~:text=feat(legacy)!%3A%20bump,closes%20%2311318

[igorMondu]

@sapphi-red Thanks. But, that alone didn't help. I had to configure the plugin like this:

legacy({
  modernPolyfills: true,
  renderLegacyChunks: true,
})

For browser list, I put "supports es6-module".

I am wondering why I had to specify renderLegacyChunks: true. The documentation says for modernPolyfills: Enabling this option will generate a separate polyfills chunk for the modern build (targeting browsers with [native ESM support](https://caniuse.com/es6-module)).

Chrome 69 supports es6 modules, so I assumed I don't need to render legacy chunks.

[sapphi-red]

I see. That part of the document was incorrect: #14233