caught the following error during render TypeError: Zt.jsxDEV is not a function (I am not sure it is the vite issue)

[jiangxiaoqiang]

Describe the bug

recently I switch the build tool from webpack to vite, today I facing a problem caught the following error during render TypeError: Zt.jsxDEV is not a function

Reproduction

https://stackoverflow.com/questions/76203107/caught-the-following-error-during-render-typeerror-zt-jsxdev-is-not-a-function

Steps to reproduce

1. create a demo app: npm create vite@latest demo-web -- --template react-ts
2. replace the package.json
3. replace the main.tsx
4. rum pnpm install
5. run pnpm run dev command

System Info

System:
    OS: macOS 13.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 536.33 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 112.0.5615.137
    Firefox: 112.0.2
    Safari: 16.4
  npmPackages:
    @vitejs/plugin-react: ^4.0.0 => 4.0.0
    vite: ^4.3.2 => 4.3.2

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]

I guess it's because rd-component seems to use jsxDev and you are setting NODE_ENV=production. When NODE_ENV=production is set, I guess jsxDev doesn't exist.

[MingSern]

So what is the solution to this?

[bc2009]

Thanks for this discussion. I had similar issue. I was using @vitejs/plugin-react-swc to build a library (my React version is 18.2.0). So enforcing both to production fixed this jsxDev issue for me:

NODE_ENV=production vite build --mode production