Bug: dev server returns 404 for /virtual:rakkasjs:start-client.js

[tkamenoko]

Local development server returns 404 for /virtual:rakkasjs:start-client.js , and that causes blank stylesheets. Note that runing rakkas build works as expected.

Env:

• OS: Windows11 64bit
• Browser: vivaldi 5.1.2567.57 (Stable channel) (64-bit)
• Node: 16.13.2
• npm: 8.2.1
• rakkas: 0.5.1

[tkamenoko]

terminal:

Server listening on http://localhost:3000
200 GET      /
404 GET      /virtual:rakkasjs:start-client.js
200 GET      /
404 GET      /virtual:rakkasjs:start-client.js

Browser dev tool:

[cyco130]

Thanks for reporting @tkamenoko.

I believe I diagnosed and solved this issue. But, unfortunately, I don't have a Windows machine handy. Would you be so kind to try version 0.5.2@canary and see if it works for you too? If it does, I'll release it as 0.5.2.

[tkamenoko]

TypeError: Cannot read properties of undefined (reading 'isSelfAccepting')
    at TransformContext.transform (C:\Users\tkamemnoko\myproject\node_modules\@rakkasjs\cli\node_modules\vite\dist\node\chunks\dep-5496817b.js:81289:43)

[tkamenoko]

IMO, vite tries to load virtual:rakkasjs:start-client.js (not starts with a slash), but it fails because of wrong path name.

I injected console.log arround the error line like this:

// myproject\node_modules\@rakkasjs\cli\node_modules\vite\dist\node\chunks\dep-5496817b.js
            // vite-only server context
            const { moduleGraph } = server;
            // since we are already in the transform phase of the importer, it must
            // have been loaded so its entry is guaranteed in the module graph.
            console.log(importer); // INJECTED LOGGING
            const importerModule = moduleGraph.getModuleById(importer);
            const importedUrls = new Set();

and the result of terminal output:

500 GET      /
virtual:rakkasjs:start-client.js
C:/Users/tkamemnoko/myproject/node_modules/rakkasjs/dist/client.mjs?v=1ef56503
C:/Users/tkamemnoko/myproject/node_modules/rakkasjs/dist/chunk-BYZC6E5I.mjs?v=1ef56503
C:/Users/tkamemnoko/myproject/node_modules/rakkasjs/dist/chunk-CSRYYC67.mjs?v=1ef56503
C:/Users/tkamemnoko/myproject/node_modules/rakkasjs/dist/chunk-MQX4TKX6.mjs?v=1ef56503
/@virtual:vite-plugin-virtual/virtual:rakkasjs:page-imports

[cyco130]

resolveId resolves all the virtıal:rakkasjs:* modules but Vite requires the entry from index.html to be absolute (relative to the root, actually). So resolveId resolves anything that contains virtıal:rakkasjs: to virtıal:rakkasjs:.... So /virtual:rakkasjs:start-client.js resolves to virtual:rakkasjs:start-client.js. That part is normal.

In any case, it seems like a different problem. The log shows that the entry resolves fine. Could you you delete the directory node_modules/.vite and try again?

[tkamenoko]

@cyco130 Sorry for my late response.

I removed node_modules/.vite and started dev server, then I got the same error. However, after few times of restarting dev server, I got a valid response.

It may be caused by pre bundling. I use linaria for styling. but I forgot to append
vite's optimizeDeps.include config . After fixing the config, dev server works as expected.

I made a sample project at https://github.com/tkamenoko/rakkas-linaria . Feel free to use this repo for reproducing the issue.

[cyco130]

Great to hear! I was trying to remember where I remember that exact message and now I do, it was caused by styled-components when it's not in optimizeDeps.include, no wonder linaria does the same. It's a Vite problem which may or may not have been solved in the current beta. I'll release 0.5.2 in a few minutes and experiment with the new beta later.