Search code examples
reactjstypescriptsystemjsmicro-frontendsingle-spa

Is it possible to use single-spa (import map + SystemJS) and include TypeScript declarations?

I've created a few apps that follow the same pattern as the react-microfrontend projects listed on the Single-spa examples page. However, these examples are not using TypeScript.

I am receiving a TS error when App2 tries to import a function that exists in App1, because App2 is unable to find the typings for the App1 object. And this makes sense to me, since the importmap.json that is referenced in the index.html file of the root-config project only has a URL listed for the .js file of each microfrontend. I really don't want to add @ts-ignore statements everywhere, and I also don't want to do cross-app communication without being type safe.

An example of what I'm referring to:

This file in the Planets app references the Button component from the Styleguide app. I am unable to build this unless I place a @ts-ignore on the line before the import statement, because my Planets app cannot find the type declarations for Styleguide.

I am very new to import maps and SystemJS in general, so if anyone could point me in the right direction, I'd appreciate it. I've actually gone through the trouble of building my Styleguide as a regular npm library and just including it as a dependency in the Planets package.json file... which kind of defeats the whole purpose of using Single-spa in the first place.

importmap.json

{
  "imports": {
    "@react-mf/planets": "//localhost:9000/react-mf-planets.js",
    "@react-mf/styleguide": "//localhost:9001/react-mf-styleguide.js"
  }
}

page.component.ts

// @ts-ignore
import { Button } from "@react-mf/styleguide";

...

render() {
  return (
    // Unable to view the available props
    <Button label="Hello World" />
  );
}
Solution

  • Unfortunately no, they cannot be shared via the import map because that operates in the browser, and browsers do not understand TypeScript syntax.

    Your alternatives are:

    • Publish your module's types to an npm registry and npm install it into each dependent microfrontend
      • One caveat here: you will need to update this with every new publish of the shared module, but that can be automated with various tools such as renovate
    • Mock the utility module's types

    More info can be found at this Github issue: https://github.com/single-spa/single-spa/issues/609#issuecomment-665132965