[SOLVED] Using React-dom with RequireJS in a minified file

Using React-dom with RequireJS in a minified file

I am trying to using React + ReactDOM through RequireJS in a minified file which acts as an standalone library.

I have arrived at the point where I am able to use React (Bundled in the minified file) but when trying to use ReactDOM everything breaks, the posible cause I found so far is that while trying to load "require-dom" require tries to import a file "react-dom" instead of loading the code from the minified file. (Which actually contains react-dom).

Actually I am using grunt for precompiling all require files. Here is my grunt requirejs configuration:

requirejs: {
  build: {
    options: {
      baseUrl: './build/',
      paths: {
        'jquery': '../bower_components/jquery/dist/jquery.min',
        'react': '../bower_components/react/react.min',
        'react-dom': '../bower_components/react/react-dom.min'
      },
      include: ['main'],
      out: 'dist/library.min.js',
      optimize: 'uglify2'
    }
  }
}

Main.js is as follows:

define(['jquery', 'react', 'react-dom'], function($, React, ReactDOM) {
  return {
    react: React,
    reactDOM: ReactDOM,
  }
});

After compiling all the code with the above configuration I include it in a html file as follows:

<html>
  <head>
    <script src="../bower_components/requirejs/require.js"></script>
    <script src="index.js"></script>
  </head>
  <body></body>
</html>

Index.js is a requirejs file as follows:

requirejs.config({
  baseUrl: 'src',
  paths: {
    mylib: 'lib/dist/library.min.js'
  }
});

require(['mylib'], function(mylib) {
  console.log(mylib);
});

The error I am receiving when executing the above code is the following:

require.js:1958 GET file:///D:/code/example/user/src/src/react-dom.js net::ERR_FILE_NOT_FOUND
req.load @ require.js:1958
load @ require.js:1682load @ require.js:832
fetch @ require.js:822check @ require.js:854
enable @ require.js:1173
enable @ require.js:1554
(anonymous function) @ require.js:1158
(anonymous function) @ require.js:134
each @ require.js:59enable @ require.js:1110
init @ require.js:786(anonymous function) @ require.js:1457

require.js:168 Uncaught Error: Script error for "react-dom"(…)

If I remove react-dom everything loads smoothly.

I have tried several things so far, as importing React as a shim so react-dom detects the global React var, but that has not worked neither.

Any help will be appreciated, thanks in advance.

Update: Github repo with example code

Update 2: After a while of debugging on the react-dom lib and the minified script I found out that the main method gets executed before of the call "define('react-dom')" in the minified script, so the problem untangles as "how to make the main script wait until the code that defines 'react-dom' is thoughly executed".

Solution

Seems like with the new version of React 15.4.1 (just released yesterday) this problem is solved. Try again after updating the version in your bower.json!