Load and display json data in react component

Question

I'm trying to load in data from a json file in a react component. I am trying this solution in my app.js.

https://stackoverflow.com/a/33141549/1937021

var data = require('json!../json/acordes.json');

"Cannot resolve module JSON error" in the terminal.

I do this in the app.js file. My folder structure is as follows:

/src
  /js
    app.js
  /css
  /json
    acordes.json

The rest of my code looks like this:

https://gist.github.com/dabit3/651f2dae058ff99810eb771c2817d622

Answer 1

I may be mistaken, but in order to be able to require json in such a way, you have to use webpack with json-loader.

Assuming, you use webpack. Install json-loader:

npm install --save json-loader

And add to webpack loaders:

//.. 
loaders: [
  {test: /\.json$/, loader: "json", include: "path/to/your/sources"}
]