title: Require SVG cause react-server error: "React is not defined"
body: <p>In a react-server project generated using <a href="https://www.npmjs.com/package/generator-react-server" rel="noreferrer">generator-react-server</a> loading SVG file like follow triggers a react error.</p>
  
  <pre><code>const fmc = require('../images/logo.svg');
  </code></pre>
  
  <p>Gives Error</p>
  
  <pre><code>Failed to load page at "../pages/home.js" ReferenceError: React is not defined
  at Object.&lt;anonymous&gt; (/Users/me/Projects/myProject/dev/images/logo.svg:1:1)
  at Module._compile (module.js:541:32)
  at loader (/Users/svasseur/Projects/delateurs/dev/node_modules/babel-register/lib/node.js:144:5)
  at Object.require.extensions.(anonymous function) [as .js] (/Users/svasseur/Projects/delateurs/dev/node_modules/babel-register/lib/node.js:154:7)
  at Module.load (module.js:458:32)
  at tryModuleLoad (module.js:417:12)
  at Function.Module._load (module.js:409:3)
  at Module.require (module.js:468:17)
  at require (internal/module.js:20:19)
  at Object.&lt;anonymous&gt; (/Users/me/Projects/myProject/dev/components/footer.js:5:13)
  </code></pre>
  
  <p>I tried to specify webpack file-loader for SVG loader like I did in previous project but it didn't work. Here is my <strong>webpack.conf.js</strong> file targeted in <strong>.reactserverrc</strong> as <code>"webpack-config": "./webpack.config.js"</code></p>
  
  <pre><code>export default (webpackConfig) =&gt; {
    webpackConfig.module.loaders.splice(0, 0,
      { test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&amp;mimetype=application/font-woff" },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&amp;mimetype=application/octet-stream" },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=image/svg+xml" },
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'url-loader?limit=8192'
      },
      {
        test: /\.(mp4|ogg)$/,
        loader: 'file-loader'
      }
    )
    return webpackConfig
  }
  </code></pre>
  
  <p>Here is my React Component:</p>
  
  <pre><code>import React from 'react';
  require('../styles/footer.scss');
  
  const myLogo = require('../images/logo.svg');
  
  export default class Footer extends React.Component {
    constructor(props) {
      super(props);
      this.state = {};
    }
  
    render() {
      return (
          &lt;div&gt;
              &lt;nav className="flexcontainer"&gt;
                  &lt;div className="flexitem"&gt;&lt;img src={myLogo} className="footer-logo"/&gt;&lt;/div&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>That said, requiring SVG in jsx like this works though: </p>
  
  <pre><code>&lt;img src={require('../images/logo.svg')} /&gt;
  </code></pre>
  
  <p>I'm using node v6.2.2 and the following modules</p>
  
  <pre><code>└── react@0.14.8
  └── react-server@0.4.8 
  └─┬ react-server-cli@0.4.9
    └── webpack@1.13.2 
  </code></pre>