Module parse failed: Unexpected token m in JSON at position 0

Question

I am working through the Lynda tutorial for React.js Essential training and am running into a problem with chapter 13 - Loading JSON with webpack.

When I try and compile and start the server I am getting the following error:

ERROR in ./src/titles.json Module parse failed: Unexpected token m in JSON at position 0 You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token m in JSON at position 0     at JSON.parse (<anonymous>)     at JsonParser.parse (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\lib\JsonParser.js:15:21)     at doBuild.err (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\lib\NormalModule.js:367:32)     at runLoaders (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\lib\NormalModule.js:264:12)     at C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:370:3     at iterateNormalLoaders (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:211:10)     at iterateNormalLoaders (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:218:10)     at C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:233:3     at runSyncOrAsync (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:130:11)     at iterateNormalLoaders (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:229:2)     at Array.<anonymous> (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:202:4)     at Storage.finished (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:43:16)     at provider (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:79:9)     at C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\graceful-fs\graceful-fs.js:78:16     at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:528:3)  @ ./src/lib.js 12:14-38  @ ./src/index.js  @ multi (webpack)-dev-server/client?http://localhost:2000 ./src/index.js  ERROR in chunk main [entry] bundle.js Cannot read property 'replace' of undefined 

My titles.json file looks like this:

{        "hello": "Bonjour",     "goodbye": "Au Reviour" } 

What am I doing wrong?

EDIT Adding my webpack.config:

var webpack = require("webpack");      module.exports = {         entry: __dirname + "/src/index.js",         output: {             path: __dirname + "/dist/assets",             filename: "bundle.js",             publicPath: "assets",         },         devServer: {             inline: true,             contentBase: __dirname + '/dist',             port: 2000         },         module: {             rules: [             {                 test: /\.js$/,                 exclude: /(node_modules)/,                 enforce: "pre",                 loader: "babel-loader",                 query: {                     presets: ["latest", "stage-0", "react"]                 }              },              {                 test: /\.json$/,                 exclude: /(node_modules)/,                 loader: "json-loader"                    }              ]         }     } 

Edit 2 Adding lib.js file and index.js file

lib.js

 import React from 'react'     import text from './titles.json'      export const hello = (         <h1 id='title'             className='header'             style={{backgroundColor: 'purple', color: 'yellow'}}>             {text.hello}             </h1>             )      export const goodbye = (         <h1 id='title'             className='header'             style={{backgroundColor: 'yellow', color: 'purple'}}>             {text.goodbye}             </h1>         )        

Index.js

import React from 'react' import { render } from 'react-dom' import { hello, goodbye } from './lib'  render(     <div>        { hello }         { goodbye }     </div>,      document.getElementById('react-container')      ) 

Answer 1

I had the same issue but when I check the json-loader documentation here I found out that json-loader isn't necessary anymore in webpack version greater than or equal to 2.0. So you could remove the json-loader from your webpack config file and everything should work assuming you import your json file appropriately import text from './titles.json'