@vitejs/plugin-react: Error when indenting React import and jsxRuntime classic

[Janpot]

Describe the bug

When using classic jsx runtime and one react import has been indented by a few spaces, the plugin tries to inject another react import resulting in it being imported twice. It seems like the plugin doesn't detect that the import is already in the file when it has uncommon whitespace.

Reproduction

https://stackblitz.com/edit/vitejs-vite-6yoff2?file=src%2FApp.tsx&terminal=dev

Steps to reproduce

1. Configure @vitejs/plugin-react with jsxRuntime 'classic'
2. In component indent the react import
3. try to load the page

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @vitejs/plugin-react: ^4.0.0-beta.0 => 4.0.0-beta.1 
    vite: ^4.3.0-beta.2 => 4.3.0-beta.7

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 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.

[bolt-new-by-stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-6yoff2 (Open reproduction)

[ArnaudBarre]

Hello thanks for the repro. This should be easy to fix.
Any reason you're not using automatic runtime?

[Janpot]

Any reason you're not using automatic runtime?

I had issues with the automatic runtime while working on mui/toolpad#1881 and the docs advised to use classic in case of trouble. classic worked immediately and I moved on. I haven't had the bandwidth yet to dig deep into it. It seems to happen when NODE_ENV=test. I'll see if I can make a reproduction soon.

It's a bit of an annoyance that vite relies so much on the NODE_ENV variable, I wish I could override that behavior from the javascript API and have it ignore the environment completely. I have use cases where I'd like to run vite in development and in production side-by-side in the same process. As well as where I want to build a certain way regardless of what the NODE_ENV looks like.

[ArnaudBarre]

React core entry points relies on this NODE_ENV references that need to be replace otherwise this will crash in the browser.

Running both React in dev and in prod in the same process feels a very edge case need.

[Janpot]

React core entry points relies on this NODE_ENV references that need to be replace otherwise this will crash in the browser.

Absolutely, I'm pro replacing process.env.NODE_ENV with "development" or "production" 🙂 . I just would like my code to be fully in control of it when I use vite through the JS API, instead of it implicitly being picked up from the environment.