How to import local JSON into React ES6 [duplicate]

Question

After trying to use json-loader with no success, I cant load an array of JSON into my react code, using webpack 1.4 and babel, if that makes a difference.

import data from '../data/item-types.json';

Returns an empty object with no errors

import data from 'json-loader!../data/item-types.json';

Gives an error message

ERROR in ./~/json-loader!./src/data/item-types.json
Module build failed: SyntaxError: Unexpected token ; in JSON at position 12
    at Object.parse (native)
    at Object.module.exports (...\node_modules\json-loader\index.js:7:48)
 @ ./src/components/search.js 25:17-63

The JSON is an array, 100% valid when pasted in an online JSON editor. I've also tried :

const data = require('../data/item-types.json');

That gives me an empty object

and

const data = require('json!../data/item-types.json');

Gives me the same error as above

Here's a snippet of the data :

["a","b"]

you should make it an object with a key that holds the array. thats how json loaders works. example: {myArray: ["a","b"]} — Sagiv b.g
– Sagiv b.g, Commented Apr 28, 2017 at 20:53

Community · Accepted Answer · 2017-05-23 10:31:24Z

0

json-loader doesn't support json arrays without keys. The array needs to be put inside an object.

https://stackoverflow.com/a/42032709/2765757

Edit : Using Webpack 1.x , I had to add json-loader module to my webpack.config file, and omit the json! keyword when importing the json file to get it to work.

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Apr 28, 2017 at 21:39

Storm

3971 gold badge5 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to import local JSON into React ES6 [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related