Json-Loader in Webpack. Config. Js Not Working

I'm trying to follow a react tutorial, My webpack.config.js file is as follows:

var webpack = require("webpack");
var pth = require("path");

module.exports = {
entry: "./src/index.js",
output: {
    path: __dirname + "/dist",
    filename: "bundle.js"
},
devServer: {
    inline: true,
    contentBase: './dist',
    port: 3000
},
module: {
    rules: [
      { test: /\.js$/, exclude: /(node_modules)/, use: 'babel-loader' },
      { test: /\.json$/, exclude: /(node_modules)/, use: 'json-loader' }
    ]
  }
} 

While my Code files are as follows: I have made components here in lib.js and rendering is being done in index.js which ultimately is called in a HTML div in index.html

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: 'white', color: 'red'}}>
    {text.goodbye}    
</h1>
)

index.js

import React from 'react'
import {render} from 'react-dom'
import {hello, goodbye} from './lib'


const design = {
backgroundColor: 'red',
color: 'white',
fontFamily:'verdana'
}


render(
<div>
    {hello}
    {goodbye}
</div>,    
document.getElementById('react-container')
)

When I run webpack -w command, I experience 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 Object.parse (native)
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:447:3)
@ ./src/lib.js 12:14-38
@ ./src/index.js

ERROR in chunk main [entry]
bundle.js
Cannot read property 'replace' of undefined

My JSON file is as follows: titles.json

{
    "hello": "Bonjour!",
    "goodbye": "Au Revoir"

}

My Module verions are as follows: webpack 4.1.1 json-loader 0.5.7

I have installed webpack and json-loader globally using npm install TIA

2 Answers

I notice you are using webpack 4. According to json-loader README:

Since webpack >= v2.0.0, importing of JSON files will work by default

So if you are using webpack >= v2.0.0 and json-loader together, the file will be transformed twice which caused the issue. The solution is simply delete the json-loader rule.

I was importing the titles.json the wrong way in lib.js

We can do it as follows: In lib.js

var greetings = require('./titles.json')

And it will be utilized as follows:

{greetings.hello}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Chloe Bennett

Chloe Bennett

Culture, Media & Entertainment Columnist

Chloe Bennett explores the intersection of pop culture, streaming entertainment, digital trends, and contemporary lifestyle. Her weekly commentary reaches thousands of culture enthusiasts.

Share this article
Twitter Facebook Pinterest