Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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 #7586

Closed
7 tasks done
stevejay opened this issue Apr 2, 2022 · 2 comments · Fixed by #8676
Labels
bug Something isn't working

Comments

@stevejay
Copy link

stevejay commented Apr 2, 2022

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

@stevejay stevejay changed the title Specifying "jsxRuntime: classic" for a React vite app is not necessarily enough for "import React from 'react'" to be added to the source code 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 Apr 3, 2022
@sodatea sodatea added bug Something isn't working and removed pending triage labels Apr 26, 2022
@sharathprabhal
Copy link

sharathprabhal commented Jun 2, 2022

+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
Copy link

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants