Hot-Reloading `register` module format generated by babel

[Pavel910]

Hi, I was trying to get hot-reloading to work with bundled assets, transpiled by babel in the build process and served to System.js in register @format.

I'm not sure if my problem is in how I handle System.js or the hot-reloading. @guybedford @capaj

Before I spend another week on it I was wondering if this could hypothetically work at all?

Just to mention: I did study the jspm-react example, it works and I fully understand how it works internally. Also, I do not use jspm at all, I created a built version of hot-reloader so I can include it as a single file into my project.

What I have at the moment:

• gulp task which transpiles my React into a bundle with all modules containing System.register('My/Custom/Module/Name', [], function() {...}) with the appropriate module name
• now we are in the realm of System.js and plain ES5
• before rendering the app, I import the bundle which makes all the modules available to System.js, like this:
  • System.import('/build/app.js') - this loads http://mydomain.com/build/app.js
  • System.import('/build/input.js') - this loads http://mydomain.com/build/input.js
  • then I call System.import('My/App').then(m => m.default.run()) - this fetches the main App module from the registry and executes my custom run() method to bootstrap the React app - so far so good.
  • while rendering, My/App imports Components/Input and renders an input
  • and here goes the problem: when I update Components/Input (/build/input.js) on disk, hot-reloader DOES emit all the events and I see all reimported in 24 ms - BUT - it does not re-import the parent modules that depend on the changed file. I see the new request sent to the server to fetch the new file, the file contains new built code, but after that nothing happens.

So the question is - is it even theoretically possible to get the hot-reloader working using this workflow? I will change the hot-reloader.js for my needs if necessary I just need some input regarding the entire idea.

Thanks a lot!

[alexisvincent]

Hi Pavel,

It should definitely be possible to get hot reloading to work with this workflow.

Once the event emitter notifies your app of a change, what file does it say has changed? The bundle or the individual file? Can you clarify the exact files that are being loaded.

[Pavel910]

Hi Alexis,

To simplify the whole structure I made it into 2 files: app.js and input.js. I load both of them via System.import before running my app so that the modules are available to System.js. Once these 2 files are loaded, I call another import by module name, My/App which is registered when app.js is imported.

At this point the app runs and everything is rendered fine. When I change the /build/input.js, the chokidar-socket-emitter says: File /build/input.js emitted: change. In the dev-tools I can see hot-reloader removing that file and a new request is being made to fetch /build/input.js. I'm thinking there is something missing here to bridge the gap between the script name being imported and the actual module being loaded since it has a custom name.

When I look at the System._loader entries, they look like this (I stripped the rest for cleaner output): http://mydomain.com/Components/Input http://mydomain.com/build/input.js

I think http://mydomain.com/build/input.js is created when I first import the bundle and http://mydomain.com/Components/Input is created when the app actually imports the dependency when executing code.

Oh and thanks for immediate response :) That was fast 👍

[alexisvincent]

Pleasure :)

Are you manually setting entries in the loader registry?

[alexisvincent]

If you give me access to a repo I might be able to provide better help. It seems as if you're doing some custom stuff. Difficult for me to see the context.

[Pavel910]

No, i simply import the /build/input.js and that file contains this:

System.register('Components/Input', [], function (_export, _context) {
    // component code here
});

The module name is generated by babel's getModuleId function so I can organize modules more nicely.

[Pavel910]

Let me make a clean repo with just the important stuff and I will share it with you. Thanks a lot for the effort.

[alexisvincent]

Yeah, the hot-reloader assumes you are mapping things via file names. If you are manually setting modules in the registry (via System.register), its not going to be able to determine which files to invalidate.

[alexisvincent]

Sure :) Make a repo and I'll see if theres something we can get going. Are you open to changing your file structure at all?

[Pavel910]

Oh, I see what you mean by manually now. Ok that's a very valuable info, I will try to get a test case working with the info provided.

It's a big platform and we have our ES6 import statements organized nicely with these custom module names. Let me play with this input a bit more to see if I can somehow map the file path to the module name. If I'm still stuck I will make a repo and try to structure it as close as possible to our actual platform so you can see what's going on.

Thanks a lot, Alexis!

[alexisvincent]

Sure. Something that might help is using SystemJS's config option map. You can map something like Components to a dir components and just put your component files in there. Getting hmr working with custom mapping will require you manually listening for file changes and invalidating things yourself. (Not worth it IMO)

[Pavel910]

@alexisvincent I got it to work with a couple of tweaks in hot-reloader.js just to prove the concept. There are other issues but it is related to my platform, so I can work with it from here.

I'm closing the issue and thanks a lot for your help and suggestions! 🍻

[alexisvincent]

Glad you got fixed :) Goodluck :)