How to import local JSON into React ES6

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

maybe this will help: http://stackoverflow.com/a/42032709/4096589 — radix, Apr 28 '17 at 20:17
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, Apr 28 '17 at 20:53

score 0 · Answer 1 · edited May 23 '17 at 10:31

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 '17 at 10:31

Community

1
1

answered Apr 28 '17 at 21:39

Storm

387
1
5
18

How to import local JSON into React ES6

1 Answers1