Unknown file extension ".css" for Vuetify components

[davedub]

Description

I am trying to make vite-plugin-ssr work in a pre-existing Vuetify project. A vue file (\about\index.vue) is trying to load a component vue file from the same folder --

<script setup> import About from "./about.component.vue"; </script>

The component file references Vuetify's grid system in the template. The error message below is thrown. I can add a link to the repo if that's useful. Any guidance, much appreciated. Thanks.

Error Message + Error Stack

VITE v3.2.5 ready in 341 ms
➜ Local: http://localhost3001/
➜ Network: use --host to expose
5:40:58 PM [vite-plugin-ssr] HTTP Request 200 /

5:41:01 PM [vite-plugin-ssr] HTTP Request ERR /about

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for /Users/mainfloor/Projects/Github/ds-forms/node_modules/vuetify/lib/components/VGrid/VGrid.css
at new NodeError (node:internal/errors:387:5)
at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:76:11)
at defaultGetFormat (node:internal/modules/esm/get_format:118:38)
at defaultLoad (node:internal/modules/esm/load:81:20)
at nextLoad (node:internal/modules/esm/loader:165:28)
at ESMLoader.load (node:internal/modules/esm/loader:608:26)
at ESMLoader.moduleProvider (node:internal/modules/esm/loader:464:22)
at new ModuleJob (node:internal/modules/esm/module_job:63:26)
at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:483:17)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:441:34)

5:45:07 PM [vite] vite.config.js changed, restarting server...
5:45:07 PM [vite] [[email protected]][Bug] You stumbled upon a bug in vite-plugin-ssr's source code. Reach out at https://github.com/brillout/vite-plugin-ssr/issues/new or https://discord.com/invite/qTq92FQzKb and include this error stack (the error stack is usually enough to fix the problem). A maintainer will fix the bug (usually under 24 hours). Don't hesitate to reach out as it makes vite-plugin-ssr more robust.

[brillout]

Seems like Vuetify is wrongly published on npm. See workaround for wrongly published packages at https://vite-plugin-ssr.com/common-issues.

Let us know if that fixed your problem.

[davedub]

Your link converted this from an issue into a discussion but I'm not seeing a suggested workaround anywhere. Can you point me to one more specifically? Thanks.

[brillout]

Edited my answer.

[davedub]

This workaround doesn't seem to make any difference. Presumably, unless the module owner is willing to make the necessary updates, as was the case with AWS amplify, the problem doesn't go away by using a noExternal directive. But thanks for your help.

[brillout]

doesn't seem to make any difference.

That really shouldn't be the case, as Vite can prune CSS imports. So at least the error you posted should go away.

Reproduction welcome if you're confident node_modules/vuetify/lib/components/VGrid/VGrid.css is indeed processed by Vite (instead of being directly ingested by Node.js).

[davedub]

Here's the gist. My goal is to take advantage of Netlify forms in a Vue 3 app, which requires prerendering. But maybe we are not discussing the same issue. This option seems meant to exclude libraries from being prerendered and thereby throwing an error, not to make them capable of being prerendered on the client side. Per this description: "Prevent listed dependencies from being externalized for SSR. If true, no dependencies are externalized."

[brillout]

You’ve wrongly configured noExternal

…

On Mon 6. Mar 2023 at 00:58, David Witus ***@***.***> wrote: Here's the gist <https://gist.github.com/davedub/66ff63026ebe035b18874224d56ac096>. My goal is to take advantage of Netlify forms in a Vue app, which requires prerendering <https://www.netlify.com/blog/2018/09/07/how-to-integrate-netlify-forms-in-a-vue-app/>. But maybe we are not discussing the same issue. This option seems meant to exclude libraries from being prerendered and thereby throwing an error, not to make them capable of being prerendered on the client side. Per this description <https://vitejs.dev/config/ssr-options.html#ssr-noexternal>: "Prevent listed dependencies from being externalized for SSR. If true, no dependencies are externalized." — Reply to this email directly, view it on GitHub <#682 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHVQRTA4ZG3VMIPTVNVR4LW2USDBANCNFSM6AAAAAAVQI2ZQY> . You are receiving this because you commented.Message ID: ***@***.*** com>

[davedub]

True - lol. I hadn't noticed you have a Vuetify example. I'll take a look at that. Thanks.