hot reloading / file swapping + RequireJS

[ORESoftware]

I created the following example project to demonstrate the problem I describe below:
https://github.com/ORESoftware/requirejs-jsx-example/tree/master

Here is the problem I am having:

I saw that video showing how to hot swap files using React + Webpack. I thought I could find a way to do it with RequireJS. I have had some success so far, but am currently running into a problem with with the jsx! plugins from both Seiffert and Carvalho.

I currently got hot swapping working with templates (.html, .ejs) - the way it works is like so:

          window.hotReload = function(item,cb){

                    require.undef(item);
                    require([item],function(file){
                        cb(null,file);
                    });

            };

the other parts of it involve using Gulp - I just watch files in my project, send a socket.io message to the client when a file changed, and the socket.io handler on the client receives the filepath, then it passes the file path to the window.hotReload global function.

However, for many reasons this is more difficult to do with .js files than it is with .html files.

The problem I am having is that the item that's passed to require([item]) is a JSX resource, so the item is something like 'jsx!something'

It appears as though when you call this code:

                    require.undef(item);
                    require([item],function(file){
                        cb(null,file);
                    });

on a item prepended with 'jsx!' it doesn't appear to get re-run through the JSX transformer. In other words, I have been using the jsx plugin for React with RequireJS for some time with good success. But when I requirejs.undef a module and then try to re-require it, it seems as though it's not being run through the JSXTransformer again, which means I get either a timeout or the classic React parse error saying it can't recognize the < > characters.

Is there any way to confirm this behavior? require(ing) the same resource twice means that the JSXTransformer is not invoked twice?

[ORESoftware]

I am going to provide a SSCCE to replicate the problem...ok I just added to the above post, but here it also https://github.com/ORESoftware/requirejs-jsx-example/tree/master

[ORESoftware]

this is a tricky one, I am walking through the require.js code, I get a scripterror

and it seems to occur on these lines

   if (options.enableBuildCallback && callback && isFunction(callback)) {
                        callback.__requireJsBuild = true;
      }

would really like some help on this, the sample project should demonstrate the problem

[jrburke]

The callback.__requireJsBuild = true; is only used by the r.js optimizer, it should have no effect when calling requirejs APIs normally. If there is an error here, then it sounds like a require() call that is malformed, finding the call that triggered that call and listing it out here might shed some light to why a script error happens there.

As for the more general issue on if requirejs.undef properly resets IDs that have a loader plugin prefix, I did this test using the text! plugin, and it seems to work as expected:
https://github.com/jrburke/text-undef

Unfortunately I am not conversant with react internals to be able to quickly follow what might be happening in the test case. The text-undef test seems to indicate though that the basic undef mechanism for a loader plugin resource works in some fashion.

[ORESoftware]

it seems to result from this

GET /static/app/js/views/standardViews/homeView.jsx 200 2.847 ms - 6572
Error: Not Found
GET /static/app/js/views/standardViews/homeView.js 404 7.620 ms - 2133

one of the requests is going to the wrong extension, not sure why there are two in this case

[ORESoftware]

@jrburke I got this whole thing to work, but instead of using JSXTransformer in the browser, I do the transpiling on the filesystem first using Gulp and the Gulp-React plugin. Something is wrong with jsx! plugin as it doesn't seem to work if you call require.undef on a module.

Anyway, I got around the problem and I am well on my way to developing a state of the art hot reloading mechanism for RequireJS -it is working with both React and Backbone (since both of their render functions are of the same nature).

Do you know of any solid implementations of hot reloading with RequireJS? If not, it would be real cool to develop something "official". It's very handy functionality for DX (developer experience).

[ORESoftware]

well, anyway here it is:
https://medium.com/@the1mills/hot-reloading-with-react-requirejs-7b2aa6cb06e1