Microfrontend Module Federation using vite/react/typescript: Cannot find module

Question

I am trying to setup a microfrontend for my project and at base I am using vite to setup my react/typescript applications. I've installed the vite plugin for module federation.

And these are my vite.config.ts:

Host:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from '@originjs/vite-plugin-federation'



export default defineConfig({
  build: {
    target: 'esnext' 
  },
  plugins: [react(),
  federation({
    name: "app",
    remotes: {
      "remote": "http://localhost:5001/assets/remoteEntry.js",
    },
    shared: ["react", "react-dom"],
  })
  ],
})

remote:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from '@originjs/vite-plugin-federation'



export default defineConfig({
  build: {
    target: 
  },
  plugins: [react(),
  federation({
    name: "remote",
    filename: 'remoteEntry.js',
    exposes: {
      "Button": "./src/components/Button",
    },
    shared: ["react", "react-dom"],
  })

  ],
  server: {
    port: 5001,
  },
})

When i import the shared button in my host application i get this error:

src/App.tsx:3:20 - error TS2307: Cannot find module 'remote/Button' or its corresponding type declarations.

I am running the remote app on 5001 port. I am lost at what I am missing, hope anyone can help me out - if more context/info is needed I'm happy to provide more.

Ricardo Marcattini · Accepted Answer · 2023-10-06 15:21:23Z

7

Just create a file inside src/ folder, name it something like remotes.d.ts, and add the following line

declare module 'remote/Button'

first (remote) is the name you use in you host vite.config.ts
second (Button) is the name you exposes in you remote vite.config.ts

or just add

declare module 'remote/*'

to declare all incoming modules under remote

edited Oct 6, 2023 at 15:21

answered Oct 5, 2023 at 3:26

Ricardo Marcattini

613 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Youssef N Jul 17 at 16:46

This solved the problem. Next step for me is to understand WHY this solves the problem.

Dave · Accepted Answer · 2023-09-27 06:20:19Z

1

I came across this article while searching for micro-frontend module federation. https://software-engineering-corner.hashnode.dev/micro-frontend-module-federation-with-vite-for-react#heading-as-a-lazy-loaded-module

See the code block below NOTE: If you prefer to implement this using typescript...

Looks like you have to bring your own types.

answered Sep 27, 2023 at 6:20

Dave

2282 silver badges11 bronze badges

Comments

Sidou Gmr · Accepted Answer · 2024-06-13 11:01:10Z

1

create file name declaration.d.ts in src host and add this

declare module 'remote/Button'

answered Jun 13, 2024 at 11:01

Sidou Gmr

1049 bronze badges

Comments

Joshua Duxbury · Accepted Answer · 2024-07-25 14:32:37Z

0

If using typescript you need to have a tsremote_declarations.ts file with the module in. A big mistake for me was calling the file tsremote_declarations.ts, changing this to tsremote_.d.ts worked as it looks to be name depandant

answered Jul 25, 2024 at 14:32

Joshua Duxbury

5,3504 gold badges36 silver badges54 bronze badges

Collectives™ on Stack Overflow

Microfrontend Module Federation using vite/react/typescript: Cannot find module

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related