Virtual CSS modules

[brillout]

Description

From discord:

Okay, so it looks like that fixed one problem, but another problem showed up. It looks like the null character from the virtual module isn't being handled properly (running with pnpm run dev). I've created a reproduction of the bug here https://stackblitz.com/edit/node-usvd3r?file=vite-ssr-project/pages/about/index.page.vue. The button on the about page should have red text, and it does sometimes at page load for a very brief moment, but it immediately goes away after.

Error Stack

No response

[ulfgebhardt]

Requesting to reopen:

I updated to the latest version of vike and have resolve problems in dev mode:

In dev mode I get this html served, where you can see alot of <link rel="stylesheet" type="text/css" href="/@id/plugin-vuetify:components/...?direct"> (screenshot 1).

Those can all not be resolved and end up in a 404 (screenshot 2).

Later on the assets are properly loaded using the correct URL (screenshot 3).

The URLS differe like this:

http://localhost:3000/@id/plugin-vuetify:components/VBtn/VBtn.sass?direct
http://localhost:3000/@id/__x00__plugin-vuetify:components/VBtn/VBtn.sass

According to this https://vitejs.dev/guide/api-plugin.html#virtual-modules-convention this seems to be a virtual plugin transformation.
This transformation is not properly happening on serverside dev rendering.

I am using vite-plugin-vuetify to dynamically load those vuetify components required, reducing bundle size.

This only is happening in dev mode (using vite middleware).

A repro can be found here https://github.com/IT4Change/boilerplate-frontend/ (commit 28d80346a87ff8d6635c8100a26f7358ccc7ad9d in case things get fixed there)

This seems to be the right issue describing the problem: #479

Any hint how to solve this? ❤️

[ulfgebhardt]

A fix, which might not be the best way to solve things, but works on my machine:

 else if (mod.url.startsWith('\0')) {
            // Virtual modules
            //  - https://vitejs.dev/guide/api-plugin.html#virtual-modules-convention
            //    - I believe some Vite plugins don't respect the \0 virtual module convention. What should we do then?
            //  - https://github.com/vikejs/vike/issues/1327
            //  - https://github.com/vikejs/vike/commit/3f7b9916dddc84e29e2c20d2b0df7211b6f1acbd
            styleUrls.add(`/@id/__x00__${mod.url.substring(1)}`);
        }

I added the __x00__.

This is in the file node_modules/vike/dist/esm/node/runtime/renderPage/getPageAssets/retrieveAssetsDev.js line 46.

In the sources it would be: https://github.com/vikejs/vike/blob/main/vike/node/runtime/renderPage/getPageAssets/retrieveAssetsDev.ts#L49

To do it properly you can use https://github.com/vitejs/vite/blob/56ae92c33cba6c86ab5819877c19b9ea39f7121b/packages/vite/src/node/constants.ts#L78

[brillout]

3d25618 pre-released in 0.4.152-commit-3d25618. Let us know if you still run into issues.

[ulfgebhardt]

Works like a charm @brillout - no more errors with release 0.4.152-commit-3d25618

Tho I would suggest a code change to match the code at vite - see here for reference

styleUrls.add(`/@id/${mod.url.replace('\0','__x00__')}`)

Consider to explain __x00__:

VITE_NULL_BYTE_PLACEHOLDER = '__x00__'
...
styleUrls.add(`/@id/${mod.url.replace('\0',VITE_NULL_BYTE_PLACEHOLDER)}`)

Why is this important? As far as I read the code at vite it would replace any occurrence of the \0 character not only the first.

[brillout]

Vite does .replace() not .repalceAll(), so it only replaces the first occurence.

The fix adds a link to your comment, I think it's good enough.

Thanks for the bug report and digging into a fix.

In case your compnay is up for it: Sponsor Vike.