configuration.module has an unknown property 'loaders'

ReactjsWebpack

Reactjs Problem Overview

my output of error:

> 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).

my webpack.config.js:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel-loader'
      }
    ]
  },
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  }

};


module.exports = config;

my webpack version:

webpack@4.1.1

Reactjs Solutions

Solution 1 - Reactjs

You should change loaders to rules in webpack 4:

change:

loaders

to:

rules

source: Loaders

Example:

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

Solution 2 - Reactjs

Use rules in webpack 4 instead of loaders.

https://webpack.js.org/concepts/loaders/

Solution 3 - Reactjs

You should use the migration utility to migrate your webpack config files, it worked for me.

The migration documentation is also useful.

Solution 4 - Reactjs

Above given answers are working but we can resolve this issue by changing webpack and webpack-dev-server version to

"webpack": "3.8.1",
"webpack-dev-server": "2.9.4"

It can also solve the issue. Hope it will help.

Solution 5 - Reactjs

Working for me below webpack.config.js

module.exports = {
	entry: [
		'.src/index.js'
	],
	output:{
		path: __dirname,
		filename: 'app/js/main.js'
	},
	module:{
		rules: [
	      { test: /\.css$/, use: 'css-loader' },
	      { test: /\.ts$/, use: 'ts-loader' }
	    ]
	}
}
Categories
Recommended Reactjs Solutions
Recommended Webpack Solutions

Previous Solution:

Content-Type header [application/x-www-form-urlencoded] is not supported on Elasticsearch

ElasticsearchCurlMime TypesContent TypeHttp Put

Next Solution:

What is the difference between HashRouter and BrowserRouter in React?

Reactjs

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionS.M_EmamianView Question on Stackoverflow
Solution 1 - ReactjsS.M_EmamianView Answer on Stackoverflow
Solution 2 - ReactjsShawn StephensView Answer on Stackoverflow
Solution 3 - ReactjsMattGView Answer on Stackoverflow
Solution 4 - ReactjsAnshulView Answer on Stackoverflow
Solution 5 - ReactjsPankaj UpadhyayView Answer on Stackoverflow