With modern webpack, how can we share react (or other npm packages) across OS.js packages/apps?

[LordZardeck]

Currently when creating a package/app, each one has it's own webpack, build process, and dependencies. So if I make a bunch of react-based apps, I'm loading react multiple times. How can you share these modules across packages/apps? Something like webpack split chunks can't work I'd think given that they are all separate web packs and npm processes. Some examples or documentation would be great.

[andersevenrud]

The easiest way to do this is to use the externals feature of Webpack: https://webpack.js.org/configuration/externals/ and load react via a CDN using script tags either via webpack or the dist ejs template.

However, it seems like you might want a completely separate bundle built in the process, and not including them one by one like this.

---

Something like webpack split chunks can't work I'd think given that they are all separate web packs and npm processes

This is actually possible if the applications are structured in such a way that you can build everything at once in the root of your project instead of separately.

Do you plan to re-distribute these packages/apps? Because if not then this approach might be worth looking into.

---

What I was thinking of in the Gitter chat was this one: https://webpack.js.org/plugins/dll-plugin/

This allows you to build a separate bundle with all your deps that you can just sort of dynamically link to your packages.

I looked at the stuff I had lying around related to this, and sadly it seems to be partial and severely outdated. I'm going to have to read up on this again.

[andersevenrud]

via a CDN using script tags

This can also be loaded locally also of course. I believe the webpack resolver is smart enough to only load these once as well.

[hello-smile6]

What about global install of NPM packages?

[andersevenrud]

@hello-smile6 The issue is not about npm packages on the filesystem, but how they end up in a compiled bundle, which is Webpack related.

[ajmeese7]

What I have used to overcome this issue is Rush, which is great at automatically sharing packages. It works out of the box with pnpm as well, and it's perfect for if you want to make a monorepo with all of your OS.js projects in one master repository so you can easily keep track of everything.

[hello-smile6]

monorepo with all of your OS.js projects

Would that mean that OS.js would have its own copy of React?

[ajmeese7]

That depends on how you configure Rush. In my experience it is always a better idea to include something like React in your project once as opposed to linking it to a global install, but Rush has a lot of options and I'm sure using a global package is supported.