2024-11-04
2457
#react
Harsh Patel
125774
Nov 4, 2024 ⋅ 8 min read

Build a micro-frontend application with React

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

Recent posts:

How To Audit And Validate AI-Generated Code Output

How to audit and validate AI-generated code output

Validating and auditing AI-generated code reduces code errors and ensures that code is compliant.

Boemo Mmopelwa
Dec 2, 2024 ⋅ 5 min read
Building A Background Remover With Vue And Transformers.js

Building a background remover with Vue and Transformers.js

Build a real-time image background remover in Vue using Transformers.js and WebGPU for client-side processing with privacy and efficiency.

Emmanuel John
Nov 29, 2024 ⋅ 9 min read
Managing Search Parameters In Next.js With Nuqs

Managing search parameters in Next.js with nuqs

Optimize search parameter handling in React and Next.js with nuqs for SEO-friendly, shareable URLs and a better user experience.

Jude Miracle
Nov 27, 2024 ⋅ 10 min read
React logo over a beige background

Data fetching with Remix’s loader function

Learn how Remix enhances SSR performance, simplifies data fetching, and improves SEO compared to client-heavy React apps.

Abhinav Anshul
Nov 26, 2024 ⋅ 5 min read
View all posts

43 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.
    Thanks!

  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.

  9. Did anybody tried to build? In my case, build file only runs if project is running. Am I missing anything? Thanks alot.

  10. I have tried the example given in the blog, in the about us page I am not seeing the styling of header and footer. it is just displaying plain text no background color and other style.

    1. Hello! We checked with the author, and there was one command missing:`yarn build`. Take a look at those two sections, and you should be all set!

Leave a Reply