typescriptsingle-spa

How to import a single-spa in-browser utility module into a TypeScript parcel project

I have 3 TypeScript projects below:

  1. root-config
  2. parcel, let us call it my-app
  3. in-browser utility module, let us call it api

All the projects above were generated using the create-single-spa command.

In the api/src/lomse-api.ts file, I'm exporting the fetchPeople module as shown below:

export { fetchPeople } from "./PeopleApi.ts";

According to the single-spa documentation, given my orgName is lomse and projectName is api, I should be able to import the fetchPeople module into my-app (a parcel app) like this:

import { fetchPeople } from '@lomse/api'

Since my-app project is a TypeScript project, the statement above is definitely going to throw the error below:

Cannot find module '@lomse/api' or its corresponding type declarations.

Is there a way to fix this?

Solution

  • That error is a TypeScript error, not a JavaScript or single-spa error. Here are options for what you need to do:

    1. Publish your utility module to a registry (types are optional since TS can infer from the source, though types are better) using a Node.js-compatible module format (UMD, Commonjs). Then install it into each other microfrontend's node_modules. Since it's a webpack external, the version in node_modules will only be used for typescript compilation but not for execution in the browser. However this may require a second build and could create problems dues to interop differences.
    2. You could publish only the module types, whether as an individual package or together with other microfrontend's typings.
    3. Mock the utility module's types, as described here.

    Source: