Unknown file extension ".css"

mawoka-myblock commented 2 years ago

Describe the bug

I am not able to import .css-files from node_modules, e. g. fontsource-fonts or tippy.js styles, etc. I've submitted a reproduction-url to a SvelteKit-project, since the problem doesn't occur if I use normal vite, only in SvelteKit and if I create a project with the following command: npm create vite-extra@latest -- --template ssr-svelte. The error deosn't occur when building the app, but in dev-mode and preview-mode.

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-nkr8q8?file=src/routes/index.svelte

System Info

System:
    OS: Linux 5.17 Manjaro Linux
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Memory: 3.79 GB / 15.56 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 17.9.0 - ~/.nvm/versions/node/v17.9.0/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v17.9.0/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v17.9.0/bin/npm
    Watchman: 4.9.0 - /usr/bin/watchman
  Browsers:
    Chromium: 103.0.5060.114
  npmPackages:
    vite: ^3.0.1 => 3.0.4 

(Same happens in StackBlitz as well)

Used Package Manager

pnpm

Logs

Click to expand!

```shell ❯ npm run preview -- --host 0.0.0.0 > vite-project@0.0.0 preview > cross-env NODE_ENV=production node server "--host" "0.0.0.0" Server started at http://localhost:5173 TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for /tmp/vite-project/node_modules/@fontsource/marck-script/index.css at new NodeError (node:internal/errors:372:5) at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:80:11) at defaultGetFormat (node:internal/modules/esm/get_format:122:38) at defaultLoad (node:internal/modules/esm/load:21:20) at ESMLoader.load (node:internal/modules/esm/loader:431:26) at ESMLoader.moduleProvider (node:internal/modules/esm/loader:350:22) at new ModuleJob (node:internal/modules/esm/module_job:66:26) at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:369:17) at ESMLoader.getModuleJob (node:internal/modules/esm/loader:328:34) at async ModuleWrap. (node:internal/modules/esm/module_job:82:21) ```

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] 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.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

sapphi-red commented 2 years ago

the problem doesn't occur if I use normal vite, only in SvelteKit and if I create a project with the following command: npm create vite-extra@latest -- --template ssr-svelte.

Just to clarify, do you mean it happens with npm create vite-extra@latest -- --template ssr-svelte?

Also I think #8454 will fix this.

mawoka-myblock commented 2 years ago

the problem doesn't occur if I use normal vite, only in SvelteKit and if I create a project with the following command: npm create vite-extra@latest -- --template ssr-svelte.

Just to clarify, do you mean it happens with npm create vite-extra@latest -- --template ssr-svelte?

Also I think #8454 will fix this.

Yes, it happens with npm create vite-extra@latest -- --template ssr-svelte and I also think that the PR could fix it, but it is a (in my opinion) high priority bug, since it breaks a major feature, which worked before.

sapphi-red commented 2 years ago

For a workaround, you could use this config:

// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';

/** @type {import('vite').UserConfig} */
const config = {
    plugins: [sveltekit()],
    ssr: {
        noExternal: ['@fontsource/major-mono-display']
    }
};

export default config;

vitejs / vite