TypeError: Unknown file extension ".css"

[matagaralph]

Describe the bug

I am getting a unknown file extension on the Github Primer package. I read through some older issues where using the deps optimizer was mentioned but that still results in a error. Filed a new issue thinking it is React Router v7 bug #12597 but they confirmed it's a Vite related issue but mostly happens with Vitest #5283. The only things that seem to have worked as mentioned was settings server.deps.inline to true but cannot find this equivalent option when using Vite i'm not using Vitest i cannot figure it out based on the current documentation.

Reproduction

https://github.com/matagaralph/primer-vite

Steps to reproduce

bun install

Next step is to run the deb server to reproduce the error

bun run dev 

System Info

System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
    Memory: 9.85 GB / 15.51 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 22.12.0 - /usr/local/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.9.0 - /usr/local/bin/npm
    bun: 1.1.40 - ~/.bun/bin/bun
    Watchman: 20240414.112832.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 131.0.6778.204
  npmPackages:
    vite: ^5.4.11 => 5.4.11

Used Package Manager

bun

Logs

Vite logs

[vite] Error when evaluating SSR module /app/root.tsx: failed to import "@primer/react"
|- TypeError: Unknown file extension ".css" for /home/mataga/Music/works/primer-vite/node_modules/@primer/react/lib-esm/BaseStyles-5241cbb5.css
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:218:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:244:36)
    at defaultLoad (node:internal/modules/esm/load:122:22)
    at ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:483:32)

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.

[hi-ogawa]

I cannot reproduce the same error about .css. I'm not sure why, but for starter, please provide a reproduction with Node instead of Bun.

FYI, this is my log of bun run dev.

$ bun run dev
$ react-router dev
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
(node:9872) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
11:04:52 AM [vite] Error when evaluating SSR module /components/AppProvider.tsx: failed to import "@primer/react"
|- /home/hiroshi/code/tmp/primer-vite/node_modules/@primer/react/lib-esm/index.js:2
export { default as theme } from './theme.js';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (node:internal/modules/cjs/loader:1378:20)
    at Module._compile (node:internal/modules/cjs/loader:1428:41)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
    at Module.load (node:internal/modules/cjs/loader:1288:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1104:12)
    at cjsLoader (node:internal/modules/esm/translators:346:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:286:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
    at ModuleLoader.import (node:internal/modules/esm/loader:473:24)
    at nodeImport (file:///home/hiroshi/code/tmp/primer-vite/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:53056:15)

I tried bun run --bun dev and that seems to give yet another error though.

---

Also FYI, you may try ssr.noExternal: ['@primer/react'] to make something similar to server.deps.inline on Vitest (though this ended up with yet another error).

[github-actions]

Hello @matagaralph. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs reproduction will be closed if they have no activity within 3 days.

[matagaralph]

I cannot reproduce the same error about .css. I'm not sure why, but for starter, please provide a reproduction with Node instead of Bun.

FYI, this is my log of bun run dev.

$ bun run dev
$ react-router dev
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
(node:9872) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
11:04:52 AM [vite] Error when evaluating SSR module /components/AppProvider.tsx: failed to import "@primer/react"
|- /home/hiroshi/code/tmp/primer-vite/node_modules/@primer/react/lib-esm/index.js:2
export { default as theme } from './theme.js';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (node:internal/modules/cjs/loader:1378:20)
    at Module._compile (node:internal/modules/cjs/loader:1428:41)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
    at Module.load (node:internal/modules/cjs/loader:1288:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1104:12)
    at cjsLoader (node:internal/modules/esm/translators:346:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:286:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
    at ModuleLoader.import (node:internal/modules/esm/loader:473:24)
    at nodeImport (file:///home/hiroshi/code/tmp/primer-vite/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:53056:15)

I tried bun run --bun dev and that seems to give yet another error though.

Also FYI, you may try ssr.noExternal: ['@primer/react'] to make something similar to server.deps.inline on Vitest (though this ended up with yet another error).

Okay let me do that today and try with Node although I'm sure the same error happened.