diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 32cb2bbf3..f1a4e84dc 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -117,9 +117,9 @@ To use breakpoints and explore code execution, you can use the ["Run and Debug"]
 
 Some errors are masked and hidden away because of the layers of abstraction and sandboxed nature added by Vitest, Playwright, and Chromium. In order to see what's actually going wrong and the contents of the devtools console in those instances, follow this setup:
 
-1. Add a `debugger` statement to the `playground/vitestSetup.ts` -> `afterAll` hook. This will pause execution before the tests quit and the Playwright browser instance exits.
+1. Add a `debugger` statement to the `playground/vitestSetup.ts` -> `afterAll` hook. This will pause execution before the tests quit and the Playwright browser instance exits. You can also add `debugger` statements in your tests (`.spec.ts`) files.
 
-2. Run the tests with the `debug-serve` script command, which will enable remote debugging: `pnpm run debug-serve react-sourcemap`.
+2. Run the tests with the `debug-serve` script command, which will enable remote debugging: `pnpm run debug-serve react-sourcemap`. Remember to run this command within the **"JavaScript Debug Terminal"** of VS Code.
 
 3. Wait for inspector devtools to open in your browser and the debugger to attach.
 
diff --git a/packages/plugin-react/src/index.ts b/packages/plugin-react/src/index.ts
index 3db4d9922..82901d7a9 100644
--- a/packages/plugin-react/src/index.ts
+++ b/packages/plugin-react/src/index.ts
@@ -173,8 +173,8 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
         !ssr &&
         (isJSX ||
           (opts.jsxRuntime === 'classic'
-            ? code.includes(devRuntime)
-            : importReactRE.test(code)))
+            ? importReactRE.test(code)
+            : code.includes(devRuntime)))
       if (useFastRefresh) {
         plugins.push([
           await loadPlugin('react-refresh/babel'),
diff --git a/playground/mdx/__tests__/mdx.spec.ts b/playground/mdx/__tests__/mdx.spec.ts
index 8ec808677..ccf2aa854 100644
--- a/playground/mdx/__tests__/mdx.spec.ts
+++ b/playground/mdx/__tests__/mdx.spec.ts
@@ -11,6 +11,12 @@ test('should render', async () => {
   expect(await page.textContent('h1')).toMatch('Vite + MDX')
 })
 
+test('.md extension should work', async () => {
+  expect(await page.getByText('.md extension works.').textContent()).toEqual(
+    '.md extension works. This is bold text.',
+  )
+})
+
 if (isServe) {
   test('should hmr', async () => {
     editFile('src/demo.mdx', (code) => code.replace('Vite + MDX', 'Updated'))
@@ -20,4 +26,18 @@ if (isServe) {
     )
     await untilUpdated(() => page.textContent('h1'), 'Updated')
   })
+
+  test('should hmr with .md extension', async () => {
+    await untilBrowserLogAfter(
+      () =>
+        editFile('src/demo2.md', (code) =>
+          code.replace('`.md` extension works.', '`.md` extension hmr works.'),
+        ),
+      '[vite] hot updated: /src/demo2.md',
+    )
+    await untilUpdated(
+      () => page.getByText('.md extension hmr works.').textContent(),
+      '.md extension hmr works. This is bold text.',
+    )
+  })
 }
diff --git a/playground/mdx/src/demo2.md b/playground/mdx/src/demo2.md
new file mode 100644
index 000000000..a56493179
--- /dev/null
+++ b/playground/mdx/src/demo2.md
@@ -0,0 +1,3 @@
+## test md extension
+
+`.md` extension works. This is **bold text**.
diff --git a/playground/mdx/src/main.tsx b/playground/mdx/src/main.tsx
index 4c8ea96d4..2d7788204 100644
--- a/playground/mdx/src/main.tsx
+++ b/playground/mdx/src/main.tsx
@@ -1,9 +1,11 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import Demo from './demo.mdx'
+import Demo2 from './demo2.md'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <Demo />
+    <Demo2 />
   </React.StrictMode>,
 )
diff --git a/playground/mdx/src/vite-env.d.ts b/playground/mdx/src/vite-env.d.ts
index 8529632aa..00b6972e6 100644
--- a/playground/mdx/src/vite-env.d.ts
+++ b/playground/mdx/src/vite-env.d.ts
@@ -4,3 +4,8 @@ declare module '*.mdx' {
   import { JSX } from 'react'
   export default () => JSX.Element
 }
+
+declare module '*.md' {
+  import { JSX } from 'react'
+  export default () => JSX.Element
+}
diff --git a/playground/mdx/vite.config.ts b/playground/mdx/vite.config.ts
index ab22cb71e..50b88f8d4 100644
--- a/playground/mdx/vite.config.ts
+++ b/playground/mdx/vite.config.ts
@@ -6,6 +6,6 @@ import mdx from '@mdx-js/rollup'
 export default defineConfig({
   plugins: [
     { enforce: 'pre', ...mdx() },
-    react({ include: /\.(mdx|ts|tsx)$/ }),
+    react({ include: /\.(mdx|md|ts|tsx)$/ }),
   ],
 })