'How to import a single-spa in-browser utility module into a TypeScript parcel project
I have 3 TypeScript projects below:
- root-config
- parcel, let us call it
my-app - 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 1:[1]
That error is a TypeScript error, not a JavaScript or single-spa error. Here are options for what you need to do:
- 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.
- You could publish only the module types, whether as an individual package or together with other microfrontend's typings.
- Mock the utility module's types, as described here.
Source:
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |