"Reference Error: React is not defined" with server side rendering. How to implement in an isomorphic context?

[tconroy]

Hi!

This is likely just a configuration issue on my part, but I'm getting the following error message when attempting to use this loader in an isomorphic react app:

error:

/Users/Tom/Code/src/svg/circle.inline.svg:3
React.createElement(
^

ReferenceError: React is not defined
    at Object.<anonymous> (circle.inline.svg:1:1)
    at Module._compile (module.js:413:34)
    at loader (/Users/Tom/Code/node_modules/babel-register/lib/node.js:148:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/Tom/Code/node_modules/babel-register/lib/node.js:158:7)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:16:19)
    at Object.<anonymous> (BlockAdComponent.js:3:1)
    at Module._compile (module.js:413:34)

webpack loader config:

      {
        test: /\.inline.svg$/,
        loader: 'babel!svg-react',
      },

contents of SVG file:

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  x="0px"
  y="0px"
  viewBox="0 0 100 100"
  enable-background="new 0 0 100 100"
>
  <circle
    className="svg-inline-circle"
    cx="50"
    cy="50"
    r="48"
  >
  </circle>
</svg>

simplified example of how the SVG is being imported:

import React from 'react';
import Circle from 'svg/circle.inline.svg';

class BlockComponent extends React.Component {

  render() {
    const { config, swipeArrows } = this.props;
    return (
      <div>
        <Circle className="block-ad__circle" />
      </div>
    );
  }
}

export default BlockComponent;

The setup instructions I followed were from this guide (method 2)

Environment is:
Node: 5.5.0
NPM: 2.15.9
Webpack: 1.13.1
React: 0.14.0
svg-react-loader: 0.3.7
Express: 4.14.0

A coworker had this working on his local via a simple webpack-dev-server, however while attempting to implement it into an isomorphic react context (express server backened), I am now getting this error.

If you need any other info from me please feel free to ask. Any help much appreciated.

[tconroy]

Any ideas? Think the root issue is it's unclear how to implement this in an isomorphic (server side) environment.

[jhamlet]

@tconroy can you get a look at the transpiled source of circle.inline.svg and post it here?

[tconroy]

@jhamlet sure -- I believe this is it, ripped from the bundle file (please let me know if you need any more samples :) ):

/***/ },
/* 137 */
/***/ function(module, exports, __webpack_require__) {

    'use strict';

    var React = __webpack_require__(11);
    var helpers = __webpack_require__(138)(__webpack_require__(139));

    module.exports = React.createClass({

        displayName: "CircleInline",

        getDefaultProps: function getDefaultProps() {
            return { "version": "1.1", "xmlns": "http://www.w3.org/2000/svg", "x": "0px", "y": "0px", "viewBox": "0 0 100 100", "enableBackground": "new 0 0 100 100" };
        },
        componentDidMount: function componentDidMount() {
            helpers.applyXmlAttributes(this);
        },
        render: function render() {
            var props = this.props;
            var children = props.children;

            return React.createElement(
                'svg',
                this.props,
                React.createElement('circle', { className: 'svg-inline-circle', cx: '50', cy: '50', r: '48' }),
                React.Children.map(children, function (c) {
                    return c;
                })
            );
        }
    });

/***/ },

[jhamlet]

Interesting. You're getting the error on the React.createElement call... not on the createClass call...

In that same source what is /* 11 */ pointing to (I'm assuming its react).

Are you using React in other places (again, I would assume so)? Are they pulling in the same module number (11)?

Something to try: In your node_modules/svg-react-loader/utility/template.txt can you add a line after var children = props.children in the render() method:

var React = require('react');

[tconroy]

@jhamlet: first off -- thank you for your help. hope we can solve this!

/* 11 */ does seem to point to React, and is required extensively throughout the app. I found 30+ references to it. Here is how it is defined:

/* 11 */
/***/ function(module, exports) {

    module.exports = require("react");

/***/ },

I've added in an example implementation to my original post (at the end) showing how I'm actually using the SVG inside a component ( pretty basic ).

Adding the React require to template.txt resulted in the same error (ReferenceError: React is not defined).

[tconroy]

so some minor clarification / correction on my part:

The error is occurring when I try to run our start-dev NPM command. That command looks like this:

"start-dev": "NODE_ENV=dev APP_API_HOST=http://api.domain.com/ APP_STATS_API_HOST=http://statsapi.domain.com:8080 babel-node ./src/server.js",

src/server.js contains the Express server, that does the server-side rendering for the React client.

We have a separate build command, npm run build:server, which produces the transpiled source shared above. That command looks like this:

"build:server": "webpack --config ./cfg/server.js",

I'm not sure how to provide the transpiled source for npm run start-dev since its a server. it is using webpackDevMiddleware with the dev webpack config, which does include svg-react-loader.

[jhamlet]

Interesting.

Are you pre-compiling with webpack before this step?

[jhamlet]

Not sure what to say, or where to go from here...

Is it possible you can create a stripped-down version of your project that reproduces this issue? With that I can then do some debug-runs on my end.

[tconroy]

Hi @jhamlet -- no, no pre-compiling with webpack prior to this step. I will try and create a stripped down version when I have some time this weekend. Thank you for your help.

[jhamlet]

@tconroy on another note: I'm getting ready to publish v0.4.0 as latest. You can try it out with npm install svg-react-loader@next and see if the problem goes away (I removed the need for the babel compiler).

[tconroy]

@jhamlet good to know, thanks. I'll give it a shot. My guess was this issue was being caused somewhere in the babel transpiration so maybe that'll help. For the time being I had to unfortunately remove the loader from the project but really hoping to add it back since it works so well.

[jhamlet]

@tconroy Any progress on this? Did v0.4.0 solve the problem? Did you get the chance to create a smaller sample repo that reproduces the issue?

[tconroy]

hi @jhamlet -- apologies for the delay, been busy and haven't gotten around to this since removing from the project. will keep you posted!