Module parsing failed while using webpack 4 for a react project - reactjs

Question

I am having trouble configuring my react project with Webpack 4.
I am printing my file contents here:
package.json (script part):
{
"name": "todo",
"version": "1.0.0",
"description": "a ToDo app built using react and webpack",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development ./src/index.js --output ./dist/main.js",
"build": "webpack --mode production ./src/index.js --output ./dist/main.js"
},
"author": "themaskedbit",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"webpack": "^4.26.1",
"webpack-cli": "^3.1.2"
},
"dependencies": {
"react": "^16.6.3",
"react-dom": "^16.6.3"
}
}
babelrc:
{
"presets": [
"#babel/preset-env", "#babel/preset-react"
]
}
webpack.config.js :
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
index.js :
import data from "./data/items";
import React from 'react';
import {render} from 'react-dom';
import ListItem from "./components/listItem";
render(
<ListItem items={data}/>,
document.getElementById("app")
);
With the above configuration, while I am trying to run the webpack using dev script. I am getting the below error:
$ npm run dev
> todo#1.0.0 dev C:\Users\rejir\Documents\HP works\ToDo
> webpack --mode development ./src/index.js --output ./dist/main.js
Hash: 0fac7774f9aa4bb8aeed
Version: webpack 4.26.1
Time: 234ms
Built at: 2018-11-28 19:50:35
Asset Size Chunks Chunk Names
main.js 4.01 KiB main [emitted] main
Entrypoint main = main.js
[./src/index.js] 227 bytes {main} [built] [failed] [1 error]
ERROR in ./src/index.js 9:4
Module parse failed: Unexpected token (9:4)
You may need an appropriate loader to handle this file type.
|
| render(
> <ListItem items={data}/>,
| document.getElementById("app")
| );
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! todo#1.0.0 dev: `webpack --mode development ./src/index.js --output ./dist/main.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the todo#1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\rejir\AppData\Roaming\npm-cache\_logs\2018-11-28T14_20_35_305Z-debug.log
Please help me with the webpack configuration.
My understanding is that I am including the babel-loader in a wrong way. Searching through stackoverflow answers didn't give me a clue to solve my problem. If any fellow developers can help me in solving this issue, it will be good for me.
Thanks in advance.

Answer 1

You need to pass the config file while running webpack command
"dev": "webpack --mode development ./src/index.js --output ./dist/main.js --config webpack.config.js",
"build": "webpack --mode production ./src/index.js --output ./dist/main.js --config webpack.config.js"
More info here - use-custom-configuration-file