Uncaught Error：@vitejs/plugin-react can't detect preamble. Something is wrong.

[qiufeihong2018]

Describe the bug

1. Create a front-end project using npm create vite@latest my-vite-react-ts-app -- --template react-ts.
2. After startup, an error is reported: Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong. See #11.

Reproduction

npm create vite@latest --template react-ts

Steps to reproduce

2. Run the following command to create a new Vite project:

npm create vite@latest my-vite-react-ts-app -- --template react-ts

3. Enter the project directory:

cd my-vite-react-ts-app

4. Install dependencies:

yarn

5. Start the development server:

yarn dev

After startup, an error is reported:

Later, it was found that the browser version is related.

There is an error with chrome 95.0.4638.69.

When switching to chrome version 112.0.5615.138 (official version) (64-bit), it can run normally.

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700
    Memory: 1.33 GB / 15.70 GB
  Binaries:
    Node: 18.20.4 - C:\Program Files\nodejs\node.EXE 
    Yarn: 1.22.22 - C:\Program Files\nodejs\yarn.CMD 
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD    
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (127.0.2651.86)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @vitejs/plugin-react: ^4.3.1 => 4.3.1
    vite: ^5.4.1 => 5.4.8

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.

[sapphi-red]

I guess you see the following error as well.

TypeError: Cannot read property 'forEach' of undefined

This error happens when you are using an old react devtools extension: facebook/react#25019

[ArnaudBarre]

Thanks for looking into it @sapphi-red!
We don't encourage looking such an old browser for dev anyway

[qiufeihong2018]

Thanks