feat!: support including files in node_modules (#306)

Co-authored-by: Hiroshi Ogawa <[email protected]>
Co-authored-by: sapphi-red <[email protected]>

Author: 3 people

packages/plugin-react-oxc/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Allow processing files in `node_modules`
+
+The default value of `exclude` options is now `[/\/node_modules\//]` to allow processing files in `node_modules` directory. It was previously `[]` and files in `node_modules` was always excluded regardless of the value of `exclude` option.
+
 ### Require Node 20.19+, 22.12+
 
 This plugin now requires Node 20.19+ or 22.12+.

packages/plugin-react-oxc/README.md

@@ -25,7 +25,7 @@ export default defineConfig({
 
 ### include/exclude
 
-Includes `.js`, `.jsx`, `.ts` & `.tsx` by default. This option can be used to add fast refresh to `.mdx` files:
+Includes `.js`, `.jsx`, `.ts` & `.tsx` and excludes `/node_modules/` by default. This option can be used to add fast refresh to `.mdx` files:
 
 ```js
 import { defineConfig } from 'vite'
@@ -40,8 +40,6 @@ export default defineConfig({
 })
 ```
 
-> `node_modules` are never processed by this plugin (but Oxc will)
-
 ### jsxImportSource
 
 Control where the JSX factory is imported from. Default to `'react'`

packages/plugin-react-oxc/src/index.ts

@@ -25,17 +25,11 @@ export interface Options {
 }
 
 const defaultIncludeRE = /\.[tj]sx?(?:$|\?)/
+const defaultExcludeRE = /\/node_modules\//
 
 export default function viteReact(opts: Options = {}): Plugin[] {
   const include = opts.include ?? defaultIncludeRE
-  const exclude = [
-    ...(Array.isArray(opts.exclude)
-      ? opts.exclude
-      : opts.exclude
-        ? [opts.exclude]
-        : []),
-    /\/node_modules\//,
-  ]
+  const exclude = opts.exclude ?? defaultExcludeRE
 
   const jsxImportSource = opts.jsxImportSource ?? 'react'
   const jsxImportRuntime = `${jsxImportSource}/jsx-runtime`

packages/plugin-react/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Allow processing files in `node_modules`
+
+The default value of `exclude` options is now `[/\/node_modules\//]` to allow processing files in `node_modules` directory. It was previously `[]` and files in `node_modules` was always excluded regardless of the value of `exclude` option.
+
 ### `react` and `react-dom` is no longer added to [`resolve.dedupe`](https://vite.dev/config/#resolve-dedupe) automatically
 
 Adding values to `resolve.dedupe` forces Vite to resolve them differently from how Node.js does, which can be confusing and may not be expected. This plugin no longer adds `react` and `react-dom` to `resolve.dedupe` automatically.

packages/plugin-react/README.md

@@ -21,7 +21,7 @@ export default defineConfig({
 
 ### include/exclude
 
-Includes `.js`, `.jsx`, `.ts` & `.tsx` by default. This option can be used to add fast refresh to `.mdx` files:
+Includes `.js`, `.jsx`, `.ts` & `.tsx` and excludes `/node_modules/` by default. This option can be used to add fast refresh to `.mdx` files:
 
 ```js
 import { defineConfig } from 'vite'
@@ -36,8 +36,6 @@ export default defineConfig({
 })
 ```
 
-> `node_modules` are never processed by this plugin (but esbuild will)
-
 ### jsxImportSource
 
 Control where the JSX factory is imported from. Default to `'react'`

packages/plugin-react/src/index.ts

@@ -104,11 +104,12 @@ export type ViteReactPluginApi = {
 }
 
 const defaultIncludeRE = /\.[tj]sx?$/
+const defaultExcludeRE = /\/node_modules\//
 const tsRE = /\.tsx?$/
 
 export default function viteReact(opts: Options = {}): Plugin[] {
   const include = opts.include ?? defaultIncludeRE
-  const exclude = opts.exclude
+  const exclude = opts.exclude ?? defaultExcludeRE
   const filter = createFilter(include, exclude)
 
   const jsxImportSource = opts.jsxImportSource ?? 'react'
@@ -222,17 +223,10 @@ export default function viteReact(opts: Options = {}): Plugin[] {
       filter: {
         id: {
           include: makeIdFiltersToMatchWithQuery(include),
-          exclude: [
-            ...(exclude
-              ? makeIdFiltersToMatchWithQuery(ensureArray(exclude))
-              : []),
-            /\/node_modules\//,
-          ],
+          exclude: makeIdFiltersToMatchWithQuery(exclude),
         },
       },
       async handler(code, id, options) {
-        if (id.includes('/node_modules/')) return
-
         const [filepath] = id.split('?')
         if (!filter(filepath)) return
 
@@ -472,7 +466,3 @@ function getReactCompilerRuntimeModule(
   }
   return moduleName
 }
-
-function ensureArray<T>(value: T | T[]): T[] {
-  return Array.isArray(value) ? value : [value]
-}

playground/include-node-modules/App.jsx

@@ -0,0 +1,17 @@
+import test from '@vitejs/test-package'
+
+function App() {
+  return (
+    <div>
+      <h1>Node Modules Include Test</h1>
+      <p>
+        This playground tests that files in node_modules are processed
+        correctly.
+      </p>
+
+      <p className="result">Result: {'' + test}</p>
+    </div>
+  )
+}
+
+export default App

playground/include-node-modules/__tests__/node-modules-include.spec.ts

@@ -0,0 +1,10 @@
+import { expect, test } from 'vitest'
+import { page } from '~utils'
+
+test('should render', async () => {
+  expect(await page.textContent('h1')).toMatch('Node Modules Include Test')
+})
+
+test('babel should run on files in node_modules', async () => {
+  expect(await page.textContent('.result')).toMatch('Result: true')
+})

playground/include-node-modules/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/include-node-modules/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@vitejs/test-node-modules-include",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/babel__core": "^7.20.5",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "workspace:*",
+    "@vitejs/test-package": "file:./test-package"
+  }
+}