Edgar Llorente Edgar Llorente - 1 year ago 211
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 Source

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!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download