Sharing React Components With Webpack 5

A thorough guide about sharing React components between applications with Webpack 5

Sharing components between applications is easy with Webpack 5 (image by author)

Intro

Several articles and videos try to explain how to share components with Webpack 5, but they make some critical mistakes in my modest opinion: They are hard to follow, use difficult terminology, and describe the solutions in a very abstract matter.

And so you don’t understand it and move on without being able to easily share components between your applications!

So, let’s have a bit of fun with Webpack 5’s Module Federation. As always, we’ll describe the ins and outs in great detail. And most likely there will be some pretty screenshots.

Note: The code snippets further down below come from two small React applications I wrote specifically for this article. You can find the code on GitLab:

Gerard’s Bicycle Shop and Gerard’s Blog.

Let’s move on!

The Goal

We created a little shop with React, and it uses Webpack 5 as a bundler. We also have a little blog created with React.

Yup, you guessed it: it uses Webpack 5 as a bundler as well.

Inside the shop, we have a React component rendering the latest offer. But we also want to render it inside the blog! That will be our goal. We want to share the component.

First, we’ll have a closer look at both applications.

The Shop

Our fancy little webshop. Impressive, right?

Please admire the shop. Fair enough, there’s not much going on, but it contains one nice component. The LatestOffer component. As you can see it renders an image and some text with some fancy colours. Everything inside the orange border (and the border itself) is the LatestOffer component. It is rendered on line 8 inside BicycleShop.jsx, as you can see below: