From 9e2a1ea7a11a1f86e3b5a5f0a3eaf71a6a7a592e Mon Sep 17 00:00:00 2001 From: patak Date: Mon, 23 May 2022 07:24:46 +0200 Subject: [PATCH] fix(plugin-react): broken optimized deps dir check (#8255) --- docs/guide/features.md | 2 +- packages/plugin-react/src/index.ts | 10 +++++++++- .../src/jsx-runtime/restore-jsx.ts | 6 ------ .../src/node/__tests__/plugins/import.spec.ts | 20 +++++++++---------- 4 files changed, 20 insertions(+), 18 deletions(-) diff --git a/docs/guide/features.md b/docs/guide/features.md index ef0610111b9709..2006b5850fd4a2 100644 --- a/docs/guide/features.md +++ b/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** diff --git a/packages/plugin-react/src/index.ts b/packages/plugin-react/src/index.ts index 63c950ebf46d8c..e52ad1ba0ba05a 100644 --- a/packages/plugin-react/src/index.ts +++ b/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] diff --git a/packages/plugin-react/src/jsx-runtime/restore-jsx.ts b/packages/plugin-react/src/jsx-runtime/restore-jsx.ts index 28825918895dde..4acb6bb64f5e1b 100644 --- a/packages/plugin-react/src/jsx-runtime/restore-jsx.ts +++ b/packages/plugin-react/src/jsx-runtime/restore-jsx.ts @@ -27,12 +27,6 @@ export async function restoreJSX( code: string, filename: string ): Promise { - // 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) { diff --git a/packages/vite/src/node/__tests__/plugins/import.spec.ts b/packages/vite/src/node/__tests__/plugins/import.spec.ts index 661f35902ab580..d7320a70094a4d 100644 --- a/packages/vite/src/node/__tests__/plugins/import.spec.ts +++ b/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' )