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"
}

Maybe try adding the json extension when requiring. `require('./document.json');` webpack by default should be able to import json without any additional loaders. — pizzarob, May 18 '17 at 16:16
Also since you are using webpack you should utilize the es6 import syntax instead of require. — pizzarob, May 18 '17 at 16:17
I tried adding .json as well as using import statement, both are throwing the same error. — Assasin_ng, May 18 '17 at 16:31

Alexander Staroselsky · Answer 1 · 2017-05-18T16:13:33.120

4

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!

edited May 18 '17 at 16:13

answered May 18 '17 at 15:31

Alexander Staroselsky

37,209
15
79
91

I dont want to modify my json file and use it as is, is there another way of importing json data other than require() – Assasin_ng May 18 '17 at 15:37
You would likely need an additional Webpack loader , see http://stackoverflow.com/questions/33650399/es6-modules-implementation-how-to-load-a-json-file – Alexander Staroselsky May 18 '17 at 15:42

score 2 · Answer 2 · edited May 18 '17 at 17:01

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.

edited May 18 '17 at 17:01

answered May 18 '17 at 16:52

Assasin_ng

31
1
5

score 0 · Answer 3 · answered May 18 '17 at 16:44

0

Maybe try adding resolve.extensions to your webpack configuration

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

answered May 18 '17 at 16:44

pizzarob

11,711
6
48
69

Cannot read json in React.js, unexpected token error

3 Answers3

Linked