Sharing React Components with Webpack 5

An intensive information about sharing React parts between purposes with Webpack 5

Sharing parts between purposes is simple with Webpack 5 (picture by writer)

A number of articles and movies attempt to clarify find out how to share parts with Webpack 5, however they make some essential errors in my modest opinion: They’re laborious to observe, use tough terminology, and describe the options in a really summary matter.

And so that you don’t perceive it and transfer on with out having the ability to simply share parts between your purposes!

So, let’s have a little bit of enjoyable with Webpack 5’s Module Federation. As all the time, we’ll describe the ins and outs in nice element. And probably there shall be some fairly screenshots.

Observe: The code snippets additional down under come from two small React purposes I wrote particularly for this text. You will discover the code on GitLab:

Gerard’s Bicycle Shop and Gerard’s Blog.

Let’s transfer on!

We created just a little store with React, and it makes use of Webpack 5 as a bundler. We even have just a little weblog created with React.

Yup, you guessed it: it makes use of Webpack 5 as a bundler as properly.

Contained in the store, we’ve a React part rendering the newest provide. However we additionally wish to render it contained in the weblog! That shall be our aim. We wish to share the part.

First, we’ll have a better take a look at each purposes.

The Store

Our fancy little webshop. Spectacular, proper?

Please admire the store. Honest sufficient, there’s not a lot happening, nevertheless it accommodates one good part. The LatestOffer part. As you’ll be able to see it renders a picture and a few textual content with some fancy colors. Every part contained in the orange border (and the border itself) is the LatestOffer part. It’s rendered on line 8 inside BicycleShop.jsx, as you’ll be able to see under:

The part itself is outlined in a separate file, LatestOffer.jsx:

Observe how we use a picture and a few styling in our part. We opted for utilizing CSS modules, however that’s non-compulsory.

And there we’ve it. A bit store with a LatestOffer part.

What concerning the different utility?

The Weblog

Moreover the store, we’ve one other standalone React utility for a easy weblog. Inside this weblog, within the space with a dashed line round it, we wish to render… the newest provide from our store. Which is ur aim, as we talked about earlier.

We all know a LatestOffer part exists, however it’s outlined contained in the Store repository, and never in our weblog.

So how will we share the part between these purposes? How will we share a part from the store to the weblog? That’s the place Webpack 5’s Module Federation comes into play. It has highly effective performance, nevertheless it’s laborious to know whenever you analysis it.

So, let’s transfer on and take small steps at a time.

Each purposes (the store and the weblog) have the same setup for bundling the code. They each use Webpack, and their configuration is for a big half very an identical.

They each have the identical module-rules configuration inside their webpack.config.js file, as you’ll be able to see under:

This makes positive the model sheets and JavaScript/JSX recordsdata are loaded and bundled accurately. However this isn’t a tutorial about Webpack configuration generally, so we are going to go away these guidelines for another time.

As a substitute, let’s see how we will lengthen this Webpack 5 configuration to reveal parts on one finish (store) and devour them on the opposite facet (weblog).

Our aim is to share the LatestOfferpart from the store utility. Subsequently we are going to modify the webpack.config.js file of the store utility first by including an occasion of the ModuleFederationPlugin . That’s how all of the magic begins (see traces 11–17):

We’re passing an choices object to the constructor:

  • identify (line 12): This defines a reputation for the present undertaking (bear in mind we’re enhancing the Webpack configuration file for the Store undertaking in the meanwhile). The identify is unfair, and so is uppercasing it.
  • filename (line 13): See the next paragraph.
  • exposes (traces 14–16): Right here you outline which parts you wish to expose, and below which identify they are going to be made accessible (extra about that afterward). On this instance, we’re exposing the LatestOffer part by giving it a reputation (./LatestOffer — discover the essential main dot-slash. And this might be any identify, however we determined to make use of the identical identify), and by defining the trail to the part definition file as a string (./src/parts/LatestOffer/LatestOffer). Evidently, we may expose a number of parts this fashion, if we wished to.

So what concerning the filename, remoteEntry.js?

Different purposes that wish to use our uncovered LatestOffer part in some way have to pay money for the part definition (the code for the part, that’s). In different phrases, they want to have the ability to load that code.

Let’s say our store utility runs on the location localhost:8080 (which, coincidently, it does).

By configuring the filename remoteEntry.js (once more, an arbitrary worth) we created the route localhost:8080/remoteEntry.js . And you may guess what might be discovered there now — the code for our LatestOffer part (amongst another boilerplate code):

We’ve got now uncovered our part. We’re sharing it from our store utility.

Let’s see how we will devour it on the opposite facet. How we will render the LatestOffer part contained in the weblog utility.

Module Federation: Distant parts

We’re transferring on and can take a look on the Webpack configuration file for the weblog utility now. Once more, as we simply did for the store Webpack configuration, we are going to add an occasion of the ModuleFederationPlugin with some choices:

The choices that we go to the constructor are:

  • identify (line 12): Once more, a reputation for the present undertaking.
  • remotes (traces 13–15): Principally we’re telling our utility, “Hey! There’s this different utility referred to as SHOP, and it’s exposing parts! Let’s give ourselves the chance to load them into our undertaking!”. The article-key, SHOP, is how we will refer regionally to the exterior parts (extra about that quickly). And the worth is a string, constructed of two elements joined by an at-sign. The primary half is the identify of the distant utility and the second half is the file containing the code for the parts that we’re loading (it ought to make a little bit of sense by now).

Lastly, it’s time to render the LatestOffer part inside our Weblog.
Let’s take a look.

Rendering Distant Parts

Take a look on the Weblog part that’s rendering the LatestOffer part:

See how we get a reference to the LatestOffer part (line 3).

We’re utilizing a so-called dynamic import. React’s lazy perform permits us to take action. It’s a sophisticated subject and you’ll learn extra about it within the React documentation.

After loading the (distant!) part, we render it (traces 10–12). Discover that we wrap the part inside a suspenseLarger-Order Element (HOC) with a fallback worth. The fallback worth shall be rendered whereas we’re loading our distant part (if it was not loaded already). As soon as it’s loaded, the LatestOffer part is rendered inside our weblog!

Webpack 5’s Module Federation has had a little bit of a sluggish begin in my view, and that’s a pity. This text proves how highly effective it’s — and imagine me, we solely scratched the floor.

However some issues didn’t work within the Module Federation’s favour:

Poor naming

Listening to the time period “Module Federation” doesn’t instantly ring a bell for many builders. Think about the Webpack plugin was referred to as “ShareComponentsPlugin” as a substitute.

Scary terminology

Most of the time the idea of micro frontends is concerned in tutorials for module federation. I’m satisfied you’ve already misplaced at the least half of your viewers by making an attempt to make use of such a strong and sophisticated idea. What’s improper with saying, “Hey! Do you wish to share parts between purposes? Right here’s how!”

Builders themselves will then uncover that as a substitute of sharing a easy presentational part, they’ll really share a full utility (you probably did, didn’t you? Right here’s just a little secret: You may! In spite of everything, a full React utility is simply one other part — did somebody say App ?)

Dangerous documentation

Even Zack Jackson (closely concerned in sustaining and growing Webpack and Module Federation) says himself that there’s room for enchancment in relation to documentation for Module Federation.

Take a look on the feedback in this Webpack issue over at GitHub, for instance.

However most vital, Module Federation is extraordinarily highly effective. The sky is the restrict.

Give it a attempt! Maybe you’re quickly sustaining the subsequent micro frontend-driven Net 4.0 utility along with your colleagues.

Thanks in your time!

More Posts