Migrating from the Asset Pipeline to Webpacker

[ryanwood]

I'm attempting to convert a large Rails app from the Asset Pipeline to Webpacker. Instead of a single application.js, there are a number of different top-level JavaScript entry points (dashboard.js, admin.js, etc.). I have two questions:

1. Is it possible to configure react-rails to use the bundled version of React in the asset pipeline for one top-level JS file (asset pipeline manifest) and use the webpack version for another (pack tag)?
2. If not, is it possible to force react-rails to use the asset pipeline/bundled React JS even if you have React installed via yarn with Webpack?

I'm trying to find a way to keep parts of the app running under the current react-rails asset pipeline configuration but as soon as I run rails webpacker:install:react, the existing react-rails stuff breaks with Uncaught ReferenceError: React is not defined.

To be clear, the part of the app using the asset pipeline is only has standard stylesheet_link_tags (no pack tags). Yet react-rails is still loading the Webpack (module) version of React, not the bundled version. Is there a way to instruct it to load from one or the other?

Thanks in advance for your help. This is a tricky migration.

[BookOfGreg]

If you have React available from the asset pipeline, it will be available in the global namespace. Therefore you should be able to use Webpack's Externals feature to make the React-UJS load it from global namespace instead of within the webpack.
https://webpack.js.org/configuration/externals/

There are quite a few ways to skin this, another way would be have a pack that includes only common libraries such as React and make that one available to your asset-pipeline code, again via global namespace by exporting it, one possible way is using Webpack's define plugin:
https://webpack.js.org/plugins/define-plugin/

Either way you want to be using Webpack's built in features to split out the Webpack'ed React-UJS code from the asset-pipelines. I will say it's not known if you can have two instances of React-UJS together, I think there may even be a bug filed by soneone trying to use React-UJS from two packs on the same page, didn't go well.

Without specifics I will be unable to really help too much but general practice is that Webpack gives plenty of tools to code split, and then use Globals to load or export the components which you can compose as needed.

Good luck!!

Edit, if you do end up with any tricky bugs in the JS, I do recommend skimming through the contents of React-UJS, it's actually a rather simple module, most of the code just does Turbolinks/JQuery detection and then scans the page for any uninitialized React components to hydrate, if stuck there I almost recommend rolling your own initializer as it's pretty simple.

[BookOfGreg]

Closing as I'm not sure I have anything to add. Hope it went well!