Skip to content

Setting build mode to "development" breaks React JSX transform #5885

@morhekil

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions