Webpack not parsing JSON

Question

I'm trying to load a JSON file into my ReactJS application, but any of the following methods I've tried the following:

Require:

const countries =require('../../json/countries.json');

// Also fails the exact same way with redundant parse call:
const countries = JSON.parse(require('../../json/countries.json'));

Importing using json-loader:

import countries from '../../json/countries.json';

Using the following loader in loaders

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

The JSON loads, but fails to parse:

./src/app/json/countries.json
    Module build failed: SyntaxError: /src/app/json/countries.json: 
Unexpected token, expected ; (2:6)

  1 | {
> 2 |   "BD": "Bangladesh",
    |       ^
  3 |   "BE": "Belgium",
  4 |   "BF": "Burkina Faso",
  5 |   "BG": "Bulgaria",

The countries.json file is valid JSON downloaded from http://country.io, but it seems the quotes are causing an issue. But this is valid JSON being loaded by JavaScript, so it should work together seamlessly.

Any idea what the problem is?

SOLVED

I solved this issue by changing the loader directive into use:

let config = {
    module: {
        loaders: [
           ...
            {
                test: /\.json$/,
                use: {
                    loader: 'json-loader'
                }
            }
        ]
    }
};

i don't understand, why are you trying to **parse** a `json`? it's already a javascript object, not a string. — Sagiv b.g, Oct 08 '17 at 16:59
I suggest the camelCase convention for JSON https://stackoverflow.com/questions/5543490/json-naming-convention — , Oct 08 '17 at 17:11
I only tried parsing after I got an error without it. Something else is going on. — mwieczorek, Oct 08 '17 at 17:12
@SamDev This is a key/value map with two letter country codes. I don't see how the case of the keys is affecting anything. — mwieczorek, Oct 08 '17 at 17:14
@mwieczorek May be the naming conventions (variables should start with lower case letters) — , Oct 08 '17 at 17:22
@SamDev the naming convention is moot. Just to humor you, I changed "BD" to "bd" and of course, it did not matter. Please don't lecture me on naming conventions. Now if you have anything constructive to add... — mwieczorek, Oct 08 '17 at 17:27
@mwieczorek I'm just trying to help as for my knowledge, By the way I'm not professor that I'm lecturing you on stack overflow - It's better to solve your problem yourself — , Oct 08 '17 at 17:37

score 0 · Answer 1 · answered Oct 08 '17 at 17:04

0

You are loading a json file already, no need to parse it.
If it was a string you could parse it.
Here is a small example to demonstrate the difference:

const json = {
  "BD": "Bangladesh",
  "BE": "Belgium",
  "BF": "Burkina Faso",
  "BG": "Bulgaria"
}

const strJson = `{
  "BD": "Bangladesh",
  "BE": "Belgium",
  "BF": "Burkina Faso",
  "BG": "Bulgaria"
}`

console.log('string parsed to a json',JSON.parse(strJson));
console.log('regular json',json);

answered Oct 08 '17 at 17:04

Sagiv b.g

30,379
9
68
99

Using it without parsing doesn't work either though: `const countries = require('../../json/countries.json');` – mwieczorek Oct 08 '17 at 17:10
aw, you said _"The JSON loads, but fails to parse"_ so i thought no problems with loading it. what do you get after loading it? any errors? – Sagiv b.g Oct 08 '17 at 17:12

Webpack not parsing JSON

1 Answers1