Edgar Llorente Edgar Llorente - 14 days ago 10
React JSX Question

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".

Answer

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!