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
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'.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With