webpack installation, invalid configuration object

programming web dev
1

Please I know I might be doing something wrong, but surely I need help. At first I had problem with installing webpack, which I hope I got to work finally by installing it globally, but then trying to run the app, I got this problem. The English is pretty clear but being new I have no idea what went wrong and how to solve it please help me. Thanks in advance
Below is a screenshot of my cmd:

Capture1
Capture11363×265 7.02 KB

2

Are you able to use create-react-app to create a new/blank app and have it run?

3

yes Sir please I am able to do that: Screenshots below

Capture2
Capture21365×682 21.2 KB
![Capture3|690x362]

4

That is really strange. This means your webpack and everything else is configured properly. Can you share your source code for your project?

5

My index.js files starts here: :unicorn:

import React from "react";
import ReactDOM from "react-dom";
var HelloWorld = React.createClass({
    render: function () {
        return (
            <p>Hello, {this.props.greetTarget}!</p>
        );   
 }
});
ReactDOM.render(
    <div>
        <HelloWorld greetTarget="Batman" />
    </div>,
    document.querySelector("#container")
);

My index.html starts here :writing_hand:t2:

<!DOCTYPE html>
<html><head>
    <title>React! React! React!</title>
</head><body>
    <div id="container"></div>
    <script src="output/myCode.js"></script>
</body></html>

My package.json starts here :writing_hand:t2:
**{
  "name": "mytotallyawesomeapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-loader": "^8.1.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "webpack": "^5.0.0"
  },
  "babel": {
    "presets": [
      "es2015",
      "react"
    ]
  },
  "devDependencies": {
    "webpack-cli": "^4.0.0"
  }
}

**
My webpack.config.js starts here :writing_hand:t2:

var webpack = require("webpack");
var path = require("path");
var DEV = path.resolve(__dirname, "dev");
var OUTPUT = path.resolve(__dirname, "output");
var config = {    entry: DEV + "/index.jsx",
    output: {
        path: OUTPUT,
        filename: "myCode.js"
    },
    module: {
        loaders: [{
            include: DEV,
            loader: "babel",        }]   } };
module.exports = config;
6

Capture4
Capture41366×729 19.6 KB

This is the HelloWorld project I did using your youtube channel today, All these make me to think my problem is coming from the advanced version of webpack I am using compared to what you used in the book…All the same I here to learn from you. Thank you

7

I meant, can you upload your source files (like your project) to directly to github or as a Zip file? I’d like to run the exact same commands locally on your version of the project and see why it isn’t working.

The chapter in the book corresponds to this version here: https://www.kirupa.com/react/using_redux_with_react.htm These instructions worked for me :slight_smile: