Svelte + Vite + TS: How to share Svelte component in both Host and Remote?

[Mooncat25]

I'm pretty new to module federation. I have checked the example vite-svelte-microfrontends and successfully recreated a working app on my end. But when I try to integrate my Svelte component library, it either fails to build or fails to run. So, what is the correct way to configure module federation to support shared component library?

Think of the rxjs dependency in the example, but is a Svelte component library instead. And its package.json looks like this:

{
  "name": "@scope/counter",
  "main": "/dist/index.js",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "svelte": "./dist/index.js"
    }
  },
  "files": [
    "dist",
    "package.json",
    "CHANGELOG.md",
    "README.md"
  ],
  "types": "./dist/index.d.ts",
  "type": "module",
  "devDependencies": {
    ...
  }
}

And I want both host and remote uses the same <Counter/> component from the library. Host builds and runs fine. But Remote refuses to cooperate. Most likely my fault.

If I don't change anything in federation.config.cjs, vite build fails with the following messages:

✘ [ERROR] Could not resolve "@scope/counter"

    src/App.svelte:19:28:
      19 │ import { Counter } from '@scope/counter';
         ╵                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The path "." is not currently exported by package "@scope/counter":

    node_modules/@scope/counter/package.json:6:13:
      6 │   "exports": {
        ╵              ^

  None of the conditions provided ("types", "svelte") match any of the currently active conditions
  ("browser", "default", "import", "module"):

    node_modules/@scope/counter/package.json:7:9:
      7 │     ".": {
        ╵          ^

  Consider enabling the "types" condition if this package expects it to be enabled. You can use
  "conditions: ['types']" to do that:

    node_modules/@scope/counter/package.json:8:6:
      8 │       "types": "./dist/index.d.ts",
        ╵       ~~~~~~~

  You can mark the path "@scope/counter" as external to exclude it from the bundle,
  which will remove this error.

Seeing the last line of the message, I tried adding @scope/counter to build.rollupOptions.external of vite.config.js. Same error.

I have tried adding it in the skip property of federation.config.cjs. Same error.

I have tried adding it in the shared property of federation.config.cjs. Now vite build output some files, but with error messages:

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

Sadly, vite dev still fails.

Any help would be appreciated. 🙏

Edit: I have created a minimal project to illustrate the problem.
https://github.com/Mooncat25/module-federation-svelte

[Mooncat25]

uh... the Svelte demo is now 404. Does it mean Vite + Svelte is not supported?

[Mooncat25]

Update: if I only add the scope of the package (@scope in my example) to the shared option of federation.config.cjs, so it becomes something like this:

const {
  withNativeFederation,
  shareAll
} = require('@softarc/native-federation/build');

module.exports = withNativeFederation({
  name: 'remote',
  exposes: {
    './remote-app': './src/App.svelte'
  },
  shared: {
    ...shareAll({
      singleton: true,
      strictVersion: true,
      requiredVersion: 'auto',
      includeSecondaries: false,
    }),
    '@scope': {
      singleton: true,
      strictVersion: true,
      requiredVersion: 'auto',
      includeSecondaries: false,
    }
  },
});

Somehow the remote app can build and run, with just one tiny warning:

 WARN  No meta data found for shared lib @scope

I think I know what does it mean. But I don't know how to fix it. I don't even know who is complaining about it. Is it Vite? The Federation-Vite plugin? Or the EsBuild-Svelte plugin? And when I run both the host and remote apps, it seems the shared component is loaded at least twice. Not sure if it is the correct behaviour. But at least it runs.

Still looking for a better answer.