Workspace watch mode does not update Typescript definitions

Greetings to all who are reading this,

I have created a React micro-frontend project using SPA v5.9, Webpack v5.75, Babel-loader v9.1, Ts-loader v9.4, and Yarn workspace v3.5. The project structure is very basic:

  • Root SPA => Package Root
  • Application SPA => Package App1
  • Utils SPA => Package Utils1
  • React lib Utils SPA => Package Utils2

My current challenge arises when running the app on Webpack dev server. If I add a new function to Utils1 and try to use it in App1, TypeScript throws an error stating that there is no existing export for this function.

The application runs without issues, so I suspect it's a misconfiguration of either Webpack, loaders, or TypeScript settings. Unfortunately, I am not well-versed in this specific setup and haven't been able to find a solution on Stack Overflow or GitHub repositories.

To see more details about the configuration used, you can visit my project here.

My main question is: How can I resolve the TypeScript error occurring when using Webpack?

I believe that sharing the solution from my repository could benefit others who are facing similar challenges in structuring their projects. So, it would be great to find and share a resolution :)

An interesting observation is that the updated d.ts files of Utils1 are successfully created in my dist directory by Ts-loader and emitted in App1 as assets by path ../../utils1. However, this seems insufficient.

Here are some logs from the console when adding a new function:

...

And here is the error log when trying to utilize that function:

...
typescriptwebpacksingle-page-applicationmicro-frontendyarn-workspaces

Answer №1

Today, I utilized my brain wisely and successfully configured webpack to run smoothly.

I suspected that the configuration issue stemmed from the fork-ts-checker-webpack-plugin embedded by webpack-config-single-spa-ts v4.1.3. Upon further inspection of its configuration, I discovered that it did not align with the documentation provided.

          new ForkTsCheckerWebpackPlugin({
            typescript: {
              mode: "write-references",
            },
          }),

According to the fork-ts-checker-webpack-plugin documentation, when using 

mode: "write-references"
, we also need to set build: true. After some research, I realized that enabling the build mode of tsc would compile our reference project unnecessarily. I updated the configuration as follows:

      new ForkTsCheckerWebpackPlugin({
        typescript: {
          mode: "readonly",
          build: true,
        },
      }),

This adjustment met my expectations and worked seamlessly during development under webpack:

  • If I modify a method in the utils1 project used by app1, it will generate a valid typescript error :)
  • If I add a function to utils1 and call it from app1, there are no complaints about unknown exports from utils1 :)

This configuration only affects packages that use references in tsconfig, excluding the root app and utils in my case.

I also optimized the configuration for my spa utils by keeping it empty to default as my utils do not depend on other packages. This results in in-memory files:

new ForkTsCheckerWebpackPlugin({}), // Overrides the conf mode: "write-references" from singleSpaDefaults. We use in-memory readonly definition, assuming you run your production build with tsc.

All these modifications can be found in the develop branch of my repository.

In the upcoming commits, I plan to add fast-refresh and CSS prefixing by package, along with other features. Feel free to engage in discussions or raise issues if you have suggestions for enhancing the repository :)

Initial investigation findings:

I believe I have narrowed down the source of the error messages originating from the fork-ts-checker-webpack-plugin plugin. Removing it from the webpack configuration in the app1 webpack conf has resolved the errors.

I pursued this approach because the fork-ts-checker-webpack-plugin operates in a separate process, potentially causing asynchronous issues with webpack.

However, I am uncertain whether by removing it:

  • I have completely disabled TypeScript checking
  • Or simply shifted the responsibility of type checking solely to the ts-loader.

What is your perspective on this?

I intend to explore any potential side effects further.

Find the update in this branch of my repository

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

What steps do I need to take to set up Vue-CLI 3 to generate a webpage with no JavaScript?

My dilemma is this: I have a simple static page that does not require JavaScript. Using vue-cli 3, I am attempting to pass the HTML file through webpack for minification purposes. Unfortunately, it seems that accomplishing this task is not as straightforwa ...

javascriptvue.jswebpackvue-cli-3

Exploring the power of RxJs through chaining observers

In my Angular application, I am utilizing Observables to set up a WebSocket service. Currently, I have the following implementation: readwrite(commands: command[]) : Observable<response[]>{ const observable = new Observable((observer)=>{ ...

typescriptrxjsobservable

Anticipate receiving a 'Type' returned by external library functions

I've recently started learning TypeScript and have encountered a situation where I need to assign a type to a variable that is returned from a third-party library function with its own type definition. For instance: import {omit} from 'lodash&ap ...

typescript

Is there a possibility in TypeScript to indicate "as well as any additional ones"?

When working with typescript, it's important to define the variable type. Consider this example: userData: {id: number, name: string}; But what if you want to allow other keys with any types that won't be validated? Is there a way to achieve thi ...

typescript

Array of generic types in Typescript

Here's a method that I have: getFiveObjectsFromArray(array: T[]) { return array.slice(0, 5); } I've been using this method multiple times. Is there a way in TypeScript to pass a generic argument instead of using multiple types? Also, when ...

javascriptarraystypescriptinterfacetypescript-generics

Enhance your images with the Tiptap extension for customizable captions

click here for image description I am looking to include an image along with an editable caption using the tiptap extension Check out this link for more information I found a great example with ProseMirror, but I'm wondering if it's possible ...

javascripttypescriptvue.jsprose-mirror

Using TypeScript with Angular UI Router for managing nested named views in the application

Hey there! I am new to typescript and have a bit of experience with Angular. Lately, I've been struggling to make a common angular-ui-router setup work with typescript. I have a nested named views structure that just doesn't seem to load correctl ...

angularjshtmltypescriptangular-ui-router

Exploring Parquet Files with Node.js

Looking for a solution to read parquet files using NodeJS. Anyone have any suggestions? I attempted to use node-parquet but found it difficult to install and it struggled with reading numerical data types. I also explored parquetjs, however, it can only ...

javascriptnode.jstypescriptparquet

Sorting arrays of objects with multiple properties in Typescript

When it comes to sorting an array with objects that have multiple properties, it can sometimes get tricky. I have objects with a 'name' string and a 'mandatory' boolean. My goal is to first sort the objects based on age, then by name. ...

arraystypescriptsorting

You cannot assign multiple properties with the same name to an object literal

I am facing an issue with two validator functions in my TypeScript file. The first validator checks if a user enters a new password same as the old one, displaying an error if so. The second validator ensures that "new password" and "confirm password" must ...

angulartypescriptvalidation

Ways to display the ping of a game server on your screen

Is there a way to display the game server's ping on the screen like in the example below? this.tfEnter.text = ShowPing + " ms"; Sometimes the code snippets provided in examples may not function properly. Channel List Image: https://i.stack ...

javascripttypescriptactionscript-3

Using React and Typescript, implement an Ant Design Table that includes a Dropdown column. This column should pass

Next Row: { title: "Adventure", render: (item: ToDoItem) => { //<- this item return ( <Dropdown overlay={menu}> <Button> Explore <DownOutlined /> </Button> </Dropdown&g ...

javascriptreactjstypescriptantd

Troubleshooting: The issue of importing Angular 2 service in @NgModule

In my Angular 2 application, I have created an ExchangeService class that is decorated with @Injectable. This service is included in the main module of my application: @NgModule({ imports: [ BrowserModule, HttpModule, FormsModu ...

javascriptangulartypescript

Discover how TypeScript's strictNullChecks feature can help you identify null values with ease in your functions

Since Javascript often requires me to check if a value is `!= null && != ''`, I decided to create a function that checks for empty values: const isEmpty = (variable: any, allowEmptyString?: boolean): boolean => { return variable == null | ...

typescript

Step-by-step guide on activating a button only when all form fields are validated

My very first Angular 5 project. I've gone through resources like: https://angular.io/guide/form-validation and various search results I looked up, only to realize that they are all outdated. In my form, I have several input fields such as: <for ...

javascriptangularformstypescript

Change the name of the interface from the imported type

When working with Google Apps Script, I have implemented the Advanced Calendar Service, originally labeled as "Calendar". However, I have renamed it to "CalendarService". How can I incorporate this name change when utilizing the type definitions for Apps S ...

typescriptgoogle-apps-script

The Angular translation service may encounter issues when used on different routes within the application

I'm currently working on an Angular application that has multi-language support. To better organize my project, I decided to separate the admin routes from the app.module.ts file and place them in a separate file. However, after doing this, I encounte ...

angulartypescriptngx-translateng

Socket.io: The other client will only update when there is interaction happening

I am currently facing a challenge setting up a real-time application using socket.io in Angular and node.js. The application is not functioning as expected. When a client makes a new post, the other clients do not receive updates until there is some inter ...

node.jsangulartypescriptsocket.ioobservable

Attempting to incorporate an npm package (specifically Howler) into an Angular 2 application

I'm facing an issue with importing Howler into my Angular 2 app as it doesn't have a typings file. Despite my efforts in searching for a solution, I haven't been able to find anything helpful. Can someone guide me on how to import "howler" i ...

angulartypescriptnpmhowler.js

What are the tips for using ts-node in the presence of errors?

While developing, I have encountered some issues with ts-node. When I need to test something, commenting out code is my usual approach. However, when using ts-node, I keep getting this error message: 'foo' is declared but its value is never rea ...

typescriptts-node