How do you correctly import react into a node-webkit app?

Question

I'm trying to create a node-webkit app, and I want to use react.js as my framework. After trying react and creating some components, I tried to use it as follows in a node-webkit app:

'use strict';

require('react');

Whenever I open my node-webkit app, which includes the above script at the end of the body I get the error:

ReferenceError: document is not defined
at Object.<anonymous> (C:\Users\rtol\Dropbox\Code\Node- Webkit\WallpaperManager3.0\node_modules\react\lib\CSSPropertyOperations.js:31:7)
....

Am I doing something wrong? All the documentation I've found indicates that this would be the correct way to include react when using node. I have npm installed react, according to package.json it is version 0.13.2.

For instance the react-nodewebkit starter kit has it's index.jsx as follows.

var React = require('react');
var HelloWorld = require('./components/HelloWorld.jsx');

React.render(<HelloWorld />, document.getElementById('content'));

So I can't really figure out why it doesn't work.

Answer 1

NW.js (which is what node-webkit was renamed to) has two contexts in which scripts can be executed - browser or Node. See Determining the context of a script on the NW.js wiki

Note that the starter project you linked to bundles its JavaScript up using browserify and loads it via a <script> tag. As a result that code is being run in the browser context, in which document is available.

If you're using require() directly to import your code, that's running in the Node context, in which document is not available. If you'd got any further you'd also have hit issues using React if it was imported with require() , as it detects whether or not it's being executed in a browser context and behaves accordingly.