fix(optimize-deps): don't externalize JS files imported with asset ex…

…tensions (#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 @@ <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

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