[Vite 3] Babel Bug

[brillout]

Describe the bug

It seems that, in some scenarios, the babel plugin is trying to parse TypeScript code even though it's not configured to be able to parse TypeScript. Which breaks both dev and build.

The same code does work with Vite 2.

This is a blocker for building Vike Frameworks. (And, AFAICT there is no workaround for this bug, but I could be wrong.)

The bug reproduction is minimal but uses VikePress; let me know if you want more minimal reproduction that doesn't use VikePress.

This is the last bug for making Vite 3 + vite-plugin-ssr green again 🎉.

(I'm curious what the reason is for using Babel since esbuild supports JSX.)

Reproduction

https://github.com/brillout/vite-3-babel-bug

System Info

System:
    OS: Linux 5.10 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (2) x64 Intel(R) Celeron(R) N4020 CPU @ 1.10GHz
    Memory: 570.86 MB / 2.71 GB
    Container: Yes
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 18.0.0 - ~/.config/nvm/versions/node/v18.0.0/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.6.0 - ~/.config/nvm/versions/node/v18.0.0/bin/npm
  Browsers:
    Firefox: 97.0.1
  npmPackages:
    vite: ^2.8.4 => 3.0.0-beta.5

Used Package Manager

pnpm

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]

It works with Vite 2.9.13+ plugin-react v2.0.0-alpha.2
It does not work with Vite 2.9.13/3.0.0-beta.3 + plugin-react v2.0.0-alpha.3.

I feel #5313 is affecting this.
Would it work if jsxRuntime: 'classic' is set?

(I'm curious what the reason is for using Babel since esbuild supports JSX.)

AFAIK it is because fast-refresh and automatic runtime is not supported by esbuild.

[brillout]

Would it work if jsxRuntime: 'classic' is set?

That fixes the error and makes the client-side build work, but the server-side build fails with:

vite v3.0.0-beta.5 building SSR bundle for production...
✓ 56 modules transformed.
'escapeInject' is not exported by node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-ssr/dist/cjs/node/index.js, imported by node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/vikepress/src/algolia/DocSearch.ts
file: /home/romuuu/tmp/vite-3-babel-bug/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/vikepress/src/algolia/DocSearch.ts:1:0
1: import { escapeInject } from 'vite-plugin-ssr'
   ^
2: import { PageContextResolved } from '../config/resolvePageContext'
file:///home/romuuu/tmp/vite-3-babel-bug/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:1858
        base = Object.assign(new Error(base.message), base);
                             ^

Error: 'escapeInject' is not exported by node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-ssr/dist/cjs/node/index.js, imported by node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/vikepress/src/algolia/DocSearch.ts

You can reproduce by setting react({ jsxRuntime: 'classic'}) at vite-3-babel-bug/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/vikepress/vite.config.ts.

Shall I open a new bug report for this?

[sapphi-red]

@brillout Yes, I guess there is a different bug. Would you create it?

[brillout]

Done: #8880. Let me know if there is anything I can do to help.

[brillout]

In case you are wondering why vikepress includes .ts, .css, and .svg files: that's because Node.js cannot handle import './someStyles.css' nor import emojiUrl from './someEmoji.svg', which means that vikepress cannot be externalized. That's why vikepress publishes its source files to npm.

[brillout]

This bug also happens with 3.0.0-beta.7. The reproduction is updated and now uses 3.0.0-beta.7.

[brillout]

Fixed in beta.9 🎉