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 @@ <h2>Long file name import works</h2>
 
 <script type="module" src="./long-file-name.js"></script>
 
+<h2>Import the CommonJS external package that omits the js suffix</h2>
+<div class="external-package-js"></div>
+<div class="external-package-scss-js"></div>
+<div class="external-package-astro-js"></div>
+<div class="external-package-tsx-js"></div>
+<script type="module">
+  import {
+    astro,
+    okay,
+    scss,
+    tsx,
+  } from '@vitejs/test-dep-cjs-external-package-omit-js-suffix'
+
+  text('.external-package-js', okay())
+  text('.external-package-scss-js', scss())
+  text('.external-package-astro-js', astro())
+  text('.external-package-tsx-js', tsx())
+</script>
+
 <script>
   function text(el, text) {
     document.querySelector(el).textContent = text
diff --git a/playground/optimize-deps/package.json b/playground/optimize-deps/package.json
index 0fbd4b00bfcab4..3e66f57a800bed 100644
--- a/playground/optimize-deps/package.json
+++ b/playground/optimize-deps/package.json
@@ -36,6 +36,7 @@
     "@vitejs/test-dep-with-optional-peer-dep-submodule": "file:./dep-with-optional-peer-dep-submodule",
     "@vitejs/test-dep-non-optimized": "file:./dep-non-optimized",
     "@vitejs/test-added-in-entries": "file:./added-in-entries",
+    "@vitejs/test-dep-cjs-external-package-omit-js-suffix": "file:./dep-cjs-external-package-omit-js-suffix",
     "lodash-es": "^4.17.21",
     "@vitejs/test-nested-exclude": "file:./nested-exclude",
     "phoenix": "^1.7.12",
diff --git a/playground/optimize-deps/vite.config.js b/playground/optimize-deps/vite.config.js
index a2c2fdf3c6d5e7..6ef09488556cc1 100644
--- a/playground/optimize-deps/vite.config.js
+++ b/playground/optimize-deps/vite.config.js
@@ -17,6 +17,7 @@ export default defineConfig({
     include: [
       '@vitejs/test-dep-linked-include',
       '@vitejs/test-nested-exclude > @vitejs/test-nested-include',
+      '@vitejs/test-dep-cjs-external-package-omit-js-suffix',
       // will throw if optimized (should log warning instead)
       '@vitejs/test-non-optimizable-include',
       '@vitejs/test-dep-optimize-exports-with-glob/**/*',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a912f701863eff..7ee5e34a5b5586 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -897,6 +897,9 @@ importers:
       '@vitejs/test-dep-cjs-compiled-from-esm':
         specifier: file:./dep-cjs-compiled-from-esm
         version: file:playground/optimize-deps/dep-cjs-compiled-from-esm
+      '@vitejs/test-dep-cjs-external-package-omit-js-suffix':
+        specifier: file:./dep-cjs-external-package-omit-js-suffix
+        version: file:playground/optimize-deps/dep-cjs-external-package-omit-js-suffix
       '@vitejs/test-dep-cjs-with-assets':
         specifier: file:./dep-cjs-with-assets
         version: file:playground/optimize-deps/dep-cjs-with-assets
@@ -1019,6 +1022,8 @@ importers:
 
   playground/optimize-deps/dep-cjs-compiled-from-esm: {}
 
+  playground/optimize-deps/dep-cjs-external-package-omit-js-suffix: {}
+
   playground/optimize-deps/dep-cjs-with-assets: {}
 
   playground/optimize-deps/dep-css-require: {}
@@ -10867,6 +10872,11 @@ packages:
     name: '@vitejs/test-dep-cjs-compiled-from-esm'
     dev: false
 
+  file:playground/optimize-deps/dep-cjs-external-package-omit-js-suffix:
+    resolution: {directory: playground/optimize-deps/dep-cjs-external-package-omit-js-suffix, type: directory}
+    name: '@vitejs/test-dep-cjs-external-package-omit-js-suffix'
+    dev: false
+
   file:playground/optimize-deps/dep-cjs-with-assets:
     resolution: {directory: playground/optimize-deps/dep-cjs-with-assets, type: directory}
     name: '@vitejs/test-dep-cjs-with-assets'