[vite:legacy-post-process] unknown: Missing semicolon

igorMondu commented 1 year ago

Describe the bug

After upgrading from Vite 3.2.7 to 4.4.9, I am unable to make a production build.

I use @vitejs/plugin-legacy in my project and it seems that the combination vitejs 4 + legacy plugin causes build to failed when optional chaining is used with env property.

  const getDownloadOrigin =
    import.meta.env?.REACT_APP_MERCHANT_ENVIRONMENT === 'development'
      ? import.meta.env?.REACT_APP_BNPL_API_BASE_URL
      : '';

Having the above code in the project will cause the production build to fail. This works perfectly fine with Vite 3.2.7.

If I remove optional chaining (?) after .env, vite 4 also works, so this is a bug in Vite v4.

And no, I can not remove chaining to resolve this issue. I use the same helper file in PlayWright, and it fails without optional chaining.

Reproduction

https://stackblitz.com/edit/vitejs-vite-qirgcx

Steps to reproduce

npm run build

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.20.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.6.10 - /usr/local/bin/pnpm
  npmPackages:
    @vitejs/plugin-legacy: ^4.1.1 => 4.1.1 
    @vitejs/plugin-react: ^4.0.4 => 4.0.4 
    vite: ^4.2.2 => 4.4.9

Used Package Manager

npm

Logs

vite v4.4.9 building for production...
✓ 34 modules transformed.
[vite:legacy-post-process] unknown: Missing semicolon. (509:13)

  507 | function App() {
  508 |   const [count, setCount] = reactExports.useState(0);
> 509 |   {"BASE_URL":"/","MODE":"production","DEV":false,"PROD":true,"SSR":false,"LEGACY":__VITE_IS_LEGACY__}?.REACT_APP_MERCHANT_ENVIRONMENT === "development" ? {"BASE_URL":"/","MODE":"production","DEV":false,"PROD":true,"SSR":false,"LEGACY":__VITE_IS_LEGACY__}?.REACT_APP_BNPL_API_BASE_URL : "";
      |              ^
  510 |   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
  511 |     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
  512 |       /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: "https://vitejs.dev", target: "_blank", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: viteLogo, className: "logo", alt: "Vite logo" }) }),
✓ built in 928ms
error during build:
SyntaxError: unknown: Missing semicolon. (509:13)

  507 | function App() {
  508 |   const [count, setCount] = reactExports.useState(0);
> 509 |   {"BASE_URL":"/","MODE":"production","DEV":false,"PROD":true,"SSR":false,"LEGACY":__VITE_IS_LEGACY__}?.REACT_APP_MERCHANT_ENVIRONMENT === "development" ? {"BASE_URL":"/","MODE":"production","DEV":false,"PROD":true,"SSR":false,"LEGACY":__VITE_IS_LEGACY__}?.REACT_APP_BNPL_API_BASE_URL : "";
      |              ^
  510 |   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
  511 |     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
  512 |       /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: "https://vitejs.dev", target: "_blank", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: viteLogo, className: "logo", alt: "Vite logo" }) }),
    at instantiate (file:///home/projects/vitejs-vite-qirgcx/node_modules/@babel/parser/lib/index.js:63:32)
    at constructor (file:///home/projects/vitejs-vite-qirgcx/node_modules/@babel/parser/lib/index.js:358:12)
    at Parser.raise (file:///home/projects/vitejs-vite-qirgcx/node_modules/@babel/parser/lib/index.js:3207:19)
    at Parser.semicolon (file:///home/projects/vitejs-vite-qirgcx/node_modules/@babel/parser/lib/index.js:3569:10)
    at Parser.parseExpressionStatement (file:///home/projects/vitejs-vite-qirgcx/node_modules/@babel/parser/lib/index.js:13108:10)
    at Parser.parseStatementContent (file:///home/projects/vitejs-vite-qirgcx/node_modules/@babel/parser/lib/index.js:12691:19)
    at Parser.parseStatementLike (file:///home/projects/vitejs-vite-qirgcx/node_modules/@babel/parser/lib/index.js:12538:17)
    at Parser.parseStatementListItem (file:///home/projects/vitejs-vite-qirgcx/node_modules/@babel/parser/lib/index.js:12518:17)
    at Parser.parseBlockOrModuleBlockBody (file:///home/projects/vitejs-vite-qirgcx/node_modules/@babel/parser/lib/index.js:13139:61)
    at Parser.parseBlockBody (file:///home/projects/vitejs-vite-qirgcx/node_modules/@babel/parser/lib/index.js:13132:10)

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] 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.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

stackblitz[bot] commented 1 year ago

Start a new pull request in StackBlitz Codeflow.

vitejs-vite-qirgcx (Open reproduction)

sapphi-red commented 1 year ago

It seems this happens if the value is not used: https://stackblitz.com/edit/vitejs-vite-sur928?file=main.js,package.json&terminal=dev

For a workaround, I guess you can use import.meta.env && import.meta.env.REACT_APP_MERCHANT_ENVIRONMENT === 'development' instead. https://stackblitz.com/edit/vitejs-vite-me95gs?file=src%2FApp.tsx

igorMondu commented 1 year ago

@sapphi-red This bug is more serious than it seemed. It completely breaks in the old browser even with vite legacy plugin. Wherever optional chaining is used, the whole application crashes in old browsers with the message:

Uncaught SyntaxError: Unexpected token ?

Can you put some higher priority on fixing this?

sapphi-red commented 1 year ago

@igorMondu I think that's a different issue. Please create a new issue with a reproduction.

sapphi-red commented 1 month ago

Closing as this seems to be working since somewhere around 5.0.0.

vitejs / vite