Specifying "jsxRuntime: classic" for a React vite app is not enough for "import React from 'react'" to be added to the source code in production build

[stevejay]

Describe the bug

I have created a vite app using the react-ts template. This adds the @vitejs/plugin-react plugin to the vite.config.ts file. By default the automatic jsx runtime is used by the plugin but it is possible to specify the classic jsx runtime, like so:

export default defineConfig({
  plugins: [react({
    jsxRuntime: 'classic',
  })]
})

This should have the effect of adding import React from 'react'; to the start of any jsx/tsx file in the project, if it does not already import React. The file src/App.tsx does not import React but the import line does not get added to it when building the production version of the app (npm run build).

It is on this line in packages/plugin-react/src/index.ts that the import React from 'react'; line of code is added to the value of code if required.

However, in a production build of the app (npm run build), it is possible for the subsequent shouldSkip condition to evaluate as true and for the function to return without doing anything with the updated value of code.

It seems that, in a production build of the vite app, it is only by also specifying in the @vitejs/plugin-react a babel configuration file or a list of babel plugins to apply that this condition will evaluate to false and the updated code value will be used.

Reproduction

https://github.com/stevejay/vite-jsxruntime-classic-repro

System Info

System:
    OS: macOS 12.2.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 77.75 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.5.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
    Watchman: 2022.02.14.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 99.0.4844.84
    Edge: 100.0.1185.29
    Firefox: 98.0.1
    Safari: 15.3
  npmPackages:
    @vitejs/plugin-react: ^1.0.7 => 1.3.0
    vite: ^2.9.0 => 2.9.1

Used Package Manager

npm

Logs

Uncaught ReferenceError: React is not defined

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.

[sharathprabhal]

+1, running into the same issue. Specifically, this happens ONY during vite build with the default mode of production. The issue cannot be reproduced with something like vite build --mode staging

[iceniveth]

We also ran into this issue. We have React component files that doesn't have import React from 'react';

config is:

react({ jsxRuntime: 'classic' })

Works pretty well on development, but right after build it doesn't.

Browser console shows: ReferenceError: React is not defined