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.

Too Long; Didn't Read

Making security fun one episode at a time

Micro-Frontends: Using TypeScript's Ambient Modules

Too Long; Didn't Read

Leonard Jones

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Micro-Frontends: Using TypeScript's Ambient Modules

Too Long; Didn't Read

Leonard Jones

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES