From 9f8812a2ccef2ae487397c6406c3ad8a5c79e018 Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Mon, 18 Oct 2021 17:47:54 +0900
Subject: [PATCH 1/3] test(plugin-react): imports with querystring failing test

---
 packages/playground/react/App.jsx              | 3 +++
 packages/playground/react/components/Dummy.jsx | 3 +++
 2 files changed, 6 insertions(+)
 create mode 100644 packages/playground/react/components/Dummy.jsx

diff --git a/packages/playground/react/App.jsx b/packages/playground/react/App.jsx
index 1de7461b163776..70d1f961b8cce9 100644
--- 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
new file mode 100644
index 00000000000000..27ec3c21de30fd
--- /dev/null
+++ b/packages/playground/react/components/Dummy.jsx
@@ -0,0 +1,3 @@
+export default function Dummy() {
+  return <></>
+}

From 2144f873dbc8754c37047e5d07665a47a5f491df Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Mon, 18 Oct 2021 17:48:05 +0900
Subject: [PATCH 2/3] fix(plugin-react): ignore querystring when checking file
 extension

---
 packages/plugin-react/src/index.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/plugin-react/src/index.ts b/packages/plugin-react/src/index.ts
index 2cd118099594fb..9e1dcdd8ae577e 100644
--- a/packages/plugin-react/src/index.ts
+++ b/packages/plugin-react/src/index.ts
@@ -96,6 +96,9 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
       )
     },
     async transform(code, id, ssr) {
+      // Remove querystring to check file extension.
+      id = id.split('?')[0]
+
       if (/\.(mjs|[tj]sx?)$/.test(id)) {
         const plugins = [...userPlugins]
 

From 9083ebe7f2eebe6619a586315de1b11f0fd7994a Mon Sep 17 00:00:00 2001
From: Fran Dios <fran.dios@shopify.com>
Date: Tue, 19 Oct 2021 13:01:48 +0900
Subject: [PATCH 3/3] fix(plugin-react): use extension mocked in querystring if
 provided

---
 packages/plugin-react/src/index.ts | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/packages/plugin-react/src/index.ts b/packages/plugin-react/src/index.ts
index 9e1dcdd8ae577e..b53ed9121fb9e6 100644
--- 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,10 +99,14 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
       )
     },
     async transform(code, id, ssr) {
-      // Remove querystring to check file extension.
-      id = id.split('?')[0]
+      // 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(id)) {
+      if (/\.(mjs|[tj]sx?)$/.test(extension)) {
         const plugins = [...userPlugins]
 
         const parserPlugins: typeof userParserPlugins = [
@@ -114,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')
         }
@@ -128,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([
@@ -139,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
@@ -182,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,