Describe the bug

I am running vite build --mode development , and I am getting the production build of React with minified errors.

I need to get real errors because of this significant long-lived issue: vitejs/vite#2139

Being able to use the dev build of react would give me some way of trying to progress this, open helpful issues in third-party libraries, tec.

I've tried build: { minify: false, sourcemap: "inline" } in the main vite config along with mode: "development".

I still get an error message like this:

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

So I know that the long-lived issue referenced above is the cause of the actual error. This issue is that I can't get to the "non minified dev environment".

Reproduction

https://stackblitz.com/edit/vitejs-vite-x4q1rv?file=vite.config.ts

Steps to reproduce

npx vite build --mode development --minify false --sourcemap true

React is using the minified production build which removes errors.

System Info

Windows & chrome

Used Package Manager

npm

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

Describe the bug

Currently, fast refresh is working for a file only if either

• the file extension ends with an "x" (e.g. "jsx", "tsx") or
• the code in the file imports React in some way

Now when using a compile-to-JS language like ReScript with the new JSX runtime enabled, one can get .js or .mjs files with imports from "react/jsx-runtime" or "react/jsx-dev-runtime", but no React import, and fast refresh will not work for these files.

Reproduction

https://github.com/cknitt/vite-plugin-react-fast-refresh-issue

Steps to reproduce

1. Install dependencies and start vite:

npm i
npm run dev

2. Increment counter
3. Change the text in TestComponent.bs.js (alternatively change it in TestComponent.res and run npm run res:build to recompile). Observe that the counter value is reset to 0.

Workaround

1. Run npx patch-package to apply the patch from patches/@vitejs+plugin-react+3.0.1.patch.
2. Restart vite and repeat the above test steps.
3. Observe that TestComponent now refreshs correctly and the counter value remains unchanged.

System Info

System:
    OS: macOS 13.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 893.44 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.1 - ~/Library/Caches/fnm_multishells/60384_1673351682301/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.15.0 - ~/Library/Caches/fnm_multishells/60384_1673351682301/bin/npm
    Watchman: 2023.01.02.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 108.1.46.153
    Firefox: 107.0.1
    Safari: 16.2
  npmPackages:
    @vitejs/plugin-react: ^3.0.1 => 3.0.1
    vite: ^4.0.4 => 4.0.4

Used Package Manager

npm

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

Description

I am currently using mdx with react. I use @mdx-js/rollup transform .mdx files into React components.
But neither @mdx-js/rollup or @vitejs/plugin-react is doing react-refresh transform to the .mdx files (.i.e .mdx files are not self-accepting). Editing .mdx file during dev results in full reload if it not imported by a hmr boundary (.e.g imported by a .jsx file which is made self-accepting by @vitejs/plugin-react).

@vitejs/plugin-react options like exclude and include don't work.

Here is a example:
https://stackblitz.com/edit/vitejs-vite-ucnnpy?file=vite.config.ts,src%2Fdemo.mdx,src%2Fmain.tsx,src%2FWrapper.tsx,src%2Fvite-env.d.ts&terminal=dev

Can @vitejs/plugin-react provide a way to transform @mdx-js/rollup’s output?

Suggested solution

@vitejs/plugin-react should be able to handle other plugin's output.

This line should be adjustable by option so that .mdx can pass this check

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Description

I am using @vitejs/plugin-react with the jsxImportSource option to automatically apply the @emotion/react jsx transform.

It seems that currently the vite-react plugin attempts to transform dependencies that use the classic runtime to use the automatic runtime and adds an import to the supplied jsxImportSource (ie. import ... from '@emotion/react/jsx-runtime) into those dependencies.

In my project, there is a dependency that is being transformed to use the automatic runtime but it does not have access to import from @emotion/react due to the node modules directory structure (I'm using pnpm which is stricter on dependency access). Because of this, I get a build error:

Error: [vite]: Rollup failed to resolve import "@emotion/react/jsx-runtime" from "...(path to dependency)".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

It also seems to do this regardless of the include/exclude filter options that can be passed to the plugin.

Suggested solution

This could be fixed if there was a way to disable the behaviour of upgrading the classic jsx runtime to the automatic jsx runtime in dependencies. Probably via some option in the vite-react plugin ({ upgradeJsxRuntimeInDependencies: false } or similar).

It might be nice to also mention that the plugin does this in the readme for the plugin as it does affect dependency code that you might not otherwise expect to be targeted by the plugin, even when you specify a filter.

Alternative

No response

Additional context

Code in the react plugin that transforms dependencies:

https://github.com/vitejs/vite/blob/0cbb33bade1b10c1503f47f8f8ed6e3b39818066/packages/plugin-react/src/index.ts#L219-L233

Note I was able to get my code to compile by manually editing the plugin and replacing line 227-230 with const [restoredAst, isCommonJS] = [null, false], avoiding restoreJSX altogether.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Describe the bug

Use yarn vite create with React and Typescript
At App.tsx's top-level, type random letters, then error occurs:

Then remove these invalid variables, but hmr not works. No auto refresh or error messages anymore, just frozen.
I have to refresh page manually to make it works again.
There is no problem in the vite-plugin-react-swc. (but debugging seems not work in vite-plugin-react-swc, I have to use vite-plugin-react )

Reproduction

yarn create vite (with React and Typescript)

Steps to reproduce

1. yarn create vite with React and Typescript
2. yarn dev
3. type any letter at the top-level of App.tsx
4. save file

Now hmr not works any more until manually refreshing the page.

System Info

System:
    OS: Windows 10 10.0.22623
    CPU: (16) x64 AMD Ryzen 7 4800H with Radeon Graphics
    Memory: 7.22 GB / 31.87 GB
  Binaries:
    Node: 18.12.1 - ~\AppData\Local\Temp\xfs-3a75f462\node.CMD
    Yarn: 3.3.0 - ~\AppData\Local\Temp\xfs-3a75f462\yarn.CMD
    npm: 7.24.1 - D:\Documents\....\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1037.0), Chromium (108.0.1462.54)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @vitejs/plugin-react: ^3.0.0 => 3.0.0
    vite: ^4.0.0 => 4.0.2

Used Package Manager

yarn

Logs

vite:hmr [file change] src/App.tsx +8s
2:15:43 [vite] hmr update /src/App.tsx
  vite:load 0.59ms [fs] /src/App.tsx +8s
  vite:import-analysis /node_modules/.vite/deps/react.js?v=4fd75b4d needs interop +8s
  vite:hmr [self-accepts] src\App.tsx +27ms
  vite:import-analysis 7.79ms [5 imports rewritten] src\App.tsx +7ms
  vite:transform 20.08ms /src/App.tsx +8s
  vite:cache [memory] /@react-refresh +8s
  vite:cache [memory] /node_modules/.vite/deps/react.js?v=4fd75b4d +1ms
  vite:cache [memory] /src/assets/react.svg +0ms
  vite:cache [memory] /src/App.css +0ms
  vite:cache [memory] react/jsx-dev-runtime +0ms
  vite:time 26.71ms /src/App.tsx +6s
2:15:43 [vite] hmr invalidate /src/App.tsx
2:15:43 [vite] page reload src/App.tsx
  vite:html-fallback Rewriting GET / to /index.html +7s
  vite:time 3.85ms /index.html +20ms
  vite:cache [304] /@vite/client +6s
  vite:time 1.26ms /@vite/client +16ms
  vite:load 0.35ms [fs] /src/main.tsx +106ms
  vite:import-analysis /node_modules/.vite/deps/react.js?v=4fd75b4d needs interop +94ms
  vite:import-analysis /node_modules/.vite/deps/react-dom_client.js?v=9b546806 needs interop +2ms
  vite:import-analysis 9.89ms [5 imports rewritten] src\main.tsx +7ms
  vite:transform 18.15ms /src/main.tsx +103ms
  vite:cache [memory] /node_modules/.vite/deps/react.js?v=4fd75b4d +103ms
  vite:cache [memory] /node_modules/.vite/deps/react-dom_client.js?v=9b546806 +1ms
  vite:cache [memory] /src/App.tsx +0ms
  vite:cache [memory] /src/index.css +0ms
  vite:cache [memory] react/jsx-dev-runtime +1ms
  vite:time 25.31ms /src/main.tsx +69ms
  vite:cache [304] /@react-refresh +85ms
  vite:time 0.58ms /@react-refresh +17ms
  vite:cache [304] /node_modules/vite/dist/client/env.mjs +3ms
  vite:time 1.85ms /node_modules/vite/dist/client/env.mjs +3ms
  vite:cache [304] react/jsx-dev-runtime +2ms
  vite:time 0.53ms /@id/__x00__react/jsx-dev-runtime +1ms
  vite:cache [304] /src/App.tsx +7ms
  vite:time 1.83ms /src/App.tsx +8ms
  vite:cache [304] /src/index.css +3ms
  vite:time 1.20ms /src/index.css +2ms
  vite:cache [304] /src/assets/react.svg +28ms
  vite:time 1.73ms /src/assets/react.svg?import +28ms
  vite:cache [304] /src/App.css +3ms
  vite:time 1.96ms /src/App.css +3ms
  vite:time 1.85ms /node_modules/.vite/deps/react_jsx-dev-runtime.js.map +11ms
  vite:time 3.39ms /node_modules/.vite/deps/chunk-2T7YCMPZ.js.map +2ms
  vite:time 1.55ms /node_modules/.vite/deps/react.js.map +4ms
  vite:time 15.71ms /node_modules/.vite/deps/react-dom_client.js.map +15ms
  vite:time 0.61ms /vite.svg +9ms

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

Describe the bug

Testing the main branch (including vitejs/vite#8546) since vite@3-alpha10 doesn't work for production builds of Ladle.

• checkout https://github.com/tajo/ladle/tree/test-vite
• assumes it's next to built vite repo (using pnpm overrides)
• go to ladle/packages/example
• pnpm ladle build

Log:

➜  example git:(test-vite) y ladle build            
yarn run v1.22.18
$ /Users/vojtech/Projects/ladle/packages/example/node_modules/.bin/ladle build
vite v3.0.0-alpha.10 building for production...
transforming (50) ../../../example/node_modules/.vite/deps_build/react-dom_client.js'jsx' is not exported by '../../node_modules/.pnpm/[email protected]/node_modules/react/jsx-runtime.js'
'jsxs' is not exported by '../../node_modules/.pnpm/[email protected]/node_modules/react/jsx-runtime.js'
'Fragment' is not exported by '../../node_modules/.pnpm/[email protected]/node_modules/react/jsx-runtime.js'
✓ 64 modules transformed.

If you try to run the server with build folder you get some generic error:

Uncaught ReferenceError: module is not defined
    at index.6fff39be.js:9:2024

(Is there a simple way how I could do this repro with StackBlitz?)

Reproduction

https://github.com/tajo/ladle/tree/test-vite

System Info

System:
    OS: macOS 12.4
    CPU: (10) arm64 Apple M1 Max
    Memory: 23.87 GB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v16.15.0/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
  Browsers:
    Chrome: 102.0.5005.61
    Firefox: 101.0
    Safari: 15.5

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

Describe the bug

Jsx in namespace is not supported, similar to this bug: #22413

Reproduction

pnpm create vite demo --template react-ts

Steps to reproduce

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

Create a official demo: pnpm create vite demo --template react-ts.
And then write the following code:

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import './App.css'

namespace AAA {
    export const Hello = () => <div>Hello</div>
}

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
        <AAA.Hello></AAA.Hello>
    </div>
  )
}

export default App

System Info

System:
    OS: Linux 5.19 Arch Linux
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11700K @ 3.60GHz
    Memory: 20.67 GB / 31.17 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.10 - /usr/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm

Used Package Manager

pnpm

Logs

This error occured:

Internal server error: Transform failed with 1 error:
.../demo/src/App.tsx:14:5: ERROR: Cannot use "this" here:

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.

Describe the bug

Hot reload won't update the css created by styled, just after a full reload.

Reproduction

Just try to change any css's prop inside a styled:
https://github.com/eduzz/template-react/tree/vite

System Info

System:
    OS: macOS 11.6
    CPU: (4) x64 Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz
    Memory: 490.79 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.0.1 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.1.0 - /usr/local/bin/npm
    Watchman: 2021.10.18.00 - /usr/local/bin/watchman
  Browsers:
    Edge: 94.0.992.50
    Safari: 15.0
  npmPackages:
    @vitejs/plugin-react: 1.0.6 => 1.0.6 
    vite: 2.6.11 => 2.6.11

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 https://github.com/vuejs/vue-next 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.

Describe the bug

I'm try to move my react app to use vite instead of create-react-app
I'm using package call react-export-excel to export some data.
Everything work Ok on development mode .
When I'm try to build my app I'm getting an error "Uncaught Error: Could not dynamically require "./jszip". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.
"

Reproduction

https://github.com/aviyi/vite-xlsx

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11700K @ 3.60GHz
    Memory: 16.97 GB / 31.77 GB
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.7 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (104.0.1293.47)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @vitejs/plugin-react: ^2.0.0 => 2.0.0
    vite: ^3.0.0 => 3.0.4

Used Package Manager

npm

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.

Describe the bug

I am part of a team that has started work on a preexisting React/Vite project that uses Carbon Components. All is well until Docker serves Nginx with a production build and the component produces the following error:

This is even while just trying to render a simple string:

The strange thing is that this only seems to affect the component and none of the other Carbon Components I have on the page. I've made a simple reproduction in StackBlitz as closely as I could without running it through Docker and Nginx. Running a Vite Build and then Vite Preview sometimes it seems to work but other times is doesn't render to the screen at all but without any errors.

vite.config.ts

package.json

Reproduction

https://stackblitz.com/edit/vitejs-vite-cygruj?file=package.json,vite.config.ts,src%2Fmain.tsx,index.html,src%2FApp.tsx&terminal=dev

Steps to reproduce

vite build
vite preview

System Info

Windows 10

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.

vite 配置 external react库，无法正确加载解析

react 库是我直接拷贝 node_modules/react/umd/react.production.min.js 文件，发布到自定义 cdn 上面

具体配置如下

rollupOptions: {
    external: ['react', 'react-dom'],
    output: {
      globals: {
        react: 'React',
        'react-dom': 'ReactDom'
      }
    }
  }

系统信息

node 14.16.0
vite2.0.1

报错信息如下

Describe the bug

After creating a brand new Vite project using create-vite(yarn create vite) breakpoints in VS Code do not get hit after the first change and refresh.

Refresh meaning the fast HMR refresh. The app refreshes well in the browser but it leaves the VS Code debugger in an unusable state.

Refreshing the browser, or refresh through VS Code allows breakpoints until the next refresh.

Reproduction

Reproduce:

1. Create a react-ts vite project using yarn create vite
2. run yarn dev
3. Inside of VS Code create the following launch.json:

{
	// Use IntelliSense to learn about possible attributes.
	// Hover to view descriptions of existing attributes.
	// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
	"version": "0.2.0",
	"configurations": [
		{
			"name": "Launch Chrome",
			"request": "launch",
			"type": "pwa-chrome",
			"url": "http://localhost:3000",
			"webRoot": "${workspaceFolder}"
		}
	]
}

4. Place a breakpoint on

  const [count, setCount] = useState(0)

5. Debug the app in vs code
6. Notice your breakpoint is hit
7. Change the line "Hello Vite + React" to "Test breakpoint" and save
8. Notice the app has successfully updated in the browser
9. Notice that your breakpoint is not hit
10. Refresh the page and notice your breakpoint is now hit

System Info

System:
    OS: Windows 10 10.0.19041
    CPU: (12) x64 AMD Ryzen 5 3600XT 6-Core Processor

    Memory: 2.59 GB / 15.91 GB
  Binaries:
    Node: 14.15.4 - C:\apps\dev\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.10 - C:\apps\dev\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1023.0), Chromium (93.0.961.47)
    Internet Explorer: 11.0.19041.1202

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 https://github.com/vuejs/vue-next 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.

Describe the bug

I had a React project built with create-react-app which I just migrated to Vite.
Previously the icons where displayed normally, but after migrating to Vite, they become like this

The way I used material UI icons is like below
https://mui.com/material-ui/icons/#icon-font-icons
Is there a way to restore the icons?
Any help would be appreciated. Thanks!

Reproduction

https://stackblitz.com/edit/vitejs-vite-m52qqp

Steps to reproduce

No response

System Info

System:
    OS: macOS 12.5
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 1.60 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v16.14.2/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Firefox: 108.0.1
    Safari: 15.6
  npmPackages:
    @vitejs/plugin-react: ^3.0.0 => 3.0.0 
    vite: ^4.0.0 => 4.0.3 
Note that this issue exist on Safari/Firefox/Chrome

Used Package Manager

npm

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

Describe the bug

when I use @vite/plugin-react build project, I impot antd Form component in my project, when run "dist" in my server, deps is empty array useEffect cleanup is not work.

I find reason, because @vite/plugin-react default use 'jsxruntime', when set this options {jsxRuntime: 'classic'}, the cleanup is on work!

Reproduction

https://codesandbox.io/p/sandbox/sleepy-hodgkin-lpc40v?file=%2Fvite.config.ts&selection=%5B%7B%22endColumn%22%3A8%2C%22endLineNumber%22%3A11%2C%22startColumn%22%3A8%2C%22startLineNumber%22%3A11%7D%5D&workspace=%257B%2522activeFileId%2522%253A%2522cl95khku20012luip4301gyja%2522%252C%2522openFiles%2522%253A%255B%2522%252FREADME.md%2522%252C%2522%252Fpackage.json%2522%252C%2522%252Fsrc%252Fmain.tsx%2522%252C%2522%252Fsrc%252FApp.tsx%2522%252C%2522%252Fvite.config.ts%2522%255D%252C%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522gitSidebarPanel%2522%253A%2522COMMIT%2522%252C%2522sidekickItems%2522%253A%255B%257B%2522type%2522%253A%2522PREVIEW%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522key%2522%253A%2522cl9s933rs000k306is9uxb2yb%2522%252C%2522isMinimized%2522%253Afalse%257D%255D%257D

Steps to reproduce

No response

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-11320H @ 3.20GHz
    Memory: 1.24 GB / 15.74 GB
  Binaries:
    Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (106.0.1370.52)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    @vitejs/plugin-legacy: ^2.3.0 => 2.3.0
    @vitejs/plugin-react: ^2.2.0 => 2.2.0
    vite: ^3.2.0 => 3.2.0

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.

Describe the bug

I'm using the babel-plugin-jsx-control-statements plugin to transform code within JSX files. But the transform does not work.

  <If condition={true}>
     foo
  </If>

The above code should output foo since the condition is true. The transformation happens but we get a string representation of it instead.

This issue does not happen in the 2.2.0 version of vite-plugin-react

Reproduction

https://stackblitz.com/edit/vitejs-vite-hcxdwa?file=src/App.jsx

Steps to reproduce

1. Install the babel-plugin-jsx-control-statements plugin
2. Add it to babel config of the vite react plugin
3. Add a simple JSX control statement component
4. View the issue by running the dev server

System Info

System:
    OS: macOS 12.6.1
    CPU: (8) arm64 Apple M1
    Memory: 95.86 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/Library/Caches/fnm_multishells/4837_1672312752866/bin/node
    npm: 9.2.0 - ~/Library/Caches/fnm_multishells/4837_1672312752866/bin/npm
    Watchman: 2022.12.12.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 108.0.5359.124
    Safari: 16.2
  npmPackages:
    @vitejs/plugin-react: 3.0.0 => 3.0.0
    vite: ^4.0.3 => 4.0.3

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

Describe the bug

Hi, I´m currently rewriting my JS app into React with Vite. Im using a lot of custom HTML elements just because they make everything more organized (for example or etc. However for some reason, I can´t use them with Vite, because "className" doesnt work on them. The CSS is not applied at all. I can use "class" (which works), but then I get huge amounts of warnings inside the dev tool, because class is not valid DOM property. How can I solve this please?

Reproduction

no need, just try to use className on any custom HTML element

Steps to reproduce

const TestingComponent = () => {
const wrapper = 'flexCol marAuto aliCen wr30';
const input = 'w100';

return (
    <div>
        <div className={wrapper}>
            <label htmlFor="username">Username</label>
            <input className={input} type="text" id="username" />
        </div>

        <div class={wrapper}>
            <label htmlFor="age">Age</label>
            <input className={input} type="number" id="age" />
        </div>
    </div>
);

};

export default TestingComponent;

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (4) x64 Intel(R) Core(TM) i5-7300HQ CPU @ 2.50GHz
    Memory: 2.03 GB / 7.86 GB
  Binaries:
    Node: 16.17.1 - C:\Program Files\nodejs\node.EXE
    npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (108.0.1462.54)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @vitejs/plugin-react: ^3.0.0 => 3.0.0
    vite: ^4.0.0 => 4.0.2

Used Package Manager

npm

Logs

const TestingComponent = () => {
const wrapper = 'flexCol marAuto aliCen wr30';
const input = 'w100';

return (
    <div>
        <div className={wrapper}>
            <label htmlFor="username">Username</label>
            <input className={input} type="text" id="username" />
        </div>

        <div class={wrapper}>
            <label htmlFor="age">Age</label>
            <input className={input} type="number" id="age" />
        </div>
    </div>
);

};

export default TestingComponent;

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.

Describe the bug

I can't run pnpm run build successfully. See Netlify job log https://app.netlify.com/sites/vojtechmares-website/deploys/639fa7cc04318b69d7824100

Reproduction

https://github.com/vojtechmares/website branch vite-4.x

Steps to reproduce

1. clone the repository
2. checkout to branch vite-4.x (git switch vite-4.x)
3. install dependencies via pnpm (pnpm i --frozen-lockfile)
4. Build the site pnpm run build

System Info

System:
    OS: macOS 13.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 1010.34 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.3.0 - /opt/homebrew/bin/node
    npm: 9.2.0 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 107.0.5304.87
    Firefox Developer Edition: 101.0
    Safari: 16.2
  npmPackages:
    @vitejs/plugin-react: ^3.0.0 => 3.0.0
    vite: ^4.0.2 => 4.0.2

*manually added, pnpm: 7.18.2

Used Package Manager

pnpm

Logs

See: https://app.netlify.com/sites/vojtechmares-website/deploys/639fa7cc04318b69d7824100

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

Describe the bug

When building in production mode, the react build file used is: react.development.js
It should be react.production.min.js.
To bypass this issue I need to add:

    define: {
      'process.env.NODE_ENV': '"production"',
    }

in my vite config (in vite.config.ts)
For me, this should be handled automatically by this plugin. What do you think ?
It is quite easy to handle it.
the following option should be added in packages/plugin-react/src/index.ts (line 150 & 160)
define: {'process.env.NODE_ENV': "${mode}"}
I can do a PR if you want !

Thanks !

Reproduction

any vite + @vitejs/plugin-react build

Steps to reproduce

No response

System Info

vite: v4.0.4
@vitejs/plugin-react: v3.0.1

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

Describe the bug

Description

There is a very odd behavior in my project with HMR not updating what the browser is displaying after editing a component.

• I have a page component About in src/About.tsx that is used as an element for react-router <Route> in src/App.tsx.
• This page component About is also wrapped with HOC withRandom from src/withRandom.tsx.
• A Component defined in the same src/About.tsx file is wrapped with HOC withCounter from src/withCounter.tsx and used as one of children of About component

This combination makes HMR not working as expected because any editing to About component is not updating what is being displayed by the browser.

Findings

Updating <h1>original text</h1> in About component does not update the text displayed in the browser.

const Component = memo(() => (
  <div style={{ border: '1px solid black', padding: '8px' }}>
    <b>This is component defined in about.tsx</b>
  </div>
));

const ComponentWithCounter = withCounter('You are finally awake.', Component);

const About = withRandom(
  'One does not simply reproduce a bug in isolated environment',
  memo(() => {
    return (
      <>
        <b>This is about component</b>
        <div style={{ border: '1px solid blue', padding: '8px' }}>
          <ComponentWithCounter>
            {({ decrement, increment }) => (
              <>
                <button onClick={increment} type='button'>
                  +
                </button>
                <button onClick={decrement} type='button'>
                  -
                </button>
              </>
            )}
          </ComponentWithCounter>
          <h1>original text</h1>
        </div>
      </>
    );
  })
);

But after removing/commenting out anything related to withCounter HOC About component reacts to changes as it should:

import { memo } from 'react';

// import { withCounter } from '@/withCounter';
import { withRandom } from '@/withRandom';

// const Component = memo(() => (
//   <div style={{ border: '1px solid black', padding: '8px' }}>
//     <b>This is component defined in about.tsx</b>
//   </div>
// ));

// const ComponentWithCounter = withCounter('You are finally awake.', Component);

const About = withRandom(
  'One does not simply reproduce a bug in isolated environment',
  memo(() => {
    return (
      <>
        <b>This is about component</b>
        <div style={{ border: '1px solid blue', padding: '8px' }}>
          {/* <ComponentWithCounter>
            {({ decrement, increment }) => (
              <>
                <button onClick={increment} type='button'>
                  +
                </button>
                <button onClick={decrement} type='button'>
                  -
                </button>
              </>
            )}
          </ComponentWithCounter> */}
          <h1>original text - changed!</h1>
        </div>
      </>
    );
  })
);

Same goes for removing/commenting out anything related to withRandom:

import { memo } from 'react';

import { withCounter } from '@/withCounter';

const Component = memo(() => (
  <div style={{ border: '1px solid black', padding: '8px' }}>
    <b>This is component defined in about.tsx</b>
  </div>
));

const ComponentWithCounter = withCounter('You are finally awake.', Component);

const About = memo(() => {
  return (
    <>
      <b>This is about component</b>
      <div style={{ border: '1px solid blue', padding: '8px' }}>
        <ComponentWithCounter>
          {({ decrement, increment }) => (
            <>
              <button onClick={increment} type='button'>
                +
              </button>
              <button onClick={decrement} type='button'>
                -
              </button>
            </>
          )}
        </ComponentWithCounter>
        <h1>original text</h1>
      </div>
    </>
  );
});

However I see changes in network tab - the browser just does not update for some reason:

Steps to reproduce

1. Open the provided reproduction case
2. Start vite (if it is not already running) with npm run vite:start
3. in src/About.tsx edit text in <h1> tag of About component
4. Browser should be updated with new text that was just edited in the previous step but it isn't

Reproduction

https://stackblitz.com/edit/node-tqfxtx?file=src%2FAbout.tsx

System Info

System:
    OS: Linux 5.10 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (16) x64 AMD Ryzen 9 5900HX with Radeon Graphics
    Memory: 1.73 GB / 7.47 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    npm: 8.2.0 - ~/.nvm/versions/node/v16.13.1/bin/npm
npmPackages:
    @vitejs/plugin-react: ^1.1.4 => 1.1.4 
    vite: ^2.7.10 => 2.7.10

Used Package Manager

npm

Logs

[vite] hot updated: /src/About.tsx

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/vue-next 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.

Description

Right now, the plugin always transforms jsx expressions into React.createElement calls in classic mode, and always imports jsx from react/jsx-runtime in automatic runtime. This makes it impossible to use custom jsx packages.

Suggested solution

In classic runtime, the this object to which createElement() calls are made should be configurable; and in automatic runtime, the package from which jsx is imported should be configurable.

Example: (automatic runtime)

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react({
    jsxPackage: 'my-jsx-package', // New proposed option
  })],
})

// Input (test.jsx)
export default Test() {
  return <div class="header">Hello World</div>
}

// Output
import { jsx as _jsx } from 'my-jsx-package/jsx-runtime' // imported from custom package instead of 'react'

export default Test() {
  return _jsx('div', { class: 'header' }, 'Hello World')
}

Example (classic runtime)

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react({
    jsxRuntime: 'classic',
    jsxPragma: 'h', // New proposed option
    jsxPragmaFragment: 'h.fragment', // New proposed option
  })],
})

// Input (test.jsx)
import { h } from 'custom-jsx' // Instead of `import React from 'react'`

export default Test({ message }) {
  return (
    <>
      <div>Hello World</div>
      <div>{ message }</div>
    </>
  )
}

// Output
import { h } from 'custom-jsx'

export default Test({ message }) {
  return h(h.fragment, null, [
    h('div', null, 'Hello World'),
    h('div', null, message)
  ])
}

Alternative

The current alternative is to use classic runtime and manipulate the imports in a way that mimics react API.

Example:

// custom-jsx-wrapper.js
import { h } from 'custom-jsx'

export default { createElement: h, Fragment: h.fragment }

// test.jsx
import React from './custom-jsx-wrapper.js'

export default Test() {
  return <div>Hello World</div>
}

Additional context

This feature is supported by babel-plugin-transform-react-jsx, through importSource, pragma, and pragmaFrag options.

Doc:
https://babeljs.io/docs/en/babel-plugin-transform-react-jsx.html#importsource

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Describe the bug

Most top-level React functions should be marked as pure with a Pure Annotation of /* @__PURE__ */ or /*#__PURE__*/. (for example, see this list of React functions from babel-plugin-transform-react-pure-annotations).

Vite only marks the jsx factory function as pure, but none of the top-level React functions.

This is problematic for React component libraries because it is very common for one of the top-level React functions to be used at the site of an export.

For example:

export const MyComp = React.forwardRef(/* stuff*/)

As such, it means the entire library won't get treeshaken by consumers because every component looks like it might have side effects.

It seems like this should be built in. (But maybe this is more of a feature request?)

Possible Solution

I'm not familiar with Vite at all (literally just trying it out right now for the first time), but one solution might be to add the babel plugin above to the @vitejs/plugin-react package by default (maybe here?)

Workaround

Since you can add your own babel plugins to @vitejs/plugin-react, you can workaround this problem by applying the babel plugin mentioned above like so:

export default defineConfig({
  // ...
  plugins: [
    react({
      babel: {
        presets: [['@babel/preset-react', { runtime: 'automatic' }]],
      },
    }),
  ],
});

Note: Pure Annotations only apply when building a library as the built code will be built a second time by the consumer

Reproduction

https://stackblitz.com/edit/vitejs-vite-ukorqc?file=dist/index.es.js

System Info

System:
    OS: macOS 12.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 162.66 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    npm: 8.10.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 103.0.5060.114
    Firefox: 102.0.1
    Safari: 15.5

Used Package Manager

npm

Logs

  vite:config TS + native esm config loaded in 608.70ms URL {
  href: 'file:///home/projects/vitejs-vite-ukorqc/vite.config.ts',
  origin: 'null',
  protocol: 'file:',
  username: '',
  password: '',
  host: '',
  hostname: '',
  port: '',
  pathname: '/home/projects/vitejs-vite-ukorqc/vite.config.ts',
  search: '',
  searchParams: URLSearchParams {},
  hash: ''
} +0ms
  vite:config using resolved config: {
  vite:config   build: {
  vite:config     target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: false,
  vite:config     cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ],
  vite:config     sourcemap: false,
  vite:config     rollupOptions: { external: [Array] },
  vite:config     minify: false,
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: {
  vite:config       entry: './src/index.jsx',
  vite:config       formats: [Array],
  vite:config       fileName: [Function: fileName]
  vite:config     },
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
  vite:config   },
  vite:config   plugins: [
  vite:config     'vite:build-metadata',
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:react-babel',
  vite:config     'vite:react-refresh',
  vite:config     'vite:react-jsx',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm-helper',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:wasm-fallback',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:watch-package-data',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:dynamic-import-vars',
  vite:config     'vite:import-glob',
  vite:config     'vite:build-import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:reporter',
  vite:config     'vite:load-fallback'
  vite:config   ],
  vite:config   optimizeDeps: {
  vite:config     disabled: 'build',
  vite:config     force: undefined,
  vite:config     include: [ 'react/jsx-runtime', 'react/jsx-dev-runtime' ],
  vite:config     esbuildOptions: { preserveSymlinks: undefined }
  vite:config   },
  vite:config   resolve: { dedupe: [ 'react', 'react-dom' ], alias: [ [Object], [Object] ] },
  vite:config   configFile: '/home/projects/vitejs-vite-ukorqc/vite.config.ts',
  vite:config   configFileDependencies: [ '/home/projects/vitejs-vite-ukorqc/vite.config.ts' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     optimizeDeps: { force: undefined },
  vite:config     build: {}
  vite:config   },
  vite:config   root: '/home/projects/vitejs-vite-ukorqc',
  vite:config   base: '/',
  vite:config   publicDir: '/home/projects/vitejs-vite-ukorqc/public',
  vite:config   cacheDir: '/home/projects/vitejs-vite-ukorqc/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   ssr: {
  vite:config     format: 'esm',
  vite:config     target: 'node',
  vite:config     optimizeDeps: { disabled: true, esbuildOptions: [Object] }
  vite:config   },
  vite:config   isWorker: false,
  vite:config   mainConfig: null,
  vite:config   isProduction: true,
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     middlewareMode: false,
  vite:config     fs: { strict: true, allow: [Array], deny: [Array] }
  vite:config   },
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(0) { set: [Function (anonymous)] },
  vite:config   createResolver: [Function: createResolver],
  vite:config   worker: {
  vite:config     format: 'iife',
  vite:config     plugins: [
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object]
  vite:config     ],
  vite:config     rollupOptions: {}
  vite:config   },
  vite:config   appType: 'spa',
  vite:config   experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false }
  vite:config } +7ms
vite v3.0.0 building for production...
✓ 1 modules transformed.
dist/index.es.js   0.77 KiB / gzip: 0.36 KiB

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.

Description

A user shouldn't have to define jsxImportSource twice, if it's in a TSConfig then it's already defined.
ESBuild (and hopefully Vite) already respects that as far as I know for:
jsxFactory
jsxFragmentFactory

I think the plugin should do that for jsxImportSource as well.

Suggested solution

Read TSConfig.compilerOptions.jsxImportSource ?? options?.jsxImportSource ?? "react"

Alternative

Building a shim for the auto-import and let ESBuild the whole thing instead of using the plugin.

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Describe the bug

@vitejs/plugin-react processing files that defined in exclude option.

export default defineConfig({
  plugins: [
    react({
      exclude: /App/,
    }),
  ],
});

I was expecting @vitejs/plugin-react to bypass processing matching files and throw an error but it's still processing those files.

include and exclude filters are only checked when loading react-refresh plugin and jsx transforms are still processes for all jsx files:
https://github.com/vitejs/vite/blob/e8c840abd2767445a5e49bab6540a66b941d7239/packages/plugin-react/src/index.ts#L170

In my opinion we should do that on top of transform function by adding this:

async transform(code, id, options) {
  if (!filter(id)) {
    return
  }
  // ...  

Why I do this?

I'm currently using Solid and React on same project and both of them have their own jsx transform. I need to prevent them processing the same file. I have naming convention in my app .react.tsx for React components and .solid.tsx for Solid components. I didn't include Solid in my repro because vite-plugin-solid doesn't have an option to exclude files but I patched their plugin locally and will make a feature request on their repo.

Reproduction

https://stackblitz.com/edit/vitejs-vite-k286cf?file=vite.config.js&terminal=dev

System Info

System:
    OS: Windows 10 10.0.19042
  Binaries:
    Node: 16.13.1 - C:\Program Files\nodejs\node.EXE

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

Describe the bug

Hi team,
i found that while the vite build react app works fine on local but when i deployed this code to git repository and trying to setup git page for this repo, this fails and shows 404 for main.jsx file in repository
this is the github repo - https://github.com/webdevamit/comment-box
and github page link - https://webdevamit.github.io/comment-box/
as per vite documentation i have added deploy.sh file as well

Reproduction

https://webdevamit.github.io/comment-box/

Steps to reproduce

just follow the git repository to see the changes

System Info

npm package is used to install dependencies

Used Package Manager

npm

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

Describe the bug

In my set-up two variants of the same @emotion/react (identical version, different module format) library are sent over to the browser.

I created a small showcase for the issue here: https://github.com/swernerx/emotion-react-vite-issue

Seems to be related to the situation that Emotion is being used as a direct and indirect dependency inside a (pnpm-powered) mono-repository set-up. In the case of @emotion/react either both the CJS and the ESM version or two ESM bundles are sent to the browser. The library contains a check to warn about a duplicate import situation, which made us aware of the problem. There might be other libraries/use-cases where the same issue applies.

Reproduction

https://github.com/swernerx/emotion-react-vite-issue

System Info

System:
    OS: macOS 12.5
    CPU: (20) arm64 Apple M1 Ultra
    Memory: 2.30 GB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - /opt/homebrew/opt/node@16/bin/node
    npm: 8.11.0 - /opt/homebrew/opt/node@16/bin/npm
  Browsers:
    Brave Browser: 103.1.40.105
    Chrome: 104.0.5112.79
    Firefox: 98.0.2
    Safari: 15.6

Used Package Manager

pnpm

Logs

emotion-react.browser.esm.js:398 You are loading @emotion/react when it is already loaded. Running multiple instances may cause problems. This can happen if multiple versions are used, or if multiple builds of the same version are used.

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.

Describe the bug

Buildei o projeto com o mui e quebrou, vou por webpack

Reproduction

https://asdmkasmkmkd.com.br

Steps to reproduce

Buildei o projeto com o mui e quebrou, vou por webpack

System Info

Buildei o projeto com o mui e quebrou, vou por webpack

Used Package Manager

npm

Logs

Buildei o projeto com o mui e quebrou, vou por webpack

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

Describe the bug

https://github.com/vitejs/vite/blob/dc323a0a230f57de0d102782dd4e673fb6b2d06c/packages/plugin-react/src/jsx-runtime/restore-jsx.ts#L68

The restoreJSX function makes a simple assumption that all its inputs are valid jsx file because usually it is going to transform code from thrid-party libraries which only includes js code. However, it is also possible to see user source code from monorepo, where using React.createElement() in .ts files will throw a parsing error because babel was not configured to parse typescript.

Reproduction

https://stackblitz.com/edit/vitejs-plugin-react-restorejsx-bug?file=lib/index.ts

System Info

System:
    OS: macOS 12.3.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Memory: 21.99 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.15.0 - /usr/local/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 8.5.5 - /usr/local/bin/npm
    Watchman: 2022.03.21.00 - /usr/local/bin/watchman
  npmPackages:
    @vitejs/plugin-react: ^1.3.2 => 1.3.2
    vite: ^2.9.8 => 2.9.8

Used Package Manager

pnpm

Logs

2022-05-07T05:26:28.496Z vite:config bundled config file loaded in 281.58ms
2022-05-07T05:26:28.510Z vite:config using resolved config: {
  plugins: [
    'vite:build-metadata',
    'alias',
    'vite:react-babel',
    'vite:react-refresh',
    'vite:react-jsx',
    'vite:modulepreload-polyfill',
    'vite:resolve',
    'vite:html-inline-proxy',
    'vite:css',
    'vite:esbuild',
    'vite:json',
    'vite:wasm',
    'vite:worker',
    'vite:asset',
    'vite:define',
    'vite:css-post',
    'vite:build-html',
    'vite:worker-import-meta-url',
    'vite:watch-package-data',
    'commonjs',
    'vite:data-uri',
    'rollup-plugin-dynamic-import-variables',
    'vite:asset-import-meta-url',
    'vite:build-import-analysis',
    'vite:esbuild-transpile',
    'vite:terser',
    'vite:reporter',
    'vite:load-fallback'
  ],
  build: {
    target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
    polyfillModulePreload: true,
    outDir: 'dist',
    assetsDir: 'assets',
    assetsInlineLimit: 4096,
    cssCodeSplit: true,
    cssTarget: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
    sourcemap: false,
    rollupOptions: {},
    minify: 'esbuild',
    terserOptions: {},
    write: true,
    emptyOutDir: null,
    manifest: false,
    lib: false,
    ssr: false,
    ssrManifest: false,
    reportCompressedSize: true,
    chunkSizeWarningLimit: 500,
    watch: null,
    commonjsOptions: { include: [Array], extensions: [Array] },
    dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
  },
  resolve: { dedupe: [ 'react', 'react-dom' ], alias: [ [Object], [Object] ] },
  optimizeDeps: {
    include: [ 'react/jsx-dev-runtime' ],
    esbuildOptions: { keepNames: undefined, preserveSymlinks: undefined }
  },
  configFile: '/Users/hyrious/pg/test-vite-react/main/vite.config.ts',
  configFileDependencies: [ '/Users/hyrious/pg/test-vite-react/main/vite.config.ts' ],
  inlineConfig: {
    root: undefined,
    base: undefined,
    mode: undefined,
    configFile: undefined,
    logLevel: undefined,
    clearScreen: undefined,
    build: {}
  },
  root: '/Users/hyrious/pg/test-vite-react/main',
  base: '/',
  publicDir: '/Users/hyrious/pg/test-vite-react/main/public',
  cacheDir: '/Users/hyrious/pg/test-vite-react/main/node_modules/.vite',
  command: 'build',
  mode: 'production',
  isWorker: false,
  isProduction: true,
  server: {
    preTransformRequests: true,
    fs: { strict: true, allow: [Array], deny: [Array] }
  },
  preview: {
    port: undefined,
    strictPort: undefined,
    host: undefined,
    https: undefined,
    open: undefined,
    proxy: undefined,
    cors: undefined,
    headers: undefined
  },
  env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  assetsInclude: [Function: assetsInclude],
  logger: {
    hasWarned: false,
    info: [Function: info],
    warn: [Function: warn],
    warnOnce: [Function: warnOnce],
    error: [Function: error],
    clearScreen: [Function: clearScreen],
    hasErrorLogged: [Function: hasErrorLogged]
  },
  packageCache: Map(0) { set: [Function (anonymous)] },
  createResolver: [Function: createResolver],
  worker: {
    format: 'iife',
    plugins: [
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object]
    ],
    rollupOptions: {}
  }
}
vite v2.9.8 building for production...
transforming...
✓ 3 modules transformed.
[vite:react-babel] /Users/hyrious/pg/test-vite-react/lib/index.ts: Unexpected token (5:9)

  3 | export class b {
  4 |   // "public" is not a valid jsx code, it will break "restoreJSX()"
> 5 |   public f = () => React.createElement("span");
    |          ^
  6 | }
  7 |
file: /Users/hyrious/pg/test-vite-react/lib/index.ts:5:9
error during build:
SyntaxError: /Users/hyrious/pg/test-vite-react/lib/index.ts: Unexpected token (5:9)

  3 | export class b {
  4 |   // "public" is not a valid jsx code, it will break "restoreJSX()"
> 5 |   public f = () => React.createElement("span");
    |          ^
  6 | }
  7 |
    at instantiate (/Users/hyrious/pg/test-vite-react/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:72:32)
    at constructor (/Users/hyrious/pg/test-vite-react/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:358:12)
    at Object.raise (/Users/hyrious/pg/test-vite-react/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:3335:19)
    at Object.unexpected (/Users/hyrious/pg/test-vite-react/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:3373:16)
    at Object.parseClassMemberWithIsStatic (/Users/hyrious/pg/test-vite-react/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:15606:12)
    at Object.parseClassMember (/Users/hyrious/pg/test-vite-react/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:15473:10)
    at /Users/hyrious/pg/test-vite-react/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:15413:14
    at Object.withSmartMixTopicForbiddingContext (/Users/hyrious/pg/test-vite-react/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:14213:14)
    at Object.parseClassBody (/Users/hyrious/pg/test-vite-react/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:15388:10)
    at Object.parseClass (/Users/hyrious/pg/test-vite-react/node_modules/.pnpm/@[email protected]/node_modules/@babel/parser/lib/index.js:15362:22)

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.

Clear and concise description of the problem

At present we can provide extra babel plugins to the @vitejs/plugin-react via its babel option, e.g:

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ["@compiled/babel-plugin"],
      },
    }),
  ],
})

For the most part this works fine. The plugins provided are applied to project files, where a project file is not a node_module and starts with the projectRoot (project root being the current working directory). This is defined here

This is where I encounter an issue. I am using pnpm workspaces in my project and have a directory structure like:

root
|
|__vite-demo-app
|          vite.config.ts
|
|__packages/
|         |
|         |__ui-package/
|                    some-files.ts

During development my workspace packages use src/index.ts for their main entry-point in their package.json. This means when a file is loaded it needs to be transpiled (by vite in this case). In my case I am using @compiled/react which requires its babel
plugin to be applied before using the component. Since my packages will be outside the project-root the react-plugin will not apply the user provided plugins to it.

Suggested solution

Allow users to specify an include (or something similar) option which can be used to ensure that user provided plugins are still applied. For example, logic defined in the vite react plugin, could become:

const plugins = isProjectFile || options.include.some(match) ? [...userPlugins] : []

Then I could do something like:

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ["@compiled/babel-plugin"],
        include: [function(filename) { return filename.includes('<my-project-name>/packages/<my-dep>'} ]
      },
    }),
  ],
})

The usage I'd ideally like to have seen is similar to how babel handles situations like this

Alternative

In my case I could pre-build my dependencies but this is not a great developer experience. Not aware of any other alternatives - but definitely open to suggestions.

My main goal in suggesting this change is so that I can make changes to workspace packages and see live reloads without needing to build the workspace package.

Additional context

Happy to pick this up myself and raise a PR for it.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Describe the bug

使用antd的DatePicker组件点击时候出现问题，如图：

感谢🙏： @sodatea @Shinigami92 @underfin @psaren

Reproduction

https://github.com/Jairwin-L/vite-react-ts-demo/blob/077146486dcbd2965b6773bcf170dce5aabaec51/src/pages/demo.tsx#L25

System Info

"dependencies": {
		"antd": "^4.16.6",
		"antd-mobile": "^2.3.4",
		"indexof": "^0.0.1",
		"react": "^17.0.2",
		"react-dom": "^17.0.2",
		"react-router-dom": "^5.2.0"
	},
	"devDependencies": {
		"@types/node": "^14.14.31",
		"@types/react": "^17.0.0",
		"@types/react-dom": "^17.0.0",
		"@types/react-router-dom": "^5.1.7",
		"@vitejs/plugin-legacy": "^1.3.2",
		"@vitejs/plugin-react-refresh": "^1.3.2",
		"less": "^4.1.1",
		"typescript": "^4.1.2",
		"vite": "^2.3.6",
		"vite-plugin-cdn": "^1.0.0-beta.3",
		"vite-plugin-resolve-externals": "^0.1.0",
		"vite-plugin-style-import": "^0.7.6"
	}

Used Package Manager

yarn

Logs

ReferenceError: module 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/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

Describe the bug

In https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/package.json

The homepage, repository, and bugs fields are all still referring to https://github.com/vitejs/vite/ instead of https://github.com/vitejs/vite-plugin-react. This means that the links on https://www.npmjs.com/package/@vitejs/plugin-react are going to the wrong place too.

Reproduction

https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/package.json

Steps to reproduce

No response

System Info

All

Used Package Manager

npm

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

Describe the bug

React 18 introduces a new renderToPipeableStream pattern, which includes options for adding client entrypoints via bootstrapScripts and bootstrapModules:

renderToPipeableStream(
  <App />,
  {
    bootstrapModules: ["src/main.jsx"],
  }
).pipe(response);

Script tags generated from these options include the async property. This allows React to progressively hydrate the document as it streams in.

Unfortunately, this is incompatible with the React Refresh header added in @vitejs/plugin-react. I assume this is because the header code throws an Error if it cannot detect the preamble (which is still loaded eventually, just not asynchronously):

Html.jsx:6 Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201
    at Html.jsx:6:11
(anonymous) @ Html.jsx:6
client.ts:52 

It's odd that I cannot reproduce this behavior by simply adding async to the script tag in the React starter template: https://stackblitz.com/edit/vitejs-vite-fpvd7t?file=index.html

But I can when it's included via bootstrapModules: jplhomer/vite-streaming-ssr-demo#3

Perhaps this means that the way React is injecting the script makes it execute earlier than it normally does? I'm kind of stumped.

Not sure what the best approach to solving this is! I think it's important that entrypoint scripts can be async to support streaming SSR in React 18.

Should we to update the injected header to more gracefully wait for the RefreshRuntime to be available?

Reproduction

jplhomer/vite-streaming-ssr-demo#3

System Info

System:
    OS: macOS 12.2
    CPU: (8) arm64 Apple M1 Pro
    Memory: 133.94 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.1/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 97.0.4692.99
    Safari: 15.3
  npmPackages:
    @vitejs/plugin-react: ^1.1.4 => 1.1.4 
    vite: ^2.7.13 => 2.7.13

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

Describe the bug

I'm bundling a library from one repo (ES module) with Vite and importing it in another repo handled by Vite.
We have several external dependencies in this project.

In the bundled library code there are pieces of code where the React.createElement have component name in variables with lower case name and expressions, like:

React.createElement(render4.component, __spreadProps(__spreadValues({}, render4.props))
React.createElement(this.props.pointer, this.props)
React.createElement(_default$1, {})

When I used the library executing vite build those expressions are not converted to _jsx, launching an error in production, "React is undefined"

After an investigation I noticed the 3 cases above are not recognised as valid “React.createElement” snippet because the check at this line fails:

https://github.com/vitejs/vite/blob/274c10eb9e9451620981da808e143bc50b8c2a38/packages/plugin-react/src/jsx-runtime/babel-restore-jsx.ts#L157

When this check fails the snippet is not replaced in the original code.

Another related issue is that when we have some React aliases and the aliases are used to execute createElement (for example rollup define “React__default” when in the same file there are multiple name conflicts ) the lines: 


https://github.com/vitejs/vite/blob/274c10eb9e9451620981da808e143bc50b8c2a38/packages/plugin-react/src/jsx-runtime/restore-jsx.ts#L33-L36

Is going to replace the alias with React, 
If then the check of a valid React.createElement fails (issue above) then the plugin is not going to replace back the alias, adding in the chunk code a reference to a variable (React) that doesn’t exists.



So the issues:

• There are limitations in the way that the Plugin can recognise the React.createElement snippet and that can be problematic in project with many 3rd party dependencies
• When React has aliases and they are used with “createElement” if the plugin does not recognise the “React.createElement” snippet then the aliases are not replaced back


Thanks for your great work! 🎉

Reproduction

https://github.com/GlacialBoy/vite-createElement-error

System Info

System:
    OS: macOS 11.3.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 638.48 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
    Watchman: 2021.10.11.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 100.0.4896.127
    Firefox: 99.0.1
    Safari: 14.1
  npmPackages:
    @vitejs/plugin-react: ^1.3.0 => 1.3.1 
    vite: ^2.9.6 => 2.9.6

Used Package Manager

npm

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

Describe the bug

If there is only a single export in a template file then vite will hmr update that file correctly after making an update.

// src/templates/test.tsx
const Test = (props: any) => {
  return (
    <>
      <div>
        Test
      </div>
    </>
  );
};

export default Test;

[vite] hmr update /src/templates/test.tsx

But when there's also another export in the file it instead hmr updates the entry file, causing React state to reset

// src/templates/test.tsx
export const foo = {}

[vite] hmr update /react-sites-scripts/entry.tsx

Reproduction

https://stackblitz.com/edit/vitejs-vite-krniy8?file=src/App.jsx

System Info

System:
    OS: macOS 12.2.1
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 45.29 MB / 16.00 GB
    Shell: 5.1.16 - /usr/local/bin/bash
  Binaries:
    Node: 17.7.1 - ~/.nvm/versions/node/v17.7.1/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.5.2 - ~/.nvm/versions/node/v17.7.1/bin/npm
    Watchman: 2021.10.18.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 99.0.4844.83
    Firefox: 52.0.2
    Safari: 15.3

Used Package Manager

npm

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

Describe the bug

When using styled components (@emotion/styled in my case) if the file contains any other react-like-components (detected by isComponentLikeIdentifier) and doesn't contain any other non-react-like exports, then changes to those styled components are not properly refreshed by HMR.

All the react-like-components are being refreshed by $RefreshReg$ and the file is accepted, but styled components in that case are not caught in the refresh.

If, however, there are other non-component-like exports or there aren't any other component-like identifiers then the file is not accepted and refreshes properly by its parent(s) being HMR'd

Reproduction

https://codesandbox.io/s/vite-emotion-hmr-bug-rkk0hi?file=/src/HmrTest.tsx

Steps to reproduce

Steps to reproduce described in comments in minimal reproduction

System Info

sandbox@sse-sandbox-rkk0hi:/sandbox$ npx envinfo --system --npmPackages '{vite,@vitejs/*}' --binaries --browsers
npx: installed 1 in 0.915s

  System:
    OS: Linux 5.4 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Memory: 8.26 GB / 62.72 GB
    Container: Yes
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 14.19.3 - ~/.nvm/versions/node/v14.19.3/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v14.19.3/bin/yarn
    npm: 6.14.17 - ~/.nvm/versions/node/v14.19.3/bin/npm
  npmPackages:
    @vitejs/plugin-react: ^2.1.0 => 2.2.0
    @vitejs/plugin-react-refresh: ^1.3.1 => 1.3.3
    vite: ^3.1.0 => 3.2.4

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.

Describe the bug

When importing a Web Component built in StencilJS using their React export option, Vite (Rollup) reports Failed to fetch dynamically imported module and terminates. It looks like other plugins like https://github.com/vitejs/vite-plugin-vue introduced a compilerOptions setting which allows syntax like

compilerOptions: {
    isCustomElement: (tag) => tag.startsWith('mycomponent-')
}

but vite-plugin-react does not. Is there another way to resolve this, or is this even the right answer?

The repro steps below work properly in Webpack so my assumption is some flag must be passed to RollUp to tell it what's going on. So while the issue is probably in RollUp, I'm reporting it here because I believe something in this plugin needs to be configured/passed through to it as is done with @vite/plugin-vue...

Reproduction

https://stackblitz.com/edit/vitejs-vite-ity84s?file=src/App.jsx

Steps to reproduce

1. Install any Web Component library with React bindings. In the repro above, @verdocs/web-sdk-react is built using StencilJS and their React target plugin.
2. Add any component to the app. In the repro above, VerdocsSign is shown, but any component will do. Bogus parameters may be used.
3. Observe error in console when app renders:

...
11:31:32.195 @verdocs_web-sdk-react.js?v=8b435f6a:1528 TypeError: Failed to fetch dynamically imported module: https://vitejsviteity84s-q50n--5173.local-credentialless.webcontainer.io/node_modules/.vite/deps/verdocs-sign.entry.js?import undefined
...
11:31:32.196 @verdocs_web-sdk-react.js?v=8b435f6a:1328 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'isProxied')
...

System Info

System:
    OS: macOS 13.1
    CPU: (8) arm64 Apple M1
    Memory: 65.39 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.17.1/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.1/bin/npm
    Watchman: 2022.03.21.00 - /usr/local/bin/watchman
  Browsers:
    Brave Browser: 108.1.46.144
    Chrome: 108.0.5359.124
    Firefox: 103.0.2
    Safari: 16.2

Used Package Manager

npm

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

Describe the bug

I'm trying to pass a config object to @babel/preset-react. However an error is returned that the key is not recognized. I wonder if there is an issue is how this config object is passed to babel?

Reproduction

https://stackblitz.com/edit/vite-react-ts-vwcmyl?file=vite.config.ts

Steps to reproduce

No response

System Info

System:
    OS: macOS 12.1
    CPU: (8) arm64 Apple M1
    Memory: 91.89 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.0 - ~/.volta/tools/image/node/16.14.0/bin/node
    Yarn: 1.22.10 - ~/.volta/bin/yarn
    npm: 6.14.17 - ~/Documents/Projects/ADDI/node_modules/.bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Firefox: 91.0.1
    Safari: 15.2
  npmPackages:
    @vitejs/plugin-react: ^3.0.0 => 3.0.0 
    vite: ^4.0.1 => 4.0.1

Used Package Manager

npm

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

Clear and concise description of the problem

I'm doing markdown conversion to React component. However, this plugin may only be supported .jsx? or .tsx? file. So I had to use an extra Babel plugin to handle the files generated by the markdown transformation.

Suggested solution

Add a configuration extension to the plugin's options and support any text that conforms to React component.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Describe the bug

Vite build for our application started failing after upgrading @vitejs/plugin-react from 2.0.0 to 2.0.1.

I was able to reproduce this error in the repository https://github.com/milang/vite-issues, branch plugin-react-201. It contains acme-app generated using [email protected], and a simple acme-lib that represents our internal library that is causing the build to fail. Reproduction steps:

git clone https://github.com/milang/vite-issues.git
cd vite-issues
git checkout plugin-react-v201
pnpm install
pnpm run -C packages/acme-app build
# => fails with
# [vite:react-babel] C:\Users\milang\dev\vite-issues\packages\acme-lib\src\styled.ts: Support for the experimental syntax 'flow' isn't currently enabled (3:8):
# ...

Actual behaviour: Build fails
Expected behaviour: Build succeeds

Note 1

A follow-up branch plugin-react-v200 reverts @vitejs/plugin-react back to 2.0.0. Switching to this branch makes the build succeed:

# (same directory as above)
git checkout plugin-react-v200 # switch to branch with @vitejs/[email protected]
pnpm install
pnpm run -C packages/acme-app build
# => build succeeds

Note 2

As I was experimenting with the reproduction steps, I noticed that I can simply rename styled.ts to styled.tsx (changing the file extension), after which the build succeed. While this is a simple "fix", behaviour of version 2.0.0 was IMO much better because it worked without a rename (and rename might not be possible when dealing with a 3rd party library).

# (same directory as above)
git checkout plugin-react-v201 # switch back to branch with @vitejs/[email protected]
pnpm install
mv packages/acme-lib/src/styled.ts packages/acme-lib/src/styled.tsx # change extension of the problematic file
pnpm run -C packages/acme-app build
# => build succeeds

Reproduction

https://github.com/milang/vite-issues/tree/plugin-react-v201

System Info

System:
  OS: Windows 10 10.0.19044
  CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
  Memory: 22.11 GB / 31.94 GB
Binaries:
  Node: 16.16.0
  npm: 8.11.0
  pnpm: 7.9.0
Browsers:
  (Not relevant)

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.

Describe the bug

When I go to https://www.npmjs.com/package/@vitejs/plugin-react and I want to find the source code, the links available are to vitejs/vite and a 404. Please update the repository to be this repository and the homepage to be https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md#vitejsplugin-react-

Reproduction

https://www.npmjs.com/package/@vitejs/plugin-react

Steps to reproduce

Just click the repo and homepage links

System Info

NA

Used Package Manager

npm

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

Describe the bug

For details. Please view the video

Reproduction

https://github.com/kljzndx/Test-Demos/tree/vite-react-bug

System Info

System:
    OS: Linux 5.10 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (4) arm64 unknown
    Memory: 1.52 GB / 3.71 GB
    Container: Yes
    Shell: 5.7.1 - /usr/bin/zsh
  Binaries:
    Node: 14.16.0 - /usr/local/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 7.23.0 - /usr/local/bin/npm
  Browsers:
    Chromium: 89.0.4389.114 # Raspberry pi
    Edge: 93.0.961.47 # local PC

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 https://github.com/vuejs/vue-next 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.

Clear and concise description of the problem

Recently at work we hit a point that was something of a wake-up call for us in terms of bundle size and tree-shaking capabilities and DX while working on our huge React codebase.

We decided that it might be time to try and look elsewhere for another solution that would improve our happines while working on the project as well as not sacrificing any of the existing features and final assets.

That's why we looked at Vite, it looked interesting, exciting as well as the tool that we were looking for. So, we started migrating and ditching Webpack in favor of Vite. It has been an interesting few weeks, mobilizing some scripts, components, etc. But we think it has been worth the time.

Despite all of that, we soon hit one paint-point that was "kind of a deal-breaker", and that was the HMR experience in our codebase. Due to the fact, that we realy heavily in class components and Redux and its well know hoc connect, we were seeing that the browser was being refreshed all the time. Of course, that not not an issue with Vite per-se, but it's a limitation of react-refresh itself, see here).

That's why we would like to submit some code, get it reviewed and improved and allow developers not migrating to Vite due to class components, to make that final jump.

Suggested solution

The solution that we first tried was to try to implement a Runtime workaround, by expanding the react-refresh/runtime itself with a function explained in this discussion. But the fix relies on the assumption that one can "inspect" the current and previous exports of "the module". But as of now, that's not the case with Vite, so we have to look for some other solution.

That why we expanded the plugin in our local environment to handle class components with HMR. The approach has been to modify the "boundary check function" to include class components and to return the different boundaries that we've guessed from the file in question. Then we modify the final code to include the necessary $RefreshReg$ calls so that we can tie everything together with react-refresh.

At the same time, to allow for some customization and flexibility we've added a new option to the plugin named excludeExports that allows the developer to specify "named" exports that must be ignored when "guessing" those boundaries; e.g:

// vite.config.js
import reactRefresh from '@vitejs/plugin-react-refresh'

export default {
  plugins: [reactRefresh({
	excludeExports: ['mapStateToProps', 'mapDispatchToProps']
  })]
}

This helps colocating exports such as the ones named in that example within the component (for testing purposes) while having the HMR working as expected.

NOTE: This is really something that can be kept out of the this implementation/solution, as for most devs, this might not be as much of a deal-breaker and they might be ok with moving them to separate files. But it's very nice for migrating projects like ours.

Alternative

Another solution that can be implemented is to expand Vite and allow the inspection of module exports and rely upon the react-refresh/runtime itself to handle the logic for knowing whether an export is a component or not (this would make the excludeExports option not really something worth doing.). That of course, would be more "safe" and might allow Vite to delegate most of the "burden/guesswork" to the runtime.

This would implement the runtime "function check" (see the discussion linked above) in the preambleCode of the plugin and then is just a matter of calling the function with the module exports, something like: isReactRefreshBoundary(import.meta.hot.module).

Describe the bug

Font awesome icons shared across chunk-split boundaries are missing from every import except the first one when importing a font-awesome icon by path like so:

// A.tsx
import { faPrint } from '@fortawesome/free-solid-svg-icons/faPrint';

// B.tsx
import { faPrint } from '@fortawesome/free-solid-svg-icons/faPrint';

// App.tsx
const A = lazy(() => import("./A"));
const B = lazy(() => import("./B"));

faPrint will only get bundled inside A.xxxx.js and is missing from B.xxx.js.

This causes the icons to disappear until you triggered the loading of <B/>'s chunk. For example, when using react-router, navigating back and forth between a page which renders <A/>.

I've also managed to make a small repo that just uses useState. The icon won't be displayed until you press the button.

This issue doesn't happen if I import the icon from: @fortawesome/free-solid-svg-icons (the top level of the export).

Also, if I switch the order of the dynamic imports the issue doesn't happen:

// App.tsx
const B = lazy(() => import("./B"));
const A = lazy(() => import("./A"));

(To reproduce, run npm build and then npx serve -s dist)

Reproduction

https://stackblitz.com/edit/vitejs-vite-nkjxsu

System Info

System:
    OS: macOS 12.5.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.22 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.0 - /opt/homebrew/opt/node@16/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.15.0 - /opt/homebrew/opt/node@16/bin/npm
    Watchman: 2022.08.29.00 - /opt/homebrew/bin/watchman
  Browsers:
    Firefox: 104.0.2
    Safari: 15.6.1
  npmPackages:
    @vitejs/plugin-react: 2.1.0 => 2.1.0
    vite: 3.1.0 => 3.1.0

Used Package Manager

yarn

Logs

vite:config bundled config file loaded in 559.10ms +0ms
  vite:esbuild init tsconfck (root: /home/projects/vitejs-vite-nkjxsu) +0ms
  vite:esbuild init tsconfck (root: /home/projects/vitejs-vite-nkjxsu) +1ms
  vite:esbuild init tsconfck (root: /home/projects/vitejs-vite-nkjxsu) +0ms
  vite:esbuild init tsconfck (root: /home/projects/vitejs-vite-nkjxsu) +1ms
  vite:esbuild init tsconfck end +1ms
  vite:esbuild init tsconfck end +0ms
  vite:esbuild init tsconfck end +0ms
  vite:esbuild init tsconfck end +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'vite:build-metadata',
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:react-babel',
  vite:config     'vite:react-refresh',
  vite:config     'vite:react-jsx',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm-helper',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:wasm-fallback',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:force-systemjs-wrap-complete',
  vite:config     'vite:watch-package-data',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:dynamic-import-vars',
  vite:config     'vite:import-glob',
  vite:config     'vite:build-import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter',
  vite:config     'vite:load-fallback'
  vite:config   ],
  vite:config   optimizeDeps: {
  vite:config     disabled: 'build',
  vite:config     force: undefined,
  vite:config     include: [ 'react/jsx-dev-runtime' ],
  vite:config     esbuildOptions: { preserveSymlinks: undefined }
  vite:config   },
  vite:config   build: {
  vite:config     target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ],
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
  vite:config   },
  vite:config   resolve: { dedupe: [ 'react', 'react-dom' ], alias: [ [Object], [Object] ] },
  vite:config   configFile: '/home/projects/vitejs-vite-nkjxsu/vite.config.js',
  vite:config   configFileDependencies: [ '/home/projects/vitejs-vite-nkjxsu/vite.config.js' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     optimizeDeps: { force: undefined },
  vite:config     build: {}
  vite:config   },
  vite:config   root: '/home/projects/vitejs-vite-nkjxsu',
  vite:config   base: '/',
  vite:config   publicDir: '/home/projects/vitejs-vite-nkjxsu/public',
  vite:config   cacheDir: '/home/projects/vitejs-vite-nkjxsu/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   ssr: {
  vite:config     format: 'esm',
  vite:config     target: 'node',
  vite:config     optimizeDeps: { disabled: true, esbuildOptions: [Object] }
  vite:config   },
  vite:config   isWorker: false,
  vite:config   mainConfig: null,
  vite:config   isProduction: true,
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     middlewareMode: false,
  vite:config     fs: { strict: true, allow: [Array], deny: [Array] }
  vite:config   },
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(0) { set: [Function (anonymous)] },
  vite:config   createResolver: [Function: createResolver],
  vite:config   worker: {
  vite:config     format: 'iife',
  vite:config     plugins: [
  vite:config       'vite:build-metadata',
  vite:config       'vite:pre-alias',
  vite:config       'alias',
  vite:config       'vite:modulepreload-polyfill',
  vite:config       'vite:resolve',
  vite:config       'vite:html-inline-proxy',
  vite:config       'vite:css',
  vite:config       'vite:esbuild',
  vite:config       'vite:json',
  vite:config       'vite:wasm-helper',
  vite:config       'vite:worker',
  vite:config       'vite:asset',
  vite:config       'vite:wasm-fallback',
  vite:config       'vite:define',
  vite:config       'vite:css-post',
  vite:config       'vite:build-html',
  vite:config       'vite:worker-import-meta-url',
  vite:config       'vite:force-systemjs-wrap-complete',
  vite:config       'vite:watch-package-data',
  vite:config       'commonjs',
  vite:config       'vite:data-uri',
  vite:config       'vite:asset-import-meta-url',
  vite:config       'vite:dynamic-import-vars',
  vite:config       'vite:import-glob',
  vite:config       'vite:build-import-analysis',
  vite:config       'vite:esbuild-transpile',
  vite:config       'vite:terser',
  vite:config       'vite:reporter',
  vite:config       'vite:load-fallback'
  vite:config     ],
  vite:config     rollupOptions: {},
  vite:config     getSortedPlugins: [Function: getSortedPlugins],
  vite:config     getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config   },
  vite:config   appType: 'spa',
  vite:config   experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },
  vite:config   getSortedPlugins: [Function: getSortedPlugins],
  vite:config   getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config } +8ms
vite v3.1.0 building for production...
✓ 44 modules transformed.
dist/index.html                    0.38 KiB
dist/assets/A.8cf35845.js          0.84 KiB / gzip: 0.54 KiB
dist/assets/B.d3d76902.js          0.15 KiB / gzip: 0.14 KiB
dist/assets/index.es.02a05730.js   66.99 KiB / gzip: 19.01 KiB
dist/assets/index.6a88e9ed.js      140.47 KiB / gzip: 45.23 KiB

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.

Describe the bug

I have a project in library mode that exports a component. Said component uses @mui/material package and consists of the following:

    <Tooltip title={'some title'}>
      <Grid container direction="column" alignItems="center">
        <span >{"some text"}</span>
      </Grid>
    </Tooltip>

If I run the library as standalone project, I get no errors. If I build in development mode vite build --mode development and install the package on another project, I get no errors. But if I build in production mode vite build then when I import it on the other project I get the following warning on console:

Each child in a list should have a unique "key" prop...

Adding a random key to <Grid> component and building for production also removes the warning.

This is not the only situation where this warning pops up, I have at least 3 and they are hard to track. This is just an example I could isolate.

I am also not sure if the error is related to Vite or to Mui.

Reproduction

I created a minimal reproducible example, with instructions:

https://github.com/Vallo/vite-library-mode-unique-key-bug

System Info

System:
    OS: Linux 5.4 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 11.58 GB / 31.22 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 12.22.1 - ~/.nvm/versions/node/v12.22.1/bin/node
    Yarn: 1.22.4 - /usr/bin/yarn
    npm: 8.1.3 - ~/.nvm/versions/node/v12.22.1/bin/npm
  Browsers:
    Chromium: 95.0.4638.69
    Firefox: 94.0

Used Package Manager

npm

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 https://github.com/vuejs/vue-next 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.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update dependency eslint to v9
• chore(deps): update pnpm/action-setup action to v4

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency vite to v5.0.13 [security]
• chore(deps): update dependency express to v4.19.2 [security]
• chore(deps): replace dependency eslint-plugin-node with eslint-plugin-n ^14.0.0
• chore(deps): replace dependency npm-run-all with npm-run-all2 ^5.0.0
• fix(deps): update all non-major dependencies (@babel/core, @babel/plugin-proposal-pipeline-operator, @babel/plugin-transform-react-jsx-self, @babel/plugin-transform-react-jsx-source, @emotion/react, @emotion/styled, @eslint-types/import, @eslint-types/typescript-eslint, @mdx-js/rollup, @types/node, @types/react, @types/react-dom, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, eslint, eslint-define-config, eslint-plugin-import, eslint-plugin-regexp, lint-staged, playwright-chromium, react, react-dom, react-refresh, react-router-dom, simple-git-hooks, tsx, typescript, vitest)
• chore(deps): update dependency @eslint-types/typescript-eslint to v7
• chore(deps): update typescript-eslint monorepo to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Describe the bug

It seems like the magic-string package that is being used by the latest plugin-react does not use jridgewell/sourcemap-codec, however the latest magic-string does.

This is what I get when yarn upgrade is run.

See #2

Reproduction

...

Steps to reproduce

yarn upgrade any project using vite-plugin-react

System Info

@vitejs/[email protected]

Used Package Manager

npm

Logs

[1/4] Resolving packages...
warning @vitejs/plugin-react > magic-string > [email protected]: Please use @jridgewell/sourcemap-codec instead
...

</details>

### Validations

- [X] Follow our [Code of Conduct](https://github.com/vitejs/vite-plugin-react/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/vitejs/vite-plugin-react/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://vitejs.dev/guide).
- [X] Check that there isn't [already an issue](https://github.com/vitejs/vite-plugin-react/issues) that reports the same bug to avoid creating a duplicate.
- [X] Make sure this is a Vite issue and not a framework-specific issue.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vitejs/vite-plugin-react/discussions) or join our [Discord Chat Server](https://chat.vitejs.dev/).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

Describe the bug

Using an /** @jsxImportSource @emotion/react */ directive triggers a warning from the vite:esbuild plugin, which says that React's "automatic" JSX transform must be enabled.
The warning can be silenced with esbuild: { jsx: 'automatic' } in the Vite config, but according to the documentation of @vitejs/plugin-react, the automatic transform is supposed to be enabled by default.
I think the problem appeared with Vite 3 / plugin-react 2.

Reproduction

https://github.com/targos/vite-plugin-react-warning

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (4) x64 Intel(R) Core(TM) i5-4670 CPU @ 3.40GHz
    Memory: 4.76 GB / 15.87 GB
  Binaries:
    Node: 18.2.0 - ~\AppData\Local\Volta\tools\image\node\18.2.0\node.EXE
    npm: 8.9.0 - ~\AppData\Local\Volta\tools\image\node\18.2.0\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (104.0.1293.54)
  npmPackages:
    @vitejs/plugin-react: ^2.0.1 => 2.0.1
    vite: ^3.0.7 => 3.0.7

Used Package Manager

npm

Logs

> npm run build

> [email protected] build
> vite build

vite v3.0.7 building for production...
transforming (3) src\main.jsx[plugin:vite:esbuild] The JSX import source cannot be set without also enabling React's "automatic" JSX transform
2  |  import reactLogo from './assets/react.svg';
3  |  import './App.css';
4  |  /** @jsxImportSource @emotion/react */
   |                       ^
5  |
6  |  import { css } from '@emotion/react';

✓ 62 modules transformed.
dist/assets/react.35ef61ed.svg   4.03 KiB
dist/index.html                  0.44 KiB
dist/assets/index.730dd8c4.css   1.71 KiB / gzip: 0.78 KiB
dist/assets/index.ce345959.js    262.50 KiB / gzip: 64.34 KiB

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.

Describe the bug

Plugin-react-refresh didn't refresh dynamic imported modules.

Reproduction

Repository to reproduce:
https://github.com/Alex-Ferreli/vite-react-hmr-dynamic-import

It's the default react-ts template with a dynamic import of a React component.

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

System:
    OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
    Memory: 404.95 MB / 15.43 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 15.5.0 - ~/.nvm/versions/node/v15.5.0/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 7.3.0 - ~/.nvm/versions/node/v15.5.0/bin/npm
  Browsers:
    Chrome: 89.0.4389.90
    Firefox: 86.0.1
  npmPackages:
    vite: ^2.1.3 => 2.1.3

Used package manager: yarn

Logs

The HMR in console print the parent file:
[vite] hot updated: /src/App.tsx

Before submitting the issue, please make sure you do the following

• [ x] Read the Contributing Guidelines.
• [ x] Read the docs.
• [ x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [ x] Provide a description in this issue that describes the bug.
• [ x] 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/vue-next instead.
• [ x] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

Describe the bug

If we mark a package to pre-bundle with optimizeDeps, all components from the package must have import React statements even if @vitejs/plugin-react is used.

Hopefully this is something that can be fixed because it's fairly annoying to add import React statements in some files and not others. Also, the error would only happen at runtime IF the pre-bundled package is imported. This make it hard to find, especially in bigger projects.

In the provided reproduction repo, the app throws error at runtime saying Word, Is and Bird components do not have import React statements. To fix the problem, a user would have to:
a. Add import React statements to every component under src/ui
b. Remove @/ui at config.optimizeDeps.include[0] which defeats the benefits of pre-bundling, resulting in 4 separate requests instead of 1.

Reproduction

https://stackblitz.com/edit/vite-wkudpx?file=README.md

System Info

Local env:

System:
    OS: macOS 12.0.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 1.36 GB / 64.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.18.2 - ~/.nvm/versions/node/v14.18.2/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.2/bin/npm
    Watchman: 2021.10.18.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 97.0.4692.71
    Safari: 15.1
  npmPackages:
    @vitejs/plugin-react: ^1.0.7 => 1.1.4
    vite: ^2.7.2 => 2.7.10

Reproduction repo:

System:
    OS: Linux undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: Unknown - /bin/jsh
  Binaries:
    Node: 14.16.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /bin/yarn
    npm: 7.17.0 - /bin/npm
  npmPackages:
    @vitejs/plugin-react: ^1.0.7 => 1.1.4 
    vite: ^2.7.2 => 2.7.10

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 https://github.com/vuejs/vue-next 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.

Describe the bug

When running vite in development mode, @babel/plugin-proposal-decorators is not properly applied and any decorator causes an unexpected symbol error.

Reproduction

https://github.com/drthoben/vite-decorators-problem

Steps to reproduce

Run yarn to install dependencies.

Then run yarn build. The build command is running as expected.
Running yarn dev results in the following error:

✘ [ERROR] Unexpected "@"

    src/Root.jsx:17:0:
      17 │ @decorated
         ╵ ^

Build failed with 1 error:
src/Root.jsx:17:0: ERROR: Unexpected "@"

System Info

System:
    OS: macOS 12.6
    CPU: (10) arm64 Apple M1
    Memory: 3.41 GB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.18.0 - ~/.nvm/versions/node/v16.18.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v16.18.0/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Safari: 15.6.1
  npmPackages:
    @vitejs/plugin-react: ^3.0.0 => 3.0.0 
    vite: ^4.0.1 => 4.0.1

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

Describe the bug

HMR does not work when I re-export a component. When I import a component (like "Appreexport") that re-exports another component (like "App"), the HMR does not work when I make some changes to Appreexport.tsx. Instead of HMR, changes in Appreexport.tsx cause page reloading.
The same code works perfectly with create-react-app template

Reproduction

https://stackblitz.com/edit/vitejs-vite-xsazqb?file=src/Appreexport.tsx

Steps to reproduce

1. pnpm create vite
2. select react template
3. pnpm i && pnpm dev
4. create new file named "Appreexport.tsx" and open it
5. add export { default } from "./App" and save it
6. in main.tsx change import App from "./App" to import App from "./Appreexport" and save it
7. do some changes in App.tsx and see that HMR works as expected
8. do some changes in Appreexport.tsx and see that HMR does not work and any change causes page reloading

System Info

System:
    OS: Windows 10 10.0.22623
    CPU: (4) x64 Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz
    Memory: 1.99 GB / 11.90 GB
  Binaries:
    Node: 19.0.1 - D:\ProgramFilesFolder\node.EXE
    Yarn: 1.22.19 - D:\ProgramFilesFolder\yarn.CMD
    npm: 8.19.2 - D:\ProgramFilesFolder\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1037.0), Chromium (108.0.1462.54)
    Internet Explorer: 11.0.22621.1

Used Package Manager

pnpm

Logs

pnpm vite --debug
  vite:config bundled config file loaded in 559.81ms +0ms
  vite:esbuild init tsconfck (root: D:/dev/vite-react-ts) +0ms
  vite:esbuild init tsconfck (root: D:/dev/vite-react-ts) +2ms
  vite:esbuild init tsconfck end +19ms
  vite:esbuild init tsconfck end +1ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:react-babel',
  vite:config     'vite:react-refresh',
  vite:config     'vite:react-jsx',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:optimized-deps',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm-helper',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:wasm-fallback',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:dynamic-import-vars',
  vite:config     'vite:import-glob',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   optimizeDeps: {
  vite:config     disabled: 'build',
  vite:config     force: undefined,
  vite:config     include: [ 'react/jsx-runtime', 'react/jsx-dev-runtime', 'react' ],
  vite:config     esbuildOptions: { preserveSymlinks: false }
  vite:config   },
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     middlewareMode: false,
  vite:config     fs: { strict: true, allow: [Array], deny: [Array] }
  vite:config   },
  vite:config   esbuild: {
  vite:config     jsxDev: true,
  vite:config     jsx: 'automatic',
  vite:config     jsxImportSource: undefined,
  vite:config     jsxSideEffects: false
  vite:config   },
  vite:config   resolve: {
  vite:config     mainFields: [ 'module', 'jsnext:main', 'jsnext' ],
  vite:config     browserField: true,
  vite:config     conditions: [],
  vite:config     extensions: [
  vite:config       '.mjs',  '.js',
  vite:config       '.mts',  '.ts',
  vite:config       '.jsx',  '.tsx',
  vite:config       '.json'
  vite:config     ],
  vite:config     dedupe: [ 'react', 'react-dom' ],
  vite:config     preserveSymlinks: false,
  vite:config     alias: [ [Object], [Object] ]
  vite:config   },
  vite:config   configFile: 'D:/dev/vite-react-ts/vite.config.ts',
  vite:config   configFileDependencies: [ 'D:/dev/vite-react-ts/vite.config.ts' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     optimizeDeps: { force: undefined },
  vite:config     server: {}
  vite:config   },
  vite:config   root: 'D:/dev/vite-react-ts',
  vite:config   base: '/',
  vite:config   rawBase: '/',
  vite:config   publicDir: 'D:\\dev\\vite-react-ts\\public',
  vite:config   cacheDir: 'D:/dev/vite-react-ts/node_modules/.vite',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   ssr: {
  vite:config     format: 'esm',
  vite:config     target: 'node',
  vite:config     optimizeDeps: { disabled: true, esbuildOptions: [Object] }
  vite:config   },
  vite:config   isWorker: false,
  vite:config   mainConfig: null,
  vite:config   isProduction: false,
  vite:config   build: {
  vite:config     target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     copyPublicDir: true,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
  vite:config     modulePreload: { polyfill: true }
  vite:config   },
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(0) {},
  vite:config   createResolver: [Function: createResolver],
  vite:config   worker: {
  vite:config     format: 'iife',
  vite:config     plugins: [
  vite:config       'vite:pre-alias',
  vite:config       'alias',
  vite:config       'vite:modulepreload-polyfill',
  vite:config       'vite:optimized-deps',
  vite:config       'vite:resolve',
  vite:config       'vite:html-inline-proxy',
  vite:config       'vite:css',
  vite:config       'vite:esbuild',
  vite:config       'vite:json',
  vite:config       'vite:wasm-helper',
  vite:config       'vite:worker',
  vite:config       'vite:asset',
  vite:config       'vite:wasm-fallback',
  vite:config       'vite:define',
  vite:config       'vite:css-post',
  vite:config       'vite:worker-import-meta-url',
  vite:config       'vite:asset-import-meta-url',
  vite:config       'vite:dynamic-import-vars',
  vite:config       'vite:import-glob',
  vite:config       'vite:client-inject',
  vite:config       'vite:import-analysis'
  vite:config     ],
  vite:config     rollupOptions: {},
  vite:config     getSortedPlugins: [Function: getSortedPlugins],
  vite:config     getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config   },
  vite:config   appType: 'spa',
  vite:config   experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },
  vite:config   getSortedPlugins: [Function: getSortedPlugins],
  vite:config   getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config } +34ms
  vite:deps Hash is consistent. Skipping. Use --force to override. +0ms

  VITE v4.0.3  ready in 1070 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
  vite:html-fallback Rewriting GET / to /index.html +0ms
  vite:time 89.93ms /index.html +0ms
  vite:resolve 10.75ms D:\dev\vite-react-ts\node_modules\.pnpm\v[email protected]\node_modules\vite\dist\client\client.mjs -> D:/dev/vite-react-ts/node_modules/.pnpm/[email protected]/node_modules/vite/dist/client/client.mjs +0ms
  vite:resolve 27.77ms /@vite/client -> D:/dev/vite-react-ts/node_modules/.pnpm/[email protected]/node_modules/vite/dist/client/client.mjs
 +16ms
  vite:resolve 1.51ms /src/main.tsx -> D:/dev/vite-react-ts/src/main.tsx +98ms
  vite:load 0.07ms [plugin] /@react-refresh +0ms
  vite:import-analysis 0.70ms [no imports] /@react-refresh +0ms
  vite:transform 57.65ms /@react-refresh +0ms
  vite:time 134.85ms /@react-refresh +599ms
  vite:load 322.21ms [fs] /@vite/client +141ms
  vite:load 163.03ms [fs] /src/main.tsx +4ms
  vite:resolve 1.43ms D:\dev\vite-react-ts\node_modules\.pnpm\v[email protected]\node_modules\vite\dist\client\env.mjs -> D:/dev/vite-react-ts/node_modules/.pnpm/[email protected]/node_modules/vite/dist/client/env.mjs +560ms
  vite:resolve 2.35ms @vite/env -> D:/dev/vite-react-ts/node_modules/.pnpm/[email protected]/node_modules/vite/dist/client/env.mjs +1ms   
  vite:resolve 1.56ms /node_modules/.pnpm/[email protected]/node_modules/vite/dist/client/env.mjs -> D:/dev/vite-react-ts/node_modules/.pnpm/[email protected]/node_modules/vite/dist/client/env.mjs +3ms
  vite:import-analysis 10.96ms [1 imports rewritten] node_modules\.pnpm\v[email protected]\node_modules\vite\dist\client\client.mjs +277ms 
  vite:transform 40.12ms /@vite/client +263ms
  vite:time 698.97ms /@vite/client +264ms
  vite:load 12.07ms [fs] /node_modules/.pnpm/[email protected]/node_modules/vite/dist/client/env.mjs +284ms
  vite:resolve 0.06ms react/jsx-dev-runtime -> react/jsx-dev-runtime +44ms
  vite:resolve 0.77ms react/jsx-dev-runtime -> null +4ms
  vite:resolve 1.25ms react -> D:/dev/vite-react-ts/node_modules/.vite/deps/react.js?v=0fe4985a +3ms
  vite:resolve 0.24ms /node_modules/.vite/deps/react.js?v=0fe4985a -> D:/dev/vite-react-ts/node_modules/.vite/deps/react.js?v=0fe4985a +3ms
  vite:import-analysis /node_modules/.vite/deps/react.js?v=0fe4985a needs interop +51ms
  vite:resolve 0.22ms react-dom/client -> D:/dev/vite-react-ts/node_modules/.vite/deps/react-dom_client.js?v=0fe4985a +10ms
  vite:resolve 0.24ms /node_modules/.vite/deps/react-dom_client.js?v=0fe4985a -> D:/dev/vite-react-ts/node_modules/.vite/deps/react-dom_client.js?v=0fe4985a +3ms
  vite:import-analysis /node_modules/.vite/deps/react-dom_client.js?v=0fe4985a needs interop +14ms
  vite:resolve 4.85ms ./Appreexport -> D:/dev/vite-react-ts/src/Appreexport.tsx +9ms
  vite:resolve 1.01ms /src/Appreexport.tsx -> D:/dev/vite-react-ts/src/Appreexport.tsx +2ms
  vite:resolve 0.85ms ./index.css -> D:/dev/vite-react-ts/src/index.css +5ms
  vite:resolve 1.01ms /src/index.css -> D:/dev/vite-react-ts/src/index.css +2ms
  vite:import-analysis 50.69ms [5 imports rewritten] src\main.tsx +25ms
  vite:transform 362.40ms /src/main.tsx +114ms
  vite:optimize-deps load D:/dev/vite-react-ts/node_modules/.vite/deps/react.js +0ms
  vite:optimize-deps load D:/dev/vite-react-ts/node_modules/.vite/deps/react-dom_client.js +0ms
  vite:load 0.13ms [plugin] react/jsx-dev-runtime +90ms
  vite:resolve 0.23ms react/jsx-dev-runtime -> D:/dev/vite-react-ts/node_modules/.vite/deps/react_jsx-dev-runtime.js?v=0fe4985a +45ms
  vite:resolve 0.39ms /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=0fe4985a -> D:/dev/vite-react-ts/node_modules/.vite/deps/react_jsx-dev-runtime.js?v=0fe4985a +2ms
  vite:import-analysis /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=0fe4985a needs interop +40ms
  vite:import-analysis 5.96ms [1 imports rewritten] react/jsx-dev-runtime +2ms
  vite:transform 7.51ms react/jsx-dev-runtime +18ms
  vite:optimize-deps load D:/dev/vite-react-ts/node_modules/.vite/deps/react_jsx-dev-runtime.js +14ms
  vite:import-analysis 0.05ms [no imports] node_modules\.pnpm\v[email protected]\node_modules\vite\dist\client\env.mjs +6ms
  vite:transform 100.56ms /node_modules/.pnpm/[email protected]/node_modules/vite/dist/client/env.mjs +5ms
  vite:time 113.10ms /node_modules/.pnpm/[email protected]/node_modules/vite/dist/client/env.mjs +136ms
  vite:load 34.13ms [plugin] /node_modules/.vite/deps/react.js?v=0fe4985a +31ms
  vite:resolve 0.79ms ./chunk-KVAN6ZZF.js -> D:/dev/vite-react-ts/node_modules/.vite/deps/chunk-KVAN6ZZF.js?v=0fe4985a +35ms       
  vite:resolve 0.20ms /node_modules/.vite/deps/chunk-KVAN6ZZF.js?v=0fe4985a -> D:/dev/vite-react-ts/node_modules/.vite/deps/chunk-KVAN6ZZF.js?v=0fe4985a +1ms
  vite:import-analysis 5.32ms [1 imports rewritten] node_modules\.vite\deps\react.js?v=0fe4985a +28ms
  vite:transform 8.84ms /node_modules/.vite/deps/react.js?v=0fe4985a +30ms
  vite:optimize-deps load D:/dev/vite-react-ts/node_modules/.vite/deps/chunk-KVAN6ZZF.js +34ms
  vite:load 50.78ms [fs] /src/Appreexport.tsx +17ms
  vite:load 82.56ms [fs] /src/index.css +32ms
  vite:load 79.11ms [plugin] /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=0fe4985a +11ms
  vite:import-analysis 2.17ms [1 imports rewritten] node_modules\.vite\deps\react_jsx-dev-runtime.js?v=0fe4985a +55ms
  vite:transform 6.42ms /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=0fe4985a +55ms
  vite:time 801.66ms /src/main.tsx +92ms
  vite:load 113.46ms [plugin] /node_modules/.vite/deps/react-dom_client.js?v=0fe4985a +20ms
  vite:import-analysis 29.71ms [1 imports rewritten] node_modules\.vite\deps\react-dom_client.js?v=0fe4985a +99ms
  vite:transform 48.89ms /node_modules/.vite/deps/react-dom_client.js?v=0fe4985a +98ms
  vite:resolve 1.85ms ./App -> D:/dev/vite-react-ts/src/App.tsx +181ms
  vite:resolve 0.69ms /src/App.tsx -> D:/dev/vite-react-ts/src/App.tsx +3ms
  vite:import-analysis 7.80ms [1 imports rewritten] src\Appreexport.tsx +31ms
  vite:transform 178.53ms /src/Appreexport.tsx +33ms
  vite:cache [304] react/jsx-dev-runtime +0ms
  vite:time 1.39ms /@id/__x00__react/jsx-dev-runtime +141ms
  vite:load 224.42ms [plugin] /node_modules/.vite/deps/chunk-KVAN6ZZF.js?v=0fe4985a +159ms
  vite:import-analysis 1.39ms [no imports] node_modules\.vite\deps\chunk-KVAN6ZZF.js?v=0fe4985a +47ms
  vite:transform 3.13ms /node_modules/.vite/deps/chunk-KVAN6ZZF.js?v=0fe4985a +44ms
  vite:load 45.88ms [fs] /src/App.tsx +9ms
  vite:time 92.13ms /src/Appreexport.tsx +97ms
  vite:import-analysis /node_modules/.vite/deps/react.js?v=0fe4985a needs interop +86ms
  vite:resolve 0.87ms ./assets/react.svg -> D:/dev/vite-react-ts/src/assets/react.svg +138ms
  vite:resolve 1.24ms /src/assets/react.svg -> D:/dev/vite-react-ts/src/assets/react.svg +2ms
  vite:resolve 1.02ms ./App.css -> D:/dev/vite-react-ts/src/App.css +2ms
  vite:resolve 5.89ms /src/App.css -> D:/dev/vite-react-ts/src/App.css +6ms
  vite:hmr [self-accepts] src\App.tsx +0ms
  vite:import-analysis 20.72ms [5 imports rewritten] src\App.tsx +18ms
  vite:transform 102.03ms /src/App.tsx +109ms
  vite:cache [memory] /@react-refresh +0ms
  vite:cache [memory] /node_modules/.vite/deps/react.js?v=0fe4985a +3ms
  vite:cache [memory] react/jsx-dev-runtime +0ms
  vite:load 0.94ms [plugin] /src/assets/react.svg +114ms
  vite:import-analysis 0.02ms [no imports] src\assets\react.svg +19ms
  vite:transform 0.56ms /src/assets/react.svg +15ms
  vite:load 11.99ms [fs] /src/App.css +11ms
  vite:time 7.73ms /src/App.tsx +62ms
  vite:cache [304] /src/assets/react.svg +177ms
  vite:time 1.76ms /src/assets/react.svg?import +18ms
  vite:hmr [self-accepts] src\index.css +91ms
  vite:import-analysis 0.74ms [0 imports rewritten] src\index.css +69ms
  vite:transform 384.02ms /src/index.css +69ms
  vite:time 204.15ms /src/index.css +45ms
  vite:hmr [self-accepts] src\App.css +14ms
  vite:import-analysis 0.68ms [0 imports rewritten] src\App.css +14ms
  vite:transform 74.96ms /src/App.css +13ms
  vite:time 52.55ms /src/App.css +11ms
  vite:time 5.07ms /vite.svg +58ms
  vite:time 8.08ms /src/assets/react.svg +13ms
  vite:deps ✨ static imports crawl ended +7s
  vite:hmr [file change] src/Appreexport.tsx +11s
10:21:31 [vite] page reload src/Appreexport.tsx
  vite:html-fallback Rewriting GET / to /index.html +12s
  vite:time 14.77ms /index.html +11s
  vite:cache [304] /@vite/client +11s
  vite:time 2.21ms /@vite/client +124ms
  vite:load 4.41ms [fs] /src/main.tsx +11s
  vite:import-analysis /node_modules/.vite/deps/react.js?v=0fe4985a needs interop +11s
  vite:import-analysis /node_modules/.vite/deps/react-dom_client.js?v=0fe4985a needs interop +4ms
  vite:import-analysis 21.56ms [5 imports rewritten] src\main.tsx +15ms
  vite:transform 78.17ms /src/main.tsx +11s
  vite:cache [memory] /node_modules/.vite/deps/react.js?v=0fe4985a +11s
  vite:cache [memory] /node_modules/.vite/deps/react-dom_client.js?v=0fe4985a +3ms
  vite:cache [memory] /src/index.css +1ms
  vite:cache [memory] react/jsx-dev-runtime +1ms
  vite:load 2.84ms [fs] /src/Appreexport.tsx +96ms
  vite:time 117.66ms /src/main.tsx +110ms
  vite:import-analysis 6.99ms [1 imports rewritten] src\Appreexport.tsx +61ms
  vite:transform 46.10ms /src/Appreexport.tsx +60ms
  vite:cache [memory] /src/App.tsx +54ms
  vite:cache [304] /@react-refresh +385ms
  vite:time 1.10ms /@react-refresh +275ms
  vite:cache [304] /node_modules/.pnpm/[email protected]/node_modules/vite/dist/client/env.mjs +42ms
  vite:time 2.92ms /node_modules/.pnpm/[email protected]/node_modules/vite/dist/client/env.mjs +42ms
  vite:cache [304] react/jsx-dev-runtime +4ms
  vite:time 0.79ms /@id/__x00__react/jsx-dev-runtime +3ms
  vite:cache [memory] /src/Appreexport.tsx +301ms
  vite:time 2.37ms /src/Appreexport.tsx +18ms
  vite:cache [304] /src/index.css +34ms
  vite:time 2.40ms /src/index.css +17ms
  vite:cache [304] /src/App.tsx +85ms
  vite:time 1.65ms /src/App.tsx +84ms
  vite:cache [304] /src/assets/react.svg +18ms
  vite:time 3.06ms /src/assets/react.svg?import +20ms
  vite:cache [304] /src/App.css +9ms
  vite:time 3.21ms /src/App.css +8ms
  vite:time 0.83ms /vite.svg +70ms
  vite:time 1.20ms /src/assets/react.svg +3ms
  vite:time 0.67ms /vite.svg +70ms

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.