Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 755
XEnterprise Avatar asked Mar 19 '18 08:03

XEnterprise


People also ask

What is JSON loader?

public class JSONLoader extends AbstractFileLoader implements BatchConverter, URLSourcedLoader. Reads a source that is in the JSON format. It automatically decompresses the data if the extension is '. json. gz'.

What does the webpack -- config webpack config js do?

Webpack configs allow you to configure and extend Webpack's basic functionality. A Webpack config is a JavaScript object that configures one of Webpack's options. Most projects define their Webpack config in a top-level webpack.

Where is webpack config JS?

The webpack configuration file webpack. config. js is the file that contains all the configuration, plugins, loaders, etc. to build the JavaScript part of the NativeScript application. The file is located at the root of the NativeScript application.


1 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.

like image 149
Sin Avatar answered Sep 22 '22 03:09

Sin