Error running webpack

[jannovergara]

I ran webpack for the first tutorial I encountered this issue:

$ webpack
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

• configuration.module has an unknown property 'loaders'. These properties are valid:
  object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
  -> Options affecting the normal modules (NormalModuleFactory).

From serverless/serverless#4788

Fixed by changing loaders to rules in webpack.config.js
But then saving and running webpack again I encountered another issue.

ERROR in ./js/client.js
Module build failed (from ../node_modules/babel-loader/lib/index.js):
TypeError: Cannot read property 'babel' of undefined
at Object.module.exports (<skip>..\react-js-tutorials\1-basic-react\node_modules\babel-loader\lib\index.js:103:36)

Hope you can help me on this thanks!

[imsamdez]

Here is an updated version of the module part of the webpack.config.js. You may need to change it according to your needs. It used Webpack 4.

    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /(node_modules|bower_components|.vscode|.git|build)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['react', 'es2015', 'stage-0'],
                        plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
                    }
                }
            }
        ]
    },

[jannovergara]

Apparently I was able to make a workaround with this:

module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /.css$/,
use: ["style-loader", "css-loader"]
}
]
},

But thanks for the reply! Appreciate much.

[moonlight16]

At first I was getting this error:

Cannot read property 'babel' of undefined

Then after following @sdubrez suggested changes here, now I'm getting this error:

1-basic-react $ webpack
Hash: b32ced688df0d5aea663
Version: webpack 4.21.0
Time: 106ms
Built at: 10/17/2018 6:30:26 PM
        Asset     Size  Chunks             Chunk Names
client.min.js  8.7 KiB    main  [emitted]  main
Entrypoint main = client.min.js
[./js/client.js] 217 bytes {main} [built] [failed] [1 error]

ERROR in ./js/client.js 7:16
Module parse failed: Unexpected token (7:16)
You may need an appropriate loader to handle this file type.
| 
| const app = document.getElementById('app');
> ReactDOM.render(<Layout/>, app);
| 

This is following the code in 1-basic-react tutorial