masonk masonk - 1 year ago 129
React JSX Question

Requiring React with RequireJS

I'm using node, react, and requirejs, (and generating my AMD-conformant JS from Typescript, but I don't think this is relevant to the problem at hand). I'm simply trying to require React in my app:

// config.js
baseUrl: '../scripts/lib/node_modules',
paths: {
lib: '..',
react: 'react/lib',
app: '../../app',
jquery: 'jquery/dist/jquery',
scripts: '../..',
require(['react/React'], function (react) {


Then I'll load this config using RequireJS's
api, by navigating to this page:

<!DOCTYPE html>
<title>My Updated Test Project</title>
<script data-main="../scripts/config.js" src="../scripts/lib/node_modules/requirejs/require.js"></script>
<h1>My Test Project</h1>

RequireJS complains when it tries to load React:

Error: Module name "EventPluginUtils" has not been loaded yet for context: _. Use require([])

In React.js, almost the first line is a "bare require"

var EventPluginUtils = require("./EventPluginUtils");

If I read RequireJS's info about this error message, it says the fix is to stop using bare require.

This occurs when there is a require('name') call, but the 'name' module has not been loaded yet.
If the error message includes Use require([]), then it was a top-level require call (not a require call inside a define() call) that should be using the async, callback version of require to load the code

But I don't think changing the react source to use AMD require is what the authors of React had in mind. Are there any other options for this? Do I need to list every module that React.js
s as a shim? That strikes me as a lot of upfront and maintenance work. Am I missing something fundamental about RequireJS? (I'm new to this module).


React is packaged as a CommonJS module, so it looks like RequireJS should be able to load it:

But simply adding the location of the folder containing React's
file doesn't seem to get me there. It's trying to load react from the baseUrl as if it didn't recognize that there's a package configured for that module id.

Answer Source

Try using Browserify (npm install browserify) instead of requirejs.I came across this exact problem, but for some reason, requirejs just would not work.

Here's a quick video on Browserify if you're knew to it. It helped me, and I hope it does to you too:

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