Weird parsing error in build when using import.meta.env inside string

[leonbloy]

Describe the bug

A cryptic parser error is thrown by vite build, apparenttly when a static string inside jsx includes the string literal "import.meta.env"

Steps:
Create a clean react app with

npm create vite@latest my-vue-app -- --template react
cd my-vue-app
npm install

Then overwrite src/App.jsx with this content:

import React from 'react';

function App() {
	console.log('import.meta.env.MODE', import.meta.env.MODE);
	return (
		<div>hi</div>	
	);
};

export default App;

Then
> npm run dev
works as expected (and prints to console: import.meta.env.MODE development ) but
> npm run build
gives error:

> my-vue-app@0.0.0 build
> vite build

vite v2.9.5 building for production...
✓ 11 modules transformed.
[rollup-plugin-dynamic-import-variables] Unexpected token (4:16)
file: C:/temp/my-vue-app/src/App.jsx:4:16
error during build:
SyntaxError: Unexpected token (4:16)
    at Parser.pp$4.raise (C:\temp\my-vue-app\node_modules\rollup\dist\shared\rollup.js:19680:13)
    at Parser.pp$9.unexpected (C:\temp\my-vue-app\node_modules\rollup\dist\shared\rollup.js:16976:8)
    at Parser.pp$9.expect (C:\temp\my-vue-app\node_modules\rollup\dist\shared\rollup.js:16970:26)
    at Parser.pp$5.parseExprList (C:\temp\my-vue-app\node_modules\rollup\dist\shared\rollup.js:19547:12)
    at Parser.pp$5.parseSubscript (C:\temp\my-vue-app\node_modules\rollup\dist\shared\rollup.js:18909:25)
    at Parser.pp$5.parseSubscripts (C:\temp\my-vue-app\node_modules\rollup\dist\shared\rollup.js:18866:24)
    at Parser.pp$5.parseExprSubscripts (C:\temp\my-vue-app\node_modules\rollup\dist\shared\rollup.js:18850:21)
    at Parser.pp$5.parseMaybeUnary (C:\temp\my-vue-app\node_modules\rollup\dist\shared\rollup.js:18813:17)
    at Parser.pp$5.parseExprOps (C:\temp\my-vue-app\node_modules\rollup\dist\shared\rollup.js:18740:19)
    at Parser.pp$5.parseMaybeConditional (C:\temp\my-vue-app\node_modules\rollup\dist\shared\rollup.js:18723:19)

The problem seems to be the import.meta.env inside the string. If I change the line to
console.log('impArt.meta.env.MODE', import.meta.env.MODE);
it works.

Reproduction

https://stackblitz.com/edit/vitejs-vite-g2q1j9?file=src/App.jsx

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (6) x64 Intel(R) Core(TM) i5-9400 CPU @ 2.90GHz
    Memory: 8.29 GB / 15.87 GB
  Binaries:
    Node: 16.14.0 - ~\scoop\apps\nvm\current\nodejs\nodejs\node.EXE
    npm: 8.3.1 - ~\scoop\apps\nvm\current\nodejs\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (100.0.1185.44)

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

[bluwy]

Duplicate of #3304. Vite replaces the env vars with regex, so a workaround for now is to do something like 'import.meta\0.env.MODE'.