"ReferenceError: Can't find variable: globalThis" @vitejs/plugin-legacy in Safari 11

[ptim]

Describe the bug

Hi! I'm trying to build a simple react-ts app which consumes @chakra-ui/react for legacy browsers, and in testing Safari 11 I'm getting a blank page and the console error:

ReferenceError: Can't find variable: globalThis

Because Safari 11 supports modules, it gets the module bundle, no polyfills. If I hack dist/index.html to remove the <script modules .../> completely (and the nomodules sttr on legacy bundles) and have it load the legacy bundles, then page renders fine in Safari 11.

Is there a way of causing Safari 11 to use legacy bundles? Tx!

Reproduction

https://stackblitz.com/edit/vitejs-vite-9grdsk?file=vite.config.js,src%2Fmain.jsx,src%2FApp.jsx&terminal=dev

Steps to reproduce

• configure @vitejs/plugin-legacy for Safari >= 10
• npm run build && npm run preview -- --host
• checked localhost:4173 in Safari 11 in browserstack (don't know if you can load stackblitz this way - believe you need to run locally with browserstack local installed)
• I see a blank page and the console error:

  "ReferenceError: Can't find variable: globalThis".

// vite.config.js
export default defineConfig({
  plugins: [
    react(),
    legacy({
      targets: ["defaults", "safari >= 10", "not IE 11"],
    }),
  ],
});

System Info

System:
    OS: macOS 13.0.1
    CPU: (10) x64 Apple M1 Pro
    Memory: 64.05 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/Library/Caches/fnm_multishells/56743_1673306339588/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.3 - /opt/homebrew/bin/npm
  Browsers:
    Brave Browser: 108.1.46.153
    Firefox: 108.0.2
    Safari: 16.1
  npmPackages:
    @vitejs/plugin-legacy: ^3.0.1 => 3.0.1 
    @vitejs/plugin-react: ^3.0.0 => 3.0.1 
    vite: ^4.0.0 => 4.0.4

Used Package Manager

npm

Logs

ReferenceError: Can't find variable: globalThis

Sorry - can't copy text out of the browserstack console! (note that the error is raise in the module bundle)

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]

I think you mean Safari 11.1 and not Safari 11, as the url to browserstack is linked to Safari 11.1.

Is there a way of causing Safari 11 to use legacy bundles?

Safari 11 will use legacy bundles and there aren't a way to make Safari 11.1 to use legacy bundles.(#6922)

The current intended way is to use modernPolyfills option.
https://github.com/vitejs/vite/tree/main/packages/plugin-legacy#modernpolyfills

[ptim]

The current intended way is to use modernPolyfills option.

Thanks very much - es.global-this solves my issue! Will watch 6922 for other edge cases 🙏

import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
    legacy({
      modernPolyfills: [
        // Safari 11 has modules, but throws > ReferenceError: Can't find variable: globalThis
        "es.global-this",
      ],
    }),
  ],
}