Error in installing webpack on REACT: Invalid configuration object. Webpack has been initialised using a configuration object that

Question

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 { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? } -> Options affecting the normal modules (NormalModuleFactory).
configuration.output.path: The provided value "dist/assets" is not an absolute path! -> The output directory as absolute path (required).

In React Tutorial course("Building with webpack") (I use of windows but course is on linux)

my webpack.config.js

var webpack = require("webpack");
module.exports = {
    entry: "./src/index.js",
    output: {
        path: "dist/assets",
        filename: "bundle.js",
        publicPath: "assets"
    },
    devServer: {
        inline: true,
        contentBase: './dist',
        port: 3000
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: ["babel-loader"],
                query: {
                    presets: ["latest", "react", "stage-0"]
                }
            }
        ]
    }
}

project directories

my index.js

const { createElement } = React
const { render } = ReactDOM

const style = {
    backgroundColor: 'orange',
    color:'white',
    fontFamily: 'verdana'
}

const title = createElement(
    'h1',
    {id:'title', className:'header', style: style},
    'hello world'
)

render(
    <h1 id='title'
        className='header'
        style={{backgroundColor:'orange'}}>
    hello world
    </h1>,
    document.getElementById('react-container')
)

my cmd with command "webpack" to convert index.js to bundle.js

tutorial's terminal that run webpack successfully!!

This is a coding site, we expect to see the code, not just error messages it outputs. Please edit your question, to provide it, (properly formatted). — Compo

Steve Holgado Steve Holgado · Accepted Answer · 2020-09-24T07:45:21

There are a few issues here:

You are using an invalid key, loaders. It should be rules. This was changed from Webpack v2 onwards. See this page for more information:
https://webpack.js.org/migrate/3/#module-loaders-is-now-module-rules
query has been deprecated in favour of options:
https://webpack.js.org/configuration/module/#ruleoptions--rulequery
The value for the loader key should not be an array.

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules)/,
      loader: "babel-loader",
      options: {
        presets: ["latest", "react", "stage-0"]
      }
    }
  ]
}

Error in installing webpack on REACT: Invalid configuration object. Webpack has been initialised using a configuration object that

1 Answers