Module parsing failed while using webpack 4 for a react project

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

> [email protected] 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! [email protected] dev: `webpack --mode development ./src/index.js --output ./dist/main.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] 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.

Can you also post packeges versions of your packeges.json file. — Alexander Kireyev
– Alexander Kireyev, Commented Nov 28, 2018 at 14:36
@zishe updated the question for displaying full package.json — Rohan
– Rohan, Commented Nov 28, 2018 at 14:39
Thank you. You are using a bit outdated versions of babel. Can you try to use this instead. I'm not sure, but I think other things are the same. — Alexander Kireyev
– Alexander Kireyev, Commented Nov 28, 2018 at 14:42

Dinesh Pandiyan · Accepted Answer · 2018-11-28 14:44:29Z

2

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

answered Nov 28, 2018 at 14:44

Dinesh Pandiyan

6,3293 gold badges36 silver badges50 bronze badges

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

Collectives™ on Stack Overflow

Module parsing failed while using webpack 4 for a react project

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related