Guide on including a in-browser utility module from single-spa into a TypeScript parcel project

There are 3 TypeScript projects listed below:

  1. root-config
  2. a parcel project named my-app
  3. an in-browser utility module called api

All of these projects were created using the create-single-spa command.

In the file api/src/lomse-api.ts, I am exporting the module fetchPeople like this:

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

As per the single-spa documentation, assuming my orgName is lomse and projectName is api, I should be able to import fetchPeople into my-app like so:

import { fetchPeople } from '@lomse/api'

However, since my-app is a TypeScript project, the above statement results in an error:

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

Is there a solution to this issue?

Answer №1

The issue you're encountering is a TypeScript error, distinct from JavaScript or single-spa errors. Below are some recommendations on how to address this problem:

  1. Package your utility module and publish it to a registry in a Node.js-compatible module format (UMD, Commonjs). You can omit types since TypeScript can infer them from the source code, but including types is preferable. Install this package in each microfrontend's node_modules directory. As webpack external, the version in node_modules will only be used for TypeScript compilation, not browser execution. This approach may necessitate an additional build step and could lead to issues due to interoperability differences.
  2. Publish just the module types as a standalone package or together with other microfrontends' typings.
  3. If needed, mock the types of the utility module based on guidance provided here.

References:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can Angular 2 effectively keep track of changes in HTTP service subscriptions? Calling the method directly may result in

After making a call to the authentication service method that checks the validity of the username and password, as well as providing an authentication token, I encountered an issue. When attempting to display the value obtained from calling the getAuthData ...

Searching for nicknames in a worldwide Jest arrangement?

Before running all test cases, I need to execute certain tasks only once. To achieve this, I have created a global function and specified the globalSetup field in my Jest configuration: globalSetup: path.resolve(srcPath, 'TestUtils', 'global ...

Using ngIf for various types of keys within a JavaScript array

concerts: [ { key: "field_concerts_time", lbl: "Date" }, { key: ["field_concert_fromtime", "field_concert_totime"], lbl: "Time", concat: "to" }, { key: "field_concerts_agereq", lbl: "Age R ...

The functionality of translations within a TypeScript object is currently malfunctioning

I am facing a perplexing issue with my code. I am utilizing lingui for internationalization in my application. The translations are stored using the `t` macro in a TypeScript object, which can be found here: https://github.com/Flaburgan/disco2very/blob/mas ...

Harnessing the power of React context alongside React hooks in TypeScript

Here is an example demonstrating my attempt at implementing react's context with react hooks. The goal is to easily access context from any child component using the code snippet below: const {authState, authActions} = useContext(AuthCtx); First, I ...

What is the best way to elucidate this concept within the realm of TypeScript?

While diving into my ts learning journey, I came across this interesting code snippet: export const Field:<T> (x:T) => T; I'm having trouble wrapping my head around it. It resembles the function definition below: type myFunction<T> = ...

The Clerk authMiddleware() function has been defined in the middleware.ts file located at the root of the application, but it is not being utilized

import { authMiddleware } from "@clerk/nextjs"; export default authMiddleware({}); export const config = { matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)&apos ...

Issue with Switch Map in Angular 2 and RxJS

I'm currently implementing an infinite scrolling feature in my application using a specific component for managing scroll events. When the scroll reaches the bottom of the div, I trigger a function to fetch more data. Everything seems to be working fi ...

Angular's capability for manipulating data asynchronously

I am relatively new to this, and I am facing difficulties in handling data manipulation in the frontend of an app that I'm currently developing. In my code, there are two functions named "getTipoEtapas()" and "getEtapasporTransfo" which utilize two s ...

What is the best way to transmit a JSON object to REST services using Angular?

Whenever I attempt to send the JSON object to REST services, I encounter an error that looks like this: http://localhost:8080/api/v1/cardLimit 400 (Bad Request); JSON Object Example: public class GameLimit implements Serializable { private stati ...

Optimal Approaches for Conditional Rendering When Button Click is Involved in Combined Server and Client Components in Next.js 14

I'm currently working on a project using Next.js 14 and I've encountered an issue with implementing conditional rendering. In my setup, I have a server component that encompasses both server and client child components. Specifically, one of the c ...

Merge the values of checkboxes into a single variable

How can I gather all the checkbox values from my list and combine them into a single variable? This is the structure of my HTML: <div class="card" *ngFor="let event of testcases" > <input class="form-check-input" ...

Why am I unable to retrieve the property from the JSON file?

Below is the provided JSON data: data = { "company_name": "חברה לדוגמה", "audit_period_begin": "01/01/2021", "audit_period_end": "31/12/2021", "reports": [ ...

When canActivate returns false, the screen in Angular 2 will still be accessed

I am encountering a problem where my canActivate method is returning false, but still navigating to the blocked screen. This issue seems to only occur in Chrome, as everything works fine in IE. Here is how the canActivate method looks: canActivate(route: ...

"Exploring the methods to retrieve Firebase authentication error details and outputting the console log message along with

When I encounter an error in Firebase authentication, I want to display it in the console log. However, nothing is being logged and the catch block is not even getting executed. I am unsure about why this is happening and how to retrieve the error code and ...

Leveraging the expand function for pagination through recursive invocations

I am currently working on retrieving data from a third party API that necessitates manual management of paging by keeping track of the number of records retrieved versus the total number of records available. In attempting to handle this, I experimented w ...

What is the proper way to type a collection and put it into action?

I am looking for a way to create an object that mimics a set. Specifically, I want the transaction id to act as a key and the transaction details as the value. To achieve this, I created the following: type TransactionDetail = { [key: TransactionId]: Tra ...

Structuring your Angular 6 application and server project

What is the recommended project structure when developing an Angular 6 application and an API server that need to share type definitions? For example: On the client side: this.httpService.get<Hero[]>(apiUrl + '/heroes') On the server si ...

Discrepancy between code, output from ng build, and how the browser is

I am in the process of developing an Angular 13 library that includes two services and a group of models. These services consist of an authentication service and a client service. However, after building the library, I noticed some global variables missing ...

When using react-admin with TypeScript, it is not possible to treat a namespace as a type

Encountering issues while adding files from the react-admin example demo, facing some errors: 'Cannot use namespace 'FilterProps' as a type.' Snippet of code: https://github.com/marmelab/react-admin/blob/master/examples/demo/src/orde ...