I’m working on a project where we’re breaking up a monolithic application into a series of micro-frontends using single-spa. is a micro-frontend framework. Single-Spa Our project uses webpack externals to treat certain dependencies as in-browser modules. This means to exclude them during build-time and expect the browser to provide them at run-time. . Single-spa provides great documentation on how to achieve this The issue I ran into is that your IDE is not aware of this setup when you’re developing. In the above image, my IDE is showing a “Module is not installed” warning. This is because is a micro-frontend. I’m importing an exported function from that micro-frontend called . This is not a package published on npm declared within the project’s package.json, and installed in the project’s node_modules folder. @effectv-platform/ep-ui-auth useAuth This module is an in-browser module provided by an import map. You can publish your micro-frontends to a repository manager and declare them within your package.json. This will install them into your node_modules folder and your IDE will be happy. An alternative is to use TypeScript’s . “ambient” module functionality You create a file within your project and add a declaration for that module. The file needs to end in . You can also export interfaces and functions from within that module's declaration. <name>.d.ts .d.ts We had an existing file within our project. I updated that file to include the below code. This code adds a declaration for the module. node.d.ts @effectv-platform/ep-ui-auth declare module '@effectv-platform/ep-ui-auth'{
    export function useAuth(): {signIn, signOut};
} The downside to this approach is that you have to define and maintain this declaration file within each micro-frontend that needs it. This violates the principle of “ ” (DRY) and may lead to maintenance headaches. Don’t Repeat Yourself For simple scenarios and when you’re first planning out the project this may be acceptable.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Micro-Frontends: Using TypeScript's Ambient Modules

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

104 Stories To Learn About Programming Top Story

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

104 Stories To Learn About Programming Top Story

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps