import a Json file in a React Component

Question

I'm trying to load languages.json file in a React component. I'm getting the following error at the very first step when I want to import the json file. Here is the error:

ERROR in ./app/languages.json
Module parse failed: /.../languages.json Unexpected token (1:12)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:12)
    at Parser.pp.raise (........)

I'm using webpack and here is the config file:

   var path = require('path');
   var webpack = require('webpack');

   module.exports = {
       entry: ['./app/main.jsx'],
       devtool: 'cheap-module-eval-source-map',
       output: { path: __dirname+"/app", filename: 'bundle.js' },
       module: {
           loaders: [
              {   test: /\.jsx?$/,
                  loader: 'babel-loader',
                  query: { presets: ['es2015', 'react'] },
                  include: path.join(__dirname, 'src')
              }
          ]
      }
  };

and I have these packages installed:

"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18"

This is how I'm tring to import the file (ES6 format):

import lang_code from '../../app/languages.json';

Also, I checked the json file format and validated it! So, where do you think is the problem?

@lux Yes! Thanks for your help. I was on vacation till today, so just tried your solution! ;) — Birish
– Birish, Commented Jul 12, 2016 at 15:24

lux · Accepted Answer · 2016-06-30 17:47:14Z

8

azium is correct that a loader is needed, but here's the configuration for good measure:

npm command

> npm install json-loader --save-dev

webpack.config.js

 module.exports = {
    ....
    resolve: {
        extensions: ['', '.js', '.jsx', '.json']
    },
    ...
   module: {
       ...
            {
                test: /\.json$/,
                loader: 'json'
            }
       ...
   }
}

By adding the json extension to resolve, you won't need to specify it in your import statement.

answered Jun 30, 2016 at 17:47

lux

8,4977 gold badges38 silver badges50 bronze badges

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

1 Comment

azium Over a year ago

Your answer is better :)

Collectives™ on Stack Overflow

import a Json file in a React Component

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related