bug(@vtmn/svelte): vite4 / incompatibility?

[JuanmaCano1980]

Describe the bug It seems that the new version of vite v4 has an incompatibility with our vtmn/svelte library.

When compiling, we have this error:

Not found: /@vtmn/css-card
Error: Not found: /@vtmn/css-card
     at resolve(file:///Users/my-app/node_modules/@sveltejs/kit/src/runtime/server/index.js

and this in browser's console

GET http://localhost:5173/@vtmn/css-card net::ERR_ABORTED 404 (Not Found)

Steps to reproduce I have created a clean install of vite4 and svelte importing only @vtmn/svelte and @vtmn/css in the following github repo so that you can reproduce what I am telling you.

Expected behavior Avoid these errors at compile time

Browsers affected All

Version affected @vtmn/css: 0.87.1, @vtmn/svelte: 0.57.1,

[Tlahey]

Hello @JuanmaCano1980 Have you the link to your branch with this issue ? We can debug more essilly :)

Thanks

Edit: got it https://github.com/JuanmaCano/vite4-vtmn

[thibault-mahe]

Hi @JuanmaCano1980 , thanks for submitting this issue :)

The Vitamin Svelte components are not usable as-is, since it's a compiled language. You can import the distributed source components but you have to take care of the compilation.

From what I understood, wherever they are imported (look for @vtmn/svelte in cs.github.com to take a look at all the existing integrations), they are compiled with other tools, either with manual scripts in webpack or via preprocessing tools (less or postcss for example). Theses tools aim to transform the css imported in our component and directly inject the css inline. That's why if you do not preprocess your components, the import "@vtmn/css-card" (see how the style is imported as a node module here) will not be understood by the browser.

Sveltekit offers an integration with the 2 most popular preprocess methods, svelte-preprocess and vite-plugin-svelte. Maybe you could try one of this preprocess strategy to inject at compile time the styles.

Maybe @Tlahey and @manglard could help you on this one ?

I let Antoine and Melanie react on this thread before closing it.

Thanks :)

[Tlahey]

Hello @JuanmaCano1980 , If you want to do SSR, you have to compute by yourself the style behind the postcss preprocess.

For that, you have to :

• npm install postcss-import
• change the svelte.config.js white this following content

  
  // [...]
  import preprocess from 'svelte-preprocess' // used to compute the style
  import atImport from 'postcss-import' // used to search the style on directory
  // [...]

const config = { preprocess: preprocess({ postcss: { plugins: [ atImport({ root: process.cwd(), path: [join(process.cwd(), 'node_modules'), join(process.cwd(), 'src')], // search by default on node_modules, after dans src. }) ] }}), // [...] }

[thibault-mahe]

Hi @JuanmaCano1980,

a solution seems to have been brought on this problem, and another PR is in progress explaining the docs not to reiterate this problem. I'm closing the issue, but don't hesitate to reopen it if needed.

Thank you, and thank you @Tlahey for your time!