From 416184376e128611215d257cc3ea6c1b23e61f2f Mon Sep 17 00:00:00 2001 From: proc07 <790847400@qq.com> Date: Thu, 30 May 2024 14:58:10 +0800 Subject: [PATCH] fix(optimize-deps): don't externalize JS files imported with asset extensions (#16242) --- .../src/node/optimizer/esbuildDepPlugin.ts | 8 ++++++++ .../__tests__/optimize-deps.spec.ts | 15 +++++++++++++++ .../index.js | 6 ++++++ .../package.json | 6 ++++++ .../test.astro.js | 5 +++++ .../test.okay.js | 5 +++++ .../test.scss.js | 5 +++++ .../test.tsx.js | 5 +++++ playground/optimize-deps/index.html | 19 +++++++++++++++++++ playground/optimize-deps/package.json | 1 + playground/optimize-deps/vite.config.js | 1 + pnpm-lock.yaml | 10 ++++++++++ 12 files changed, 86 insertions(+) create mode 100644 playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/index.js create mode 100644 playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/package.json create mode 100644 playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/test.astro.js create mode 100644 playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/test.okay.js create mode 100644 playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/test.scss.js create mode 100644 playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/test.tsx.js diff --git a/packages/vite/src/node/optimizer/esbuildDepPlugin.ts b/packages/vite/src/node/optimizer/esbuildDepPlugin.ts index 08b1abb72d48e3..1f4c4dab16748d 100644 --- a/packages/vite/src/node/optimizer/esbuildDepPlugin.ts +++ b/packages/vite/src/node/optimizer/esbuildDepPlugin.ts @@ -155,6 +155,14 @@ export function esbuildDepPlugin( const resolved = await resolve(id, importer, kind) if (resolved) { if (kind === 'require-call') { + // #16116 fix: Import the module.scss path, which is actually module.scss.js + if (resolved.endsWith('.js')) { + return { + path: resolved, + external: false, + } + } + // here it is not set to `external: true` to convert `require` to `import` return { path: resolved, diff --git a/playground/optimize-deps/__tests__/optimize-deps.spec.ts b/playground/optimize-deps/__tests__/optimize-deps.spec.ts index ee691fddc4c686..d6c328b9216009 100644 --- a/playground/optimize-deps/__tests__/optimize-deps.spec.ts +++ b/playground/optimize-deps/__tests__/optimize-deps.spec.ts @@ -331,3 +331,18 @@ test.runIf(isServe)('warn on incompatible dependency', () => { ), ) }) + +test('import the CommonJS external package that omits the js suffix', async () => { + await expectWithRetry(() => page.textContent('.external-package-js')).toBe( + 'okay', + ) + await expectWithRetry(() => + page.textContent('.external-package-scss-js'), + ).toBe('scss') + await expectWithRetry(() => + page.textContent('.external-package-astro-js'), + ).toBe('astro') + await expectWithRetry(() => + page.textContent('.external-package-tsx-js'), + ).toBe('tsx') +}) diff --git a/playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/index.js b/playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/index.js new file mode 100644 index 00000000000000..c3bcc276762093 --- /dev/null +++ b/playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/index.js @@ -0,0 +1,6 @@ +const { okay } = require('./test.okay') +const { scss } = require('./test.scss') +const { astro } = require('./test.astro') +const { tsx } = require('./test.tsx') + +module.exports = { okay, scss, astro, tsx } diff --git a/playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/package.json b/playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/package.json new file mode 100644 index 00000000000000..c0e4afb3259b07 --- /dev/null +++ b/playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/package.json @@ -0,0 +1,6 @@ +{ + "name": "@vitejs/test-dep-cjs-external-package-omit-js-suffix", + "private": true, + "version": "0.0.0", + "main": "index.js" +} diff --git a/playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/test.astro.js b/playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/test.astro.js new file mode 100644 index 00000000000000..337124ff2857bc --- /dev/null +++ b/playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/test.astro.js @@ -0,0 +1,5 @@ +function astro() { + return 'astro' +} + +module.exports = { astro } diff --git a/playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/test.okay.js b/playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/test.okay.js new file mode 100644 index 00000000000000..b8913f7c835d9c --- /dev/null +++ b/playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/test.okay.js @@ -0,0 +1,5 @@ +function okay() { + return 'okay' +} + +module.exports = { okay } diff --git a/playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/test.scss.js b/playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/test.scss.js new file mode 100644 index 00000000000000..507ebe60f429d3 --- /dev/null +++ b/playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/test.scss.js @@ -0,0 +1,5 @@ +function scss() { + return 'scss' +} + +module.exports = { scss } diff --git a/playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/test.tsx.js b/playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/test.tsx.js new file mode 100644 index 00000000000000..6edc349a1880c3 --- /dev/null +++ b/playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/test.tsx.js @@ -0,0 +1,5 @@ +function tsx() { + return 'tsx' +} + +module.exports = { tsx } diff --git a/playground/optimize-deps/index.html b/playground/optimize-deps/index.html index 9b992b7dd4892a..b98a3174497ef6 100644 --- a/playground/optimize-deps/index.html +++ b/playground/optimize-deps/index.html @@ -110,6 +110,25 @@

Long file name import works

+

Import the CommonJS external package that omits the js suffix

+
+
+
+
+ +