Typescript for dynamic loading

[yaseiva]

Hi,

I'm using Electron.js and I've set up a working example of dynamic remote loading. However, I'm missing one feature: adding types when lazily loading remote apps, and I'm not sure how to obtain them.

I updated the tsconfig with:

"paths": {
    "@renderer/*": [
      "src/renderer/src/*"
    ],
    "*": ["./@mf-types/*"]
  }

But when actually lazy loading, how do I achieve type safety to know the props for App1?

const App1 = lazy(() => loadRemote('app1/App') as never)

Thanks for any help.

[YanPes]

Hi @yaseiva, did you check your log if @mf-types are created and consumed correctly?
Example: If there are any Typescript errors in your build you will get this error, which prevents the generation:

[ Module Federation Dev Server ] Unable to compile federated types Error: Failed to generate type declaration. #TYPE-001

[yaseiva]

I'm using Vite, not sure if it support TS:

yarn workspace v1.22.22
yarn run v1.22.22
$ vite
09.04.43 [vite] (client) Forced re-optimization of dependencies

VITE v6.2.6 ready in 281 ms

➜ Local: http://localhost:2004/
➜ Network: use --host to expose
➜ press h + enter to show help
09.04.48 [vite] (client) ✨ new dependencies optimized: mf__virtual/shared__mf_v__runtimeInit__mf_v.js, mf__virtual/shared__prebuild__react__prebuild.js, mf__virtual/shared__prebuild__react_mf_2_dom__prebuild.js
09.04.48 [vite] (client) ✨ optimized dependencies changed. reloading
09.04.48 [vite] (client) page reload .__mf__temp/shared/localSharedImportMap.js
09.04.48 [vite] (client) page reload .__mf__temp/shared/localSharedImportMap.js
09.04.49 [vite] (client) ✨ new dependencies optimized: zustand
09.04.49 [vite] (client) ✨ optimized dependencies changed. reloading
09.04.49 [vite] (client) ✨ new dependencies optimized: mf__virtual/shared__prebuild__zustand__prebuild.js
09.04.49 [vite] (client) ✨ new dependencies optimized: mf__virtual/shared__prebuild__zustand__prebuild.js
09.04.49 [vite] (client) ✨ optimized dependencies changed. reloading