title: Import JSON file in React
body: <p>I'm new to React and I'm trying to import a JSON <code>DATA</code> variable from an external file. I'm getting the following error: </p>
  
  <blockquote>
    <p>Cannot find module "./customData.json"</p>
  </blockquote>
  
  <p>Could some one help me? It works if I have my <code>DATA</code> variable in <code>index.js</code> but not when it's in an external JSON file.</p>
  
  index.js
  
  <pre><code>import React, {Component} from 'react';
  import ReactDOM from 'react-dom';
  import customData from './customData.json';
  import Profile from './components/profile';
  import Hobbies from './components/hobbies';
  
  class App extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;Profile name={this.props.profileData.name}imgUrl={this.props.profileData.imgURL} /&gt;
          &lt;Hobbies hobbyList={this.props.profileData.hobbyList}/&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;App profileData={DATA}/&gt;, document.querySelector('.container'));
  </code></pre>
  
  hobbies.js
  
  <pre><code>import React, {Component} from 'react';
  
  var Hobbies = React.createClass({
    render: function(){
      var hobbies = this.props.hobbyList.map(function(hobby, index){
          return (&lt;li key={index}&gt;{hobby}&lt;/li&gt;);
      });
      return (
          &lt;div&gt;
              &lt;h5&gt;My hobbies:&lt;/h5&gt;
              &lt;ul&gt;
                  {hobbies}
              &lt;/ul&gt;
          &lt;/div&gt;
      );
    } 
  });
  
  export default Hobbies;
  </code></pre>
  
  profile.js
  
  <pre><code>import React from 'react';
  
  var Profile = React.createClass({
  render: function(){
      return (
          &lt;div&gt;
              &lt;h3&gt;{this.props.name}&lt;/h3&gt;
              &lt;img src={this.props.imgUrl} /&gt;
          &lt;/div&gt;
      )
    }
  });
  
  export default Profile
  </code></pre>
  
  customData.json
  
  <pre><code>var DATA = {    
      name: 'John Smith',
      imgURL: 'http://lorempixel.com/100/100/',
      hobbyList: ['coding', 'writing', 'skiing']
  }
  
  export default DATA
  </code></pre>