Cannot read json in React.js, unexpected token error

Question

I am unable to get the data from a json file in React.js I have checked myJSON on JSLINT and use a Windows system.

Am not trying to display it yet just storing in a variable, it is still throwing an error :

ERROR in ./src/app/document.json

Module build failed: SyntaxError: C:/Users/Ant/Documents/reactapplication/src/app/document.json: Unexpected token, expected ; (2:14)

1 | {
2 |         "name":"Product",
  |               ^
3 |         "properties":
4 |         {
5 |                 "id":

Here is my index.js

var React = require('react');
var ReactDOM = require('react-dom');

var App = require('./App');
var Json = require('./document');

ReactDOM.render(<div>Hello 123</div>, document.getElementById('app'));

Am trying to store the json as an object in Json but I am not able to.

My webpack.config

var path = require("path");

var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");

var config = {
entry: SRC_DIR + "/app/index.js",
output: {
    path: DIST_DIR + "/app",
    filename: "bundle.js",
    publicPath: "/app/"
},
module: {
    loaders: [
        {
            test: /\.js?/,
            include: SRC_DIR,
            loader: "babel-loader",
            query: {
                presets: ["react", "es2015", "stage-2"]
            }
        }
    ]
}
};

module.exports = config; 

Dependencies are:

"dependencies": {
"fixed-data-table": "^0.6.4",
"react": "^15.5.4",
"react-dom": "^15.5.4"
  },
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"json-loader": "^0.5.4",
"webpack": "^2.5.1",
"webpack-dev-server": "^2.4.5"
}

Answer 1

ES6/ES2015

You could load the JSON using import as syntax:

// import the JSON
import * as data from './document.json';
// use the JSON data
console.log(data);

require

If you are planning to use require to import the JSON make sure you are assign the value of the JSON to module.exports like this so:

// document.js
module.exports = { "id": 1, "name":"foo" };

Change the .json to a .js file type.

That should allow the statement var Json = require('./document'); to work.

Hopefully that helps!

Answer 2

Found the Solution:

Add the following code to loaders in webpack:

{ test: /\.json$/, loader: 'json-loader' }

Webpack 2.0 by default uses json-loader without having to explicitly call it, this line makes sure that the json-loader renders the file as a json.

You can continue using either of require() or import to load the json.

Answer 3

Maybe try adding resolve.extensions to your webpack configuration

{
    // ...
    resolve: {
        extensions: ['json', 'js', 'jsx'],
    },
    // ...
}