Setting build mode to "development" breaks React JSX transform

[morhekil]

Describe the bug

If "mode": "development" is specified in vite.config.js, and the project uses React JSX - then this results in a broken build, which displays in the console the following error when it first encounters a JSX tag:

jsxDevRuntime.exports.jsxDEV is not a function

jsxDevRuntime.exports at that point do indeed have jsxDEV value set to undefined. Looks like some part of the transform is not being set to development mode in this case, and doesn't produce jsxDEV data.

This seems similar to vercel/next.js#19001, but setting NODE_ENV environment variable to development did not resolve the issue here.

This problem has also been brought up in discussion #5803, and it makes it impossible to debug or find the culprit of broken production builds described in #2139.

Is there any workaround to get development-mode build working, however hacky it might be?

Reproduction

https://github.com/morhekil/vite-bug-example

This is just a trimmed down standard initial Vite repo

System Info

System:
    OS: macOS 11.6
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Memory: 163.62 MB / 32.00 GB
    Shell: 5.8 - /usr/local/bin/zsh
  Binaries:
    Node: 12.22.1 - /usr/local/opt/node@12/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.12 - /usr/local/opt/node@12/bin/npm
  Browsers:
    Chrome: 96.0.4664.55
    Firefox: 94.0.2
    Safari: 15.0
  npmPackages:
    @vitejs/plugin-react: ^1.0.0 => 1.1.0
    vite: ^2.6.4 => 2.6.14

Used Package Manager

yarn

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

[TJBlackman]

I also get this error any time I run the build command in ANY mode other than production. To check, I just run the build step, then view the outDir/assets/index.[hash].js and run a ctrl+f for jsxDEV. In production mode, 0 references, but with any other mode defined, there's dozens and dozens of references to jsxDEV.

Vite versions from package.json:

• "@vitejs/plugin-react": "^1.1.1"
• "vite": "^2.7.1"

[sledorze]

Same here, this is stacking atop other problems preventing production deployments..

[jochumdev]

Found a workaround for that:

  plugins: [
    process.env.MODE !== 'production' ? react({
      jsxRuntime: 'classic',
    }) : react(),
    svgLoader(),
  ],

NODE_ENV=development MODE=development yarn run vite build

[floydding]

run into the same issue here. the above workaround does work tho.

[schmidtc63]

@pcdummy 's fix worked for me.
Thank you

[bluwy]

This seems to be fix in the latest plugin-react version, indirectly through #8280, though it introduces a regression at #8468, so I won't close this just yet. Both issues are conflicting and I'm trying to figure out a balance point.