Getting Unknown file extension ".css" when using Primer with React Router v7

[matagaralph]

Description

Recently got interested in this design system. Wanted to use the design system with React Router v7 but i am getting a unknown file extension with the GitHub Primer react package. I read through some older issues but couldn't find a fix for the 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. Thought it would be great to hear from you champions maybe i missing something.

[vite] Internal server error: Unknown file extension ".css" for /home/mataga/Music/works/primer-vite/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]._qidmnurlvmuvtvdhohvh5nsoum/node_modules/@primer/react/lib-esm/SegmentedControl/SegmentedControl-09e53f7c.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 async nextLoad (node:internal/modules/esm/hooks:748:22)
      at async Hooks.load (node:internal/modules/esm/hooks:385:20)
      at async handleMessage (node:internal/modules/esm/worker:199:18)

Steps to reproduce

1. Project repo can be found at project repo

2. Clone project to install the dependencies, the project uses pnpm

3. Run dev script to reproduce the same error or issue

   pnpm run dev
   

Version

v37.8.0

Browser

Chrome, Firefox

[Jumaa786]

[vite] Internal server error: Unknown file extension ".css" for /home/mataga/Music/works/primer-vite/node_modules/.pnpm/@primer+react@37.8.0_@types+react-dom@18.3.1_@types[email protected][email protected][email protected]._qidmnurlvmuvtvdhohvh5nsoum/node_modules/@primer/react/lib-esm/SegmentedControl/SegmentedControl-09e53f7c.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 async nextLoad (node:internal/modules/esm/hooks:748:22)
at async Hooks.load (node:internal/modules/esm/hooks:385:20)
at async handleMessage (node:internal/modules/esm/worker:199:18)