fix(plugin-react): return code if should skip in transform (fix #7586) (#8676)

Author: ZYSzys

packages/plugin-react/src/index.ts

@@ -276,7 +276,10 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
           !(isProjectFile && babelOptions.babelrc)
 
         if (shouldSkip) {
-          return // Avoid parsing if no plugins exist.
+          // Avoid parsing if no plugins exist.
+          return {
+            code
+          }
         }
 
         const parserPlugins: typeof babelOptions.parserOpts.plugins = [

playground/react-classic/App.jsx

@@ -0,0 +1,30 @@
+import { useState } from 'react'
+
+function App() {
+  const [count, setCount] = useState(0)
+  return (
+    <div className="App">
+      <header className="App-header">
+        <h1>Hello Vite + React</h1>
+        <p>
+          <button onClick={() => setCount((count) => count + 1)}>
+            count is: {count}
+          </button>
+        </p>
+        <p>
+          Edit <code>App.jsx</code> and save to test HMR updates.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+    </div>
+  )
+}
+
+export default App

playground/react-classic/__tests__/react.spec.ts

@@ -0,0 +1,38 @@
+import { editFile, isServe, page, untilUpdated } from '~utils'
+
+test('should render', async () => {
+  expect(await page.textContent('h1')).toMatch('Hello Vite + React')
+})
+
+test('should update', async () => {
+  expect(await page.textContent('button')).toMatch('count is: 0')
+  await page.click('button')
+  expect(await page.textContent('button')).toMatch('count is: 1')
+})
+
+test('should hmr', async () => {
+  editFile('App.jsx', (code) => code.replace('Vite + React', 'Updated'))
+  await untilUpdated(() => page.textContent('h1'), 'Hello Updated')
+  // preserve state
+  expect(await page.textContent('button')).toMatch('count is: 1')
+})
+
+test.runIf(isServe)(
+  'should have annotated jsx with file location metadata',
+  async () => {
+    const meta = await page.evaluate(() => {
+      const button = document.querySelector('button')
+      const key = Object.keys(button).find(
+        (key) => key.indexOf('__reactFiber') === 0
+      )
+      return button[key]._debugSource
+    })
+    // If the evaluate call doesn't crash, and the returned metadata has
+    // the expected fields, we're good.
+    expect(Object.keys(meta).sort()).toEqual([
+      'columnNumber',
+      'fileName',
+      'lineNumber'
+    ])
+  }
+)

playground/react-classic/index.html

@@ -0,0 +1,10 @@
+<div id="app"></div>
+<script type="module">
+  import React from 'react'
+  import ReactDOM from 'react-dom/client'
+  import App from './App.jsx'
+
+  ReactDOM.createRoot(document.getElementById('app')).render(
+    React.createElement(App)
+  )
+</script>

playground/react-classic/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "test-react-classic",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../packages/vite/bin/vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "workspace:*"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env"
+    ]
+  }
+}

playground/react-classic/vite.config.ts

@@ -0,0 +1,16 @@
+import react from '@vitejs/plugin-react'
+import type { UserConfig } from 'vite'
+
+const config: UserConfig = {
+  plugins: [
+    react({
+      jsxRuntime: 'classic'
+    })
+  ],
+  build: {
+    // to make tests faster
+    minify: false
+  }
+}
+
+export default config