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

Godewyn

Answer 1

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"
      }
    ]
  }

Sacaton

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 – Oatmeal

@Oatmeal - 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 – Sacaton

Answer 2

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

Celio

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'. – Fulbert

@Akshay Your solution is the right one since versions above 4.1.1 : Check this #49204341 – Triptolemus

Answer 3

First uninstall webpack

npm uninstall webpack --save-dev

followed by

npm install [email protected] --save-dev

Lumber

Answer 4

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"
        }
    ]

},

Desiccated

Answer 5

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

Dulciana

Answer 6

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

Sweated