fix(optimize-deps): don't externalize JS files imported with asset extensions (#16242)

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,

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')
+})

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 }

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"
+}

playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/test.astro.js

@@ -0,0 +1,5 @@
+function astro() {
+  return 'astro'
+}
+
+module.exports = { astro }

playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/test.okay.js

@@ -0,0 +1,5 @@
+function okay() {
+  return 'okay'
+}
+
+module.exports = { okay }

playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/test.scss.js

@@ -0,0 +1,5 @@
+function scss() {
+  return 'scss'
+}
+
+module.exports = { scss }

playground/optimize-deps/dep-cjs-external-package-omit-js-suffix/test.tsx.js

@@ -0,0 +1,5 @@
+function tsx() {
+  return 'tsx'
+}
+
+module.exports = { tsx }

playground/optimize-deps/index.html

@@ -110,6 +110,25 @@
 
 <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

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",

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/**/*',

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'