Импорт файла JSON в React

Question

Я новичок в React, и я пытаюсь импортировать переменную JSON из внешнего файла. Я получаю следующую ошибку:

Cannot find module "./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; 

profile.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 

Заранее спасибо!

Answer 1

попробовать с export default DATA или module.exports = DATA

Answer 2

Пожалуйста, храните файл в формате JSON с расширением .js и убедитесь, что ваш JSON должен быть в том же каталоге.

Answer 3

Один хороший способ (без добавления поддельного расширения .js, предназначенного для кода, а не для данных и конфигураций) - использовать модуль json-loader. Если вы использовали create-react-app на эшафот ваш проект, модуль уже включен, вам просто нужно импортировать JSON:

import Profile from './components/profile'; 

This ответ объясняет больше.