0

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 ?

Ma'mun
  • 11
  • 4
  • 1
    Can you share your data.json – Aaqib Mar 18 '18 at 20:59
  • Possible duplicate of [es6 modules implementation, how to load a json file](https://stackoverflow.com/questions/33650399/es6-modules-implementation-how-to-load-a-json-file) – btzr Mar 18 '18 at 23:04
  • you need to use [`json-loader`](https://github.com/webpack-contrib/json-loader), check this answer: https://stackoverflow.com/a/33650470/6836839 – btzr Mar 18 '18 at 23:06
  • i already tried using [www.jsonlint.com] for the JSON validation and my file passed without any error – Ma'mun Mar 18 '18 at 23:08
  • You aren't using `json-loader` please see my previous comment ^^ – btzr Mar 18 '18 at 23:12
  • You forgot to add a new rule: `{ test: /\.json$/, loader: 'json-loader' }` – btzr Mar 18 '18 at 23:13
  • 1
    @btzr i tried installing the json-loader and the error persists !! – Ma'mun Mar 18 '18 at 23:14
  • sorry I just found this: [json-loader is not required anymore](https://webpack.js.org/guides/migrating/#json-loader-is-not-required-anymore), indeed that's not the problem... – btzr Mar 18 '18 at 23:18
  • thx anyway bro, i hope someone could really resolve this issue – Ma'mun Mar 18 '18 at 23:22
  • You have a typo: `extensions: ['.js', '.jsx', ',json']` – btzr Mar 18 '18 at 23:24
  • it should be `'.json'`, but try to remove it since you don't need it. – btzr Mar 18 '18 at 23:25
  • `extensions: ['.js', '.jsx']` – btzr Mar 18 '18 at 23:25
  • i already fix it but no change, always the same error – Ma'mun Mar 18 '18 at 23:27
  • can you post the full error message? – btzr Mar 18 '18 at 23:27
  • 1
    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 Mar 18 '18 at 23:31
  • the problem is this regex: `/\.jsx?/`, check my answer below... – btzr Mar 19 '18 at 01:30

1 Answers1

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'
         }
      ]
   }
btzr
  • 2,077
  • 18
  • 25