Error when importing CommonJS module that contains files like module.scss.js

[noahmpauls]

Describe the bug

I am importing a CommonJS module installed from NPM. The modue contains files with filenames like PeoplePicker.scss.js. These are JavaScript files, obviously, but the filename contains scss.

I'd expect Vite to handle these like any other JavaScript files when I run the dev server via vite. What actually happens is that it seems like Vite externalizes those files (forgive me if I don't fully understand what's going on, but that's my best guess), and so anything trying to import them as JavaScript is unable to do so. See the error logs.

It seems like Vite is getting tripped up by the scss in the filename. The same thing happens for any ${extension}.js filename where extension is considered an external type. See what I believe to be the relevant file (esbuildDepPlugin.ts).

Reproduction

https://github.com/noahmpauls/vite-commonjs-external-bug

Steps to reproduce

Run npm install followed by npm run -w app dev. The reproduction isn't applicable to the build script.

System Info

System:
    OS: Linux 6.7 Arch Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 2.56 GB / 7.42 GB
    Container: Yes
    Shell: 5.2.26 - /usr/bin/bash
  Binaries:
    Node: 20.9.0 - ~/.local/share/volta/tools/image/node/20.9.0/bin/node
    npm: 10.2.5 - ~/.local/share/volta/tools/image/npm/10.2.5/bin/npm

Used Package Manager

npm

Logs

Click to expand!

  VITE v5.1.5  ready in 150 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
✘ [ERROR] Could not resolve "vite-dep-pre-bundle-external:/home/noahpauls/src/vite-scss-bug/package/test.tsx.js"

    vite:dep-pre-bundle:external-conversion:/home/noahpauls/src/vite-scss-bug/package/test.tsx.js:1:24:
      1 │ ... { default } from "vite-dep-pre-bundle-external:/home/noahpauls/src/vite-scss-bug/package/test.tsx.js"...
        ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The plugin "vite:dep-pre-bundle" didn't set a resolve directory for the file
  "vite:dep-pre-bundle:external-conversion:/home/noahpauls/src/vite-scss-bug/package/test.tsx.js",
  so esbuild did not search for
  "vite-dep-pre-bundle-external:/home/noahpauls/src/vite-scss-bug/package/test.tsx.js" on the file
  system.

✘ [ERROR] Could not resolve "vite-dep-pre-bundle-external:/home/noahpauls/src/vite-scss-bug/package/test.stylus.js"

    vite:dep-pre-bundle:external-conversion:/home/noahpauls/src/vite-scss-bug/package/test.stylus.js:1:24:
      1 │ ... { default } from "vite-dep-pre-bundle-external:/home/noahpauls/src/vite-scss-bug/package/test.stylus....
        ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The plugin "vite:dep-pre-bundle" didn't set a resolve directory for the file
  "vite:dep-pre-bundle:external-conversion:/home/noahpauls/src/vite-scss-bug/package/test.stylus.js",
  so esbuild did not search for
  "vite-dep-pre-bundle-external:/home/noahpauls/src/vite-scss-bug/package/test.stylus.js" on the
  file system.

✘ [ERROR] Could not resolve "vite-dep-pre-bundle-external:/home/noahpauls/src/vite-scss-bug/package/test.astro.js"

    vite:dep-pre-bundle:external-conversion:/home/noahpauls/src/vite-scss-bug/package/test.astro.js:1:24:
      1 │ ... { default } from "vite-dep-pre-bundle-external:/home/noahpauls/src/vite-scss-bug/package/test.astro.j...
        ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The plugin "vite:dep-pre-bundle" didn't set a resolve directory for the file
  "vite:dep-pre-bundle:external-conversion:/home/noahpauls/src/vite-scss-bug/package/test.astro.js",
  so esbuild did not search for
  "vite-dep-pre-bundle-external:/home/noahpauls/src/vite-scss-bug/package/test.astro.js" on the file
  system.

✘ [ERROR] Could not resolve "vite-dep-pre-bundle-external:/home/noahpauls/src/vite-scss-bug/package/test.scss.js"

    vite:dep-pre-bundle:external-conversion:/home/noahpauls/src/vite-scss-bug/package/test.scss.js:1:24:
      1 │ ... { default } from "vite-dep-pre-bundle-external:/home/noahpauls/src/vite-scss-bug/package/test.scss.js...
        ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The plugin "vite:dep-pre-bundle" didn't set a resolve directory for the file
  "vite:dep-pre-bundle:external-conversion:/home/noahpauls/src/vite-scss-bug/package/test.scss.js",
  so esbuild did not search for
  "vite-dep-pre-bundle-external:/home/noahpauls/src/vite-scss-bug/package/test.scss.js" on the file
  system.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[XiSenao]

workaround for the specific scenario you provided to complete the suffix.
https://github.com/noahmpauls/vite-commonjs-external-bug/blob/5a7b36a2ccda8c7de835a6be20742fee9f4c6d71/package/index.js#L1-L5

const { okay } = require("./test.okay.js");
const { scss } = require("./test.scss.js");
const { astro } = require("./test.astro.js");
const { stylus } = require("./test.stylus.js");
const { tsx } = require("./test.tsx.js");

[noahmpauls]

@XiSenao unfortunately the error also occurs when importing packages from NPM, where I don't have control over the code and can't complete the suffix.