fix(plugin-react): account for querystring in transform hook (#5333)

vitejs · Oct 19, 2021 · 13c3813 · 13c3813
1 parent 96591bf
commit 13c3813
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 6 deletions.
diff --git a/packages/playground/react/App.jsx b/packages/playground/react/App.jsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import Dummy from './components/Dummy?qs-should-not-break-plugin-react'
 
 function App() {
   const [count, setCount] = useState(0)
@@ -23,6 +24,8 @@ function App() {
           Learn React
         </a>
       </header>
+
+      <Dummy />
     </div>
   )
 }

diff --git a/packages/playground/react/components/Dummy.jsx b/packages/playground/react/components/Dummy.jsx
@@ -0,0 +1,3 @@
+export default function Dummy() {
+  return <></>
+}
diff --git a/packages/plugin-react/src/index.ts b/packages/plugin-react/src/index.ts
@@ -64,6 +64,9 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
   // - import React, {useEffect} from 'react';
   const importReactRE = /(^|\n)import\s+(\*\s+as\s+)?React(,|\s+)/
 
+  // Any extension, including compound ones like '.bs.js'
+  const fileExtensionRE = /\.[^\/\s\?]+$/
+
   const viteBabel: Plugin = {
     name: 'vite:react-babel',
     enforce: 'pre',
@@ -96,7 +99,14 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
       )
     },
     async transform(code, id, ssr) {
-      if (/\.(mjs|[tj]sx?)$/.test(id)) {
+      // File extension could be mocked/overriden in querystring.
+      const [filepath, querystring = ''] = id.split('?')
+      const [extension = ''] =
+        querystring.match(fileExtensionRE) ||
+        filepath.match(fileExtensionRE) ||
+        []
+
+      if (/\.(mjs|[tj]sx?)$/.test(extension)) {
         const plugins = [...userPlugins]
 
         const parserPlugins: typeof userParserPlugins = [
@@ -111,11 +121,11 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
           'classPrivateMethods'
         ]
 
-        if (!id.endsWith('.ts')) {
+        if (!extension.endsWith('.ts')) {
           parserPlugins.push('jsx')
         }
 
-        const isTypeScript = /\.tsx?$/.test(id)
+        const isTypeScript = /\.tsx?$/.test(extension)
         if (isTypeScript) {
           parserPlugins.push('typescript')
         }
@@ -125,7 +135,8 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
         let useFastRefresh = false
         if (!skipFastRefresh && !ssr && !isNodeModules) {
           // Modules with .js or .ts extension must import React.
-          const isReactModule = id.endsWith('x') || code.includes('react')
+          const isReactModule =
+            extension.endsWith('x') || code.includes('react')
           if (isReactModule && filter(id)) {
             useFastRefresh = true
             plugins.push([
@@ -136,7 +147,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
         }
 
         let ast: t.File | null | undefined
-        if (isNodeModules || id.endsWith('x')) {
+        if (isNodeModules || extension.endsWith('x')) {
           if (useAutomaticRuntime) {
             // By reverse-compiling "React.createElement" calls into JSX,
             // React elements provided by dependencies will also use the
@@ -179,7 +190,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
           }
         }
 
-        const isReasonReact = id.endsWith('.bs.js')
+        const isReasonReact = extension.endsWith('.bs.js')
 
         const babelOpts: TransformOptions = {
           babelrc: false,