Webpack config has an unknown property 'preLoaders'

Question

I'm learning webpack from scratch. I've learned how to link javascript files with require. I'm bundling and minifying my js files and i'm listening for changes with watch. I'm setting up loaders to convert my sass files to css. But when I try to setup a linting process with jshint-loader, i'm running into issues.

    module: {
preLoaders: [
        {
            test: /\.js$/, // include .js files
            exclude: /node_modules/, // exclude any and all files in the node_modules folder
            loader: "jshint-loader"
        }
],

loaders: [
  {
    test: /\.scss$/,
    loader: 'style-loader!css-loader!sass-loader'
  },
  {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules$/,
    query: {
      presets: ['es2015']
    }
  }
],

}

Here is the 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 'preLoaders'. These properties are valid: object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, loaders?, noParse?, rules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? } Options affecting the normal modules (NormalModuleFactory).

score 62 · Answer 1 · edited Jun 26 '19 at 03:10

62

You are apparently trying to use examples for webpack v1 with webpack v2. Straight from the changelog:

  module: {
-   preLoaders: [
+   rules: [
      {
        test: /\.js$/,
+       enforce: "pre",
        loader: "eslint-loader"
      }
    ]
  }

edited Jun 26 '19 at 03:10

Gaurang Tandon

5,704
9
37
73

answered Feb 27 '17 at 09:29

Ivan

4,954
2
25
41

module: { preLoaders:[{ test:/\.js$/, exclude:'node_modules', loader:'jshint-loader', }], rules: [ { test: /\.es6$/, exclude: [/node_modules/], loader: "babel-loader", } ] Still am getting error configuration.module has an unknown property 'preLoaders'. Could you please give the full syntax – Aji Jul 25 '18 at 22:00
@Aji - and + are like in diffs: minuses for what to remove and pluses for what to add to your code. So my example would end up having all lines except the `preLoaders` one – Ivan Jul 25 '18 at 23:23

score 30 · Answer 2 · edited Mar 20 '18 at 19:19

30

From v2.1-beta.23 the loaders section is renamed to rules and pre/postLoaders is now defined under each rule with the enforce property.

So just rename preLoaders to rules and you should be good to go ;-)

edited Mar 20 '18 at 19:19

Arpit Aggarwal

21,748
13
80
99

answered Feb 27 '17 at 09:24

NetProvoke

1,092
10
23

1

I have the error with the property 'loaders'. I searched a lot but can't find anything. Then your answer worked like a charm. I just changed 'loaders' to 'rules'. – Akshay Pethani Apr 12 '18 at 09:29
@Akshay Your solution is the right one since versions above 4.1.1 : Check this https://stackoverflow.com/questions/49203841/webpack-4-1-1-configuration-module-has-an-unknown-property-loaders?rq=1 – another Aug 01 '18 at 07:12

score 1 · Answer 3 · edited May 24 '18 at 09:29

1

First uninstall webpack

npm uninstall webpack --save-dev

followed by

npm install webpack@2.1.0-beta.22 --save-dev

edited May 24 '18 at 09:29

Rohit Suthar

3,303
1
34
46

answered Mar 14 '17 at 06:23

Wasim Malik

3
2

score 1 · Answer 4 · answered Jul 18 '17 at 23:23

if you are using webpack 2 then you may use the enforce: 'pre' tag inside the loaders array and this will work as a preload please refer code below for details

module: {
    loaders: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'jshint-loader',
            //this is similar to defining a preloader
            enforce: 'pre'
        },
        {
            test: /\.es6$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        }
    ]

},

score 1 · Answer 5 · answered Aug 17 '18 at 17:48

use this one instead ./webpack.config.js

 var path = require('path');

module.exports = {
   entry: './main.ts',
   resolve: {
     extensions: ['.webpack.js', '.web.js', '.ts', '.js']
   },
   module: {
     rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
   },
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist')
   }
 }

the documentation can be found here the problem is related to the version of ts-loader you installed

score 0 · Answer 6 · answered Mar 18 '19 at 06:30

0

For me it worked by simply changing the "loaders" to "rules".

answered Mar 18 '19 at 06:30

Khushboo Gupta

11
3

Webpack config has an unknown property 'preLoaders'

6 Answers6

Linked