[解決済み] ReactでJSONファイルをインポートする

質問

私はReactの初心者で、JSONをインポートしようとしています。 DATA を外部ファイルから取得しました。次のようなエラーが発生します。

モジュール "./customData.json" を見つけることができません。

どなたか助けてください。私は私の DATA 変数が index.js が、外部のJSONファイルにある場合は、そうではありません。

index.js

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 (
      <div>
        <Profile name={this.props.profileData.name}imgUrl={this.props.profileData.imgURL} />
        <Hobbies hobbyList={this.props.profileData.hobbyList}/>
      </div>
    );
  }
}

ReactDOM.render(<App profileData={DATA}/>, document.querySelector('.container'));

hobbies.js

import React, {Component} from 'react';

var Hobbies = React.createClass({
  render: function(){
    var hobbies = this.props.hobbyList.map(function(hobby, index){
        return (<li key={index}>{hobby}</li>);
    });
    return (
        <div>
            <h5>My hobbies:</h5>
            <ul>
                {hobbies}
            </ul>
        </div>
    );
  } 
});

export default Hobbies;

プロフィール.js

import React from 'react';

var Profile = React.createClass({
render: function(){
    return (
        <div>
            <h3>{this.props.name}</h3>
            <img src={this.props.imgUrl} />
        </div>
    )
  }
});

export default Profile

customData.json

var DATA = {    
    name: 'John Smith',
    imgURL: 'http://lorempixel.com/100/100/',
    hobbyList: ['coding', 'writing', 'skiing']
}

export default DATA

解決方法は？

一つの良い方法は（データや設定用ではなくコード用の偽の .js 拡張子を追加することなく）次のようなものです。 json-loader モジュールを使用します。もしあなたが create-react-app を使用してプロジェクトを雛形化する場合、モジュールはすでに含まれているので、json をインポートする必要があります。

import Profile from './components/profile';

これは の回答で詳しく説明しています。