svelte-material-ui: Unable to use this library as shared packages

[xoneill]

I am trying to build a native federation solution with Svelte SPAs In my example I am using components from hperrin/svelte-material-ui. I am getting an error while running a build script:

 INFO  Preparing shared package @smui/button
 ERR!  Error bundling npm package @smui/button
 ERR!  Unexpected token (Note that you need plugins to import files that are not JavaScript)
 ERR!  For more information, run in verbose mode

Steps to reproduce:

1. open remote app
2. install @smui/button package
3. run a build script

It seems you should extend an internal esbuild/rollup configuration to accept .svelte

[gioboa]

Hi, we already have a plugin to load . svelte file , I will try to add a svelte-material-ui in a specific brunch

[gioboa]

This commit solves svelte-material-ui question. The packages need to be placed in the devDependencies section

[gioboa]

After the compilation @smui/button disappears because it will be transformed in pure JavaScript

[xoneill]

I appreciate your quick response

The packages need to be placed in the devDependencies section

In this case it won't get into shared modules. Meaning each remote app will have its own @smui/button package inside the bundle .js file.

My idea was to make those ui libraries to be a shareable packages so I can load them only once and then use across the all remote modules. Does it make sense to you?

[gioboa]

I see. 🤔 I will try a different solution to achieve this requirement

[gioboa]

I thought about the question and module federation is used to load runtime dependencies. @smui/button is used at build time and therefore we can't share it as shared dependencies. In this project we have an example of runtime shared dependency --> RxJs

There are valid solutions to share a UI library

• create a npm package
• create the UI library in a shared folder