How to fix “Module build failed: SyntaxError: Unexpected token” error when using JSON file in react?

Question

I am following a react tutorial by Brian holt and i need to import .json file inside my react component like this : code

When I try to build my project i was getting

ERROR in ./data.json
Module build failed: SyntaxError: Unexpected token, expected

like this: Error caption in terminal

at first i thought that it was an eslint issue but it seems that it happens on the build step, i tried adding a json-loader to webpack but without any success.

Webpack Version: 2.6.1

Babel Core Version: 6.24.1

Babel Loader Version: 7.0.0, this is my webpack config file :

const path = require('path')
module.exports = {
   context: __dirname,
   entry: './js/clientApp',
   devtool: 'cheap-eval-source-map',
   output: {
      path: path.join(__dirname, 'public'),
      filename: 'bundle.js',
      publicPath: '/assets/'
   },
   resolve: {
      extensions: ['.js', '.jsx', ',json']
   },
   devServer: {
      publicPath: '/public/',
      port: 2110,
      open: true,
      historyApiFallback: true
   },
   stats: {
      colors: true,
      reasons: true,
      chunks: true
   },
   module: {
      rules: [
         {
            enforce: 'pre',
            test: /\.jsx?/,
            loader: 'eslint-loader',
            exclude: /node_modules/
         },

         {
            test: /\.jsx?/,
            loader: 'babel-loader'
         }
      ]
   }
}

and this is my .babelrc file :

{
    "presets": [
        "react", ["env", {
            "targets": {
                "browsers": "last 2 versions"
            },
            "loose": true,
            "modules": false
        }]
    ]
}

Any suggestions please ?

Possible duplicate of es6 modules implementation, how to load a json file — btzr
– btzr, Commented Mar 18, 2018 at 23:04
you need to use json-loader, check this answer: stackoverflow.com/a/33650470/6836839 — btzr
– btzr, Commented Mar 18, 2018 at 23:06
@btzr i tried installing the json-loader and the error persists !! — Ma'mun
– Ma'mun, Commented Mar 18, 2018 at 23:14
i ve already posted a caption of the error and this is how it is ERROR in ./data.json Module build failed: SyntaxError: Unexpected token, expected ; (2:11) 1 | { > 2 | "shows": [ | ^ 3 | 4 | { 5 | "title": "Atlanta", — Ma'mun
– Ma'mun, Commented Mar 18, 2018 at 23:31

btzr · Accepted Answer · 2018-03-19 01:27:47Z

2

Regular Expression

The test property identifies which file or files should be transformed.

The problem is the regular expression on your rules:

{ test: /\.jsx?/ }

Your telling webpack to use babel-loader with any file extension starting with .js or .jsx

So as you can see .json match the test.

Solution

$ - matches anything until the end of the string

To fix this just replace ? with $, see the example below:

 module: {
      rules: [
         {
            test: /\.jsx$/,
            loader: 'babel-loader'
         }
      ]
   }

edited Mar 19, 2018 at 1:27

answered Mar 19, 2018 at 1:14

btzr

2,15421 silver badges26 bronze badges

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

1 Comment

Ma'mun Over a year ago

Thankkkkkk you so much @btzr for your help, that was really a nightmare for me xdxd.

Collectives™ on Stack Overflow

How to fix “Module build failed: SyntaxError: Unexpected token” error when using JSON file in react?

1 Answer 1

Regular Expression

Solution

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Regular Expression

Solution

1 Comment

Linked

Related