fix(plugin-react): broken optimized deps dir check (#8255)

Author: patak-dev

docs/guide/features.md

@@ -14,7 +14,7 @@ The above will throw an error in the browser. Vite will detect such bare module
 
 1. [Pre-bundle](./dep-pre-bundling) them to improve page loading speed and convert CommonJS / UMD modules to ESM. The pre-bundling step is performed with [esbuild](http://esbuild.github.io/) and makes Vite's cold start time significantly faster than any JavaScript-based bundler.
 
-2. Rewrite the imports to valid URLs like `/node_modules/.vite/my-dep.js?v=f3sf2ebd` so that the browser can import them properly.
+2. Rewrite the imports to valid URLs like `/node_modules/.vite/deps/my-dep.js?v=f3sf2ebd` so that the browser can import them properly.
 
 **Dependencies are Strongly Cached**
 

packages/plugin-react/src/index.ts

@@ -1,7 +1,9 @@
+import path from 'path'
 import type { ParserOptions, TransformOptions, types as t } from '@babel/core'
 import * as babel from '@babel/core'
 import { createFilter } from '@rollup/pluginutils'
 import resolve from 'resolve'
+import { normalizePath } from 'vite'
 import type { Plugin, PluginOption, ResolvedConfig } from 'vite'
 import {
   addRefreshWrapper,
@@ -91,6 +93,7 @@ declare module 'vite' {
 export default function viteReact(opts: Options = {}): PluginOption[] {
   // Provide default values for Rollup compat.
   let base = '/'
+  let resolvedCacheDir: string
   let filter = createFilter(opts.include, opts.exclude)
   let isProduction = true
   let projectRoot = process.cwd()
@@ -119,6 +122,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
     configResolved(config) {
       base = config.base
       projectRoot = config.root
+      resolvedCacheDir = normalizePath(path.resolve(config.cacheDir))
       filter = createFilter(opts.include, opts.exclude, {
         resolve: projectRoot
       })
@@ -209,8 +213,12 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
             // By reverse-compiling "React.createElement" calls into JSX,
             // React elements provided by dependencies will also use the
             // automatic runtime!
+            // Avoid parsing the optimized react-dom since it will never
+            // contain compiled JSX and it's a pretty big file (800kb).
+            const isOptimizedReactDom =
+              id.startsWith(resolvedCacheDir) && id.includes('/react-dom.js')
             const [restoredAst, isCommonJS] =
-              !isProjectFile && !isJSX
+              !isProjectFile && !isJSX && !isOptimizedReactDom
                 ? await restoreJSX(babel, code, id)
                 : [null, false]
 

packages/plugin-react/src/jsx-runtime/restore-jsx.ts

@@ -27,12 +27,6 @@ export async function restoreJSX(
   code: string,
   filename: string
 ): Promise<RestoredJSX> {
-  // Avoid parsing the optimized react-dom since it will never
-  // contain compiled JSX and it's a pretty big file (800kb).
-  if (filename.includes('/.vite/react-dom.js')) {
-    return jsxNotFound
-  }
-
   const [reactAlias, isCommonJS] = parseReactAlias(code)
 
   if (!reactAlias) {

packages/vite/src/node/__tests__/plugins/import.spec.ts

@@ -2,7 +2,7 @@ import { describe, expect, test } from 'vitest'
 import { transformCjsImport } from '../../plugins/importAnalysis'
 
 describe('transformCjsImport', () => {
-  const url = './node_modules/.vite/react.js'
+  const url = './node_modules/.vite/deps/react.js'
   const rawUrl = 'react'
 
   test('import specifier', () => {
@@ -14,7 +14,7 @@ describe('transformCjsImport', () => {
         0
       )
     ).toBe(
-      'import __vite__cjsImport0_react from "./node_modules/.vite/react.js"; ' +
+      'import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js"; ' +
         'const useState = __vite__cjsImport0_react["useState"]; ' +
         'const Component = __vite__cjsImport0_react["Component"]'
     )
@@ -24,7 +24,7 @@ describe('transformCjsImport', () => {
     expect(
       transformCjsImport('import React from "react"', url, rawUrl, 0)
     ).toBe(
-      'import __vite__cjsImport0_react from "./node_modules/.vite/react.js"; ' +
+      'import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js"; ' +
         'const React = __vite__cjsImport0_react.__esModule ? __vite__cjsImport0_react.default : __vite__cjsImport0_react'
     )
 
@@ -36,7 +36,7 @@ describe('transformCjsImport', () => {
         0
       )
     ).toBe(
-      'import __vite__cjsImport0_react from "./node_modules/.vite/react.js"; ' +
+      'import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js"; ' +
         'const React = __vite__cjsImport0_react.__esModule ? __vite__cjsImport0_react.default : __vite__cjsImport0_react'
     )
   })
@@ -45,7 +45,7 @@ describe('transformCjsImport', () => {
     expect(
       transformCjsImport('import * as react from "react"', url, rawUrl, 0)
     ).toBe(
-      'import __vite__cjsImport0_react from "./node_modules/.vite/react.js"; ' +
+      'import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js"; ' +
         'const react = __vite__cjsImport0_react'
     )
   })
@@ -69,7 +69,7 @@ describe('transformCjsImport', () => {
         0
       )
     ).toBe(
-      'import __vite__cjsImport0_react from "./node_modules/.vite/react.js"; ' +
+      'import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js"; ' +
         'const useState = __vite__cjsImport0_react["useState"]; ' +
         'const Component = __vite__cjsImport0_react["Component"]; ' +
         'export { useState, Component }'
@@ -83,7 +83,7 @@ describe('transformCjsImport', () => {
         0
       )
     ).toBe(
-      'import __vite__cjsImport0_react from "./node_modules/.vite/react.js"; ' +
+      'import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js"; ' +
         'const useStateAlias = __vite__cjsImport0_react["useState"]; ' +
         'const ComponentAlias = __vite__cjsImport0_react["Component"]; ' +
         'export { useStateAlias, ComponentAlias }'
@@ -94,7 +94,7 @@ describe('transformCjsImport', () => {
     expect(
       transformCjsImport('export { default } from "react"', url, rawUrl, 0)
     ).toBe(
-      'import __vite__cjsImport0_react from "./node_modules/.vite/react.js"; ' +
+      'import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js"; ' +
         'const __vite__cjsExportDefault_0 = __vite__cjsImport0_react.__esModule ? __vite__cjsImport0_react.default : __vite__cjsImport0_react; ' +
         'export default __vite__cjsExportDefault_0'
     )
@@ -107,7 +107,7 @@ describe('transformCjsImport', () => {
         0
       )
     ).toBe(
-      'import __vite__cjsImport0_react from "./node_modules/.vite/react.js"; ' +
+      'import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js"; ' +
         'const React = __vite__cjsImport0_react.__esModule ? __vite__cjsImport0_react.default : __vite__cjsImport0_react; ' +
         'export { React }'
     )
@@ -120,7 +120,7 @@ describe('transformCjsImport', () => {
         0
       )
     ).toBe(
-      'import __vite__cjsImport0_react from "./node_modules/.vite/react.js"; ' +
+      'import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js"; ' +
         'const __vite__cjsExportDefault_0 = __vite__cjsImport0_react["Component"]; ' +
         'export default __vite__cjsExportDefault_0'
     )