[nuxt] [request error] [unhandled] [500] Unknown file extension ".css"

[DenFin]

Environment

• Operating System: Darwin
• Node Version: v18.7.0
• Nuxt Version: 3.0.0-rc.12
• Nitro Version: 0.6.0
• Package Manager: [email protected]
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

We have the same problem on Windows and when deploying to Netlify.

Reproduction

https://github.com/DenFin/nuxt3-reproduction https://github.com/DenFin/vue3-library-reproduction

Go to vue3-library-reproduction. Run npm pack. Copy path to .tgz. Go to nuxt3-reproduction and paste path to vue3-library-reproduction.tgz in the package.json. Run yarn generate.

Describe the bug

Disclaimer: I am not sure if this is a problem with Nuxt or with Vite. Since it’s an error message by Nuxt I decided to ask here.

We have a custom component library built with Vue 3. This component library is used in a Nuxt 3 project. Now we added our first component with external css, namely Swiper.js. When we execute yarn generate we get the error [nuxt] [request error] [unhandled] [500] Unknown file extension ".css". The problem only occurs with yarn generate. If we run yarn build it works.

We tried a lot of different settings both in the Vue and the Nuxt project. Nothing worked.

What really confuses me, is that the error message does not say cannot resolve file or something similar, but that it doesn’t know .css

I set up to minimal reproduction projects. Are we missing any specific configuration for Vite?

Additional context

No response

Logs

ERROR  [nuxt] [request error] [unhandled] [500] Unknown file extension ".css" for /Users/username/Workspace/Sandbox/nuxt3-reproduction/node_modules/swiper/swiper.min.css                                                  08:07:45
  at new NodeError (node:internal/errors:387: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:81:20)  
  at nextLoad (node:internal/modules/esm/loader:173:28)  
  at ESMLoader.load (node:internal/modules/esm/loader:616:26)  
  at ESMLoader.moduleProvider (node:internal/modules/esm/loader:472:22)  
  at new ModuleJob (node:internal/modules/esm/module_job:63:26)  
  at #createModuleJob (node:internal/modules/esm/loader:491:17)  
  at ESMLoader.getModuleJob (node:internal/modules/esm/loader:449:34)