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')
     )

Yes. I do have the .babelrc file. That was one of the earlier videos. — penone
– penone, Commented Mar 22, 2018 at 19:56
inside your lib.js add import Text from '!json!./titles'; notice extra !json! at the start — Aaqib
– Aaqib, Commented Mar 22, 2018 at 19:57

codejockie · Accepted Answer · 2019-07-31 02:07:49Z

83

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'

edited Jul 31, 2019 at 2:07

codejockie

11k5 gold badges52 silver badges58 bronze badges

answered Apr 17, 2018 at 13:27

Tobi Omotayo

1,93117 silver badges31 bronze badges

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

1 Comment

Mahmoud Abdelsattar Over a year ago

The json-loader documentation url is not valid anymore.

t_dom93 · Accepted Answer · 2020-10-27 15:24:21Z

3

json-loader is not required anymore:

⚠️ Since webpack >= v2.0.0, importing of JSON files will work by default. You might still want to use this if you use a custom file extension.

Docs: https://webpack.js.org/migrate/3/#json-loader-is-not-required-anymore

answered Oct 27, 2020 at 15:24

t_dom93

11.6k3 gold badges56 silver badges40 bronze badges

Comments

Albert · Accepted Answer · 2021-09-21 12:47:06Z

1

I had the same issue and resolved it by ensuring no spacing on key and value on the JSON text

answered Sep 21, 2021 at 12:47

Albert

662 silver badges2 bronze badges

Comments

Aleksandra · Accepted Answer · 2022-05-16 13:16:17Z

1

Had a similar caused by invalid data in JSON (using it as .jsonc and having a comment)

edited May 16, 2022 at 13:16

answered May 16, 2022 at 13:16

Aleksandra

113 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

James Gentes · Accepted Answer · 2018-12-12 21:54:57Z

0

Another way to solve this is to modify your package.json file to add a browser section:

"browser": {
  "colors": false,
  "events": "eventemitter3",
  "checkForModuleDuplicates": false,
  "url": "./shims/url",      
  "tracer": false
}

Webpack will respect this section and ignore anything set to : false or otherwise load the corresponding module from the value of the key:value pair.

answered Dec 12, 2018 at 21:54

James Gentes

8,22610 gold badges47 silver badges66 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Linked

Related