TypeError: Unknown file extension ".css"

[Ramon404]

Describe the bug

Vitest is failing the tests due to it not being able to recognise a .css file:

TypeError: Unknown file extension ".css" for ...\node_modules\@fontsource\assistant\200.css

I have tried multiple "solutions" with no success, some include:

• setting up server.deps.inline
• mocking the @fontsource dependency

Here are my project dependencies:

• "react": "^18.2.0",
• "react-dom": "^18.2.0",
• "react-redux": "^9.1.2",
• "react-router-dom": "^6.23.1",
• "@testing-library/jest-dom": "^6.4.5",
• "@testing-library/react": "^16.0.0",
• "jsdom": "^24.1.0",
• "vite": "^5.2.0",
• "vitest": "^2.0.3"

Used Package Manager

npm

[Ramon404]

I have resolved this issue by running npm ls @fontsource/assistant in my project to check which other dependencies are using this package. I then added all the relevant packages to server.deps.inline.

[freirepaulo]

I have the same problem here, and when I try to use the server.deps.inline doesn't work and highlights the deps with this error:

[ILRamon404]

server.deps.inline is part of the test object e.g.

test: {
    server: {
        deps: {
            inline: [...]
        }
    }
}

[nilsbunger]

Setting test.server.deps.inline worked for me. Note that you have to include all packages in the dependency chain if the CSS error comes from a dependency of a dependency.