Vite dev server is unable to import @babel/standalone

[Mad-Kat]

Describe the bug

I want to run @babel/standalone in the browser. When I tried it in dev mode, the error is always Uncaught TypeError: babel is undefined. When I build it @babel/standalone is correctly bundled into the application and everything works great.

My assumption would be that this should also work in dev mode.

Note: This happens with the latest vite@5.2.9 and latest @babel/standalone@7.24.4

Reproduction

https://github.com/Mad-Kat/vite-dev-babel-reproduction/tree/main

Steps to reproduce

1. Clone this repository
2. Run npm install
3. Run npm run dev
4. Open the browser console and you will see the following error:

Uncaught TypeError: babel is undefined
    setCounter counter.js:6
    setupCounter counter.js:11

System Info

System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 5.99 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v20.11.0/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
    pnpm: 8.15.7 - /opt/homebrew/bin/pnpm
    bun: 1.1.0 - ~/.bun/bin/bun
    Watchman: 2024.04.08.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 123.1.64.116
    Chrome: 123.0.6312.123
    Safari: 17.4.1
  npmPackages:
    vite: ^5.2.0 => 5.2.9

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 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]

A workaround is to use import * as babel from '@babel/standalone'.