build error with webpack

Question

I'm getting an error when i ran webpack and i can't seem to find the reason why.

    Entrypoint main = bundle.js
   [0] ./client/client.js 224 bytes {0} [built] [failed] [1 error]
   [1] multi ./client/client.js 28 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in ./client/client.js
Module build failed: TypeError: Cannot read property 'babel' of undefined
    at Object.module.exports (/Users/XXX/Desktop/react-training/react-todo-list/node_modules/babel-loader/lib/index.js:103:36)
 @ multi ./client/client.js

here is my package.json,

{
  "name": "react-todo-list",
  "version": "1.0.0",
  "description": "A simple todo list app built with React, Redux and Webpack",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "nodemon server/server.js"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/kweiberth/react-todo-list.git"
  },
  "author": "XXXX",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.2",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "express": "^4.13.4",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "webpack": "^1.12.13"
  }
}

here is my webpack.config,

module.exports = {
    entry: ['./client/client.js'],
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js',
        publicPath: '/', 
    },
    module:{
        rules:[
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['react', 'es2015']
                }
            }
        ]
    }

}

I've tried installing different versions of babel and webpack with no luck. I'm following an old tutorial on youtube and I was wondering if the older version mentioned in the package.json causes it. This is my initial days learning react and getting use to the node stack. It'd be great if someone can lend me a helping hand to figure this out.

Answer 1

you are using a very old version of webpack (1.12.13) ... we are already in the version 4xx range. It can be really hard to get this all set up in the beginning. I made the same mistake of thinking, that I can set it all up by myself and in the end I spent weeks scratchng my head and not writing any code at all.

This doesn't really answer your question, but... I would really recommend using something to get you up und running quickly, like create-react-app. If, by any chance, you are still curious how the whole bundling and transpiling stuff works then you can look into that later. But for now, this whole stuff might just kill your motivation. Keep it up! Eventually everything will come together.

Update

Ok, in case you really want to get to the bedrock. The first thing you should do is update your packages. Especially Webpack. You also need webpack-cli when you want to use webpack v4. Furthermore I would suggest reading the webpack getting started section. There are many good examples on how to set up your webpack config. Link to Webpack Docs

Answer 2

I would just recommend using create-react-app, You will not need to bother with build tools. Especially since you're learning React, not the various build tools that accompany it.

npx create-react-app my-app
cd my-app
npm start

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

If you don't want to do that, update both Babel, Webpack and React.