Harsh Patel
Aug 4, 2022 ⋅ 7 min read

Build a micro-frontend application with React

Harsh Patel 🕸 Web aficionado 💻 Writer + Programmer 🎯 Dreams ➡️ Vision ➡️ Reality

Recent posts:

Implementing Vector Search With Open Ai, Next Js, And Supabase

Implementing vector search with OpenAI, Next.js, and Supabase

Let’s build a Next.js app that implements vector search using Supabase and OpenAI to offer better search experiences for users.

Peter Ekene Eze
Feb 27, 2024 ⋅ 11 min read
Comparing React Native BLE libraries

Comparing React Native BLE libraries

Discover the most popular libraries for enabling Bluetooth Low Energy (BLE) in React Native apps, allowing them to interact with Bluetooth hardware on iOS and Android platforms.

Fimber Elemuwa
Feb 26, 2024 ⋅ 4 min read
Using CRDTs To Build Collaborative Rust Web Applications

Using CRDTs to build collaborative Rust web applications

CRDTs, or conflict-free replicated data types, is a concept that underlies applications facing the issue of data replication across a […]

Mario Zupan
Feb 23, 2024 ⋅ 15 min read
Guide to Using TensorFlow in Rust

Guide to using TensorFlow in Rust

We explore the fusion of TensorFlow and Rust, delving into how we can integrate these two technologies to build and train a neural network.

Rosario De Chiara
Feb 22, 2024 ⋅ 8 min read
View all posts

39 Replies to "Build a micro-frontend application with React"

  1. Hi,Does the above solution of using webpack5 module federation plugin also support server side rendering in nextjs.

  2. Hi, do you have a repo with the code? I tried to replicated and lot of errors appeared in different steps.

  3. Hi,
    I did one-to-one what in your tutorial, but I have the error while importing the header component from the fe1 in the fe3 app

    ReferenceError: fe1 is not defined
    while loading “./header” from webpack/container/reference/fe1

  4. I am unable to get this to work. Can you post a repo of the source? Same error as Pawel. while loading “./header” from webpack/container/reference/fe1

      1. Hey, did you have the time to put this code on a github? I am really needing it to work, BUT, i just cant expose the remoteEntry.js file. Can you help me?

              1. Left issues and PR, code would never work if fe2 is called app1.

                Can you please upload the working code of the post and some more detailed steps to reproduce the working solution?

                Blog post instructions didn’t produce a working project as all the reader comments suggest. Code on GitHub doesn’t work either, so a working code and a list of tested reproducible step would help.

                1. I have updated README.MD file and listed few more steps. Also, posted video for the reference. Code is working as per the function.

  5. Hi Harsh Patel,
    Thank you for the step by step tutorial. But unfortunately facing the same issue as Chris and Pawel. while loading “./header” from webpack/container/reference/fe1.
    Could you please upload your code to github?

  6. I’ve read somewhere you would need this plugin @module-federation/nextjs-mf to make things work. Can you relate to this?

  7. Hi Harsh,
    Thanks for taking the time to create this tutorial. It seems that your repo is out of sync with your post though; It would be super helpful for your readers if you updated the post and also added a little more instruction around how to run the micro frontends in development.

  8. I’m not really sure how you managed to get this to work. I followed your tutorial like many others but was unsuccessful. One thing I came across was the nextjs-mf plugin. On their github page they say that “Module Federation in Next.js depends on @module-federation/nextjs-mf It will not work unless you have access to this plugin, which is not free.” You can see the page here: https://github.com/module-federation/module-federation-examples/tree/master/nextjs. Probably important for anyone trying to follow this tutorial.

    1. For anyone interested, I managed to get a next based mfe setup working and you can see the source here: https://github.com/ChristopherHButler/nextjs-mfe-poc/tree/master/container
      It does not support server side rendering because the nextjs-mf plugin is currently not free (they are working to make it free and would appreciate sponsorship! – I am not affiliated with them in any way, just think it is a worthy project). Check the readme for a few extra notes on the repo. Hope this helps someone.

      1. Hey Christoper How did you manage to create remoteEntry.js file for the next app for me build command run completely fine but I cannot see any remoteEntry.js file

      2. Hi Christopher, I cloned your repo and am glad to say everything works as stated on the README. However, I would like to expose a NextJS remote entry to another NextJs consumer app. I’ve been able to create the remoteEntry.js file with the build command but I’ve not been able to access the file on the browser and on the consumer app.

    2. I have achieved it using Webpack 5 module-federation. I need to check @module-federation/nextjs-mf plugin. If It works with that plugin I’ll update my code based on it. I’ll definitely explore that package soon and see if there’s any workaround for free or need to use paid only. Also, need to check for Next.JS version compatibility.

    1. Hey, it’s not necessary to add it in _document.js as you are already setting it up in next.config.js. I have added it to just check whether it works that way or not. Definitely we can omit it.

Leave a Reply