Upgraded from 23.1 to 23.2. Webpack works perfect, Vite not so

When I have Vite enabled, it does compile and says everything is good (after an hour or so to fix all it found not so good). But the front page is completely white. The content of index.html is there in the browser, but it seems it is not “injecting” index.ts into it. I have downloaded a hilla starter project and compared all relevant files, but cannot find any relevant (famous last words…) differences. Anyone experienced anything similar?

I would compare what is loaded in the browser with what the working starter loads and see where the differences start. Does it load any js/ts at all?

This is the output in the console, and as seen by the scrollbar, there are a lot more loaded. So It does load a lot.

Are you seeing any errors in the browser console?

This is the only one

http://localhost:8080/VAADIN/themes/style_v025/styles.css?inline ← this is the full url it complains about and “style_v025” is the name of my current theme

Does that URL return css or css wrapped in js?

It starts like this and is a few thousand rows (when pretty printed)

If you open http://localhost:8080/VAADIN/themes/style_v025/styles.css?inline in the browser you should see JS starting with export default " . If you check it in the network tab it has Content-Type: application/javascript

If you leave out the ?inline you should see the plain CSS

Does it help to clear the cache or remove an existing service worker?

That was it! I have a filter for cdn-stuff that set the content-type to text/css on all files ending with .css. Now added an extra rule for the ?inline part and the Vite-thing works great :slightly_smiling_face: Thank you so much for your expertise!

The “That was it!” was for Hilla views :stuck_out_tongue: When I try to access any Flow view, I get the error that the custom component ‘dom-module’ is defined twice. And if I search the node_modules catalog I see that both Vaadin and Polymer is trying to define it. Is this a common problem with an easy solution?

It uses a vaadin bundle with contains certain dependencies. Both files should never be loaded at the same time

You can either check in the browser if they both are really loaded or then you can try to delete node_modules/@vaadin/bundles to see if it resolves the problem

I am working through all deps in the app to see if I can find out why they are both loaded. But it is a deep hole to climb down :stuck_out_tongue:

I suppose it has to do with Hilla loading Polymer and Flow loading Vaadin. But it is to be evaluated.