Webpack: Error: configuration.module has an unknown property ‘preloaders’

I have a lot of entries now in my debug log, from all the random errors and bugs that I encounter during my regular work. I figure I might as well start sharing some of it on here as well. Who knows it might just save some poor soul out there a few hours of tearing their hair out! 😉

The problem

You just started a new webpack project and happily copied over an old webpack configuration to make a few tweaks to get the project set up. Or, maybe you decided suddenly to upgrade our webpack package. Suddenly, when you run webpack, you see the following error:

configuration.module has an unknown property ‘preloaders'

The solution

If you encounter this error, then it is more than likely you are using webpack version 2 and haven’t migrated your webpack version 1 configuration over yet.

In webpack version 2, there’s two gotchas related to this problem:

  1. The “loaders” section is now renamed to “rules”.
  2. The “preloaders” section is no more. Instead of a separate preloaders section, we need to move the preloading rules into the “rules” section with an enforce property set to “pre”.

Here’s an example of what the module section of the webpack configuration should like to fix this error message:

module: {
	rules: [
			enforce: 'pre',
			test: /\.js$/,
			exclude: 'node_modules',
			loader: 'jshint-loader'
			test: /\.css$/,
			loader: "style!css!postcss",
		// other loaders


I encountered this error last month, when I was trying to set up webpack in a new project. I innocently ran npm install webpack…but alas, inadvertently installed webpack version 2, which meant that lots of things were breaking with my old webpack v1 configuration file.  Lots of things changed with webpack version 2, which means that we need to make some updates to get up to speed with the new version.

For a more detailed migration guide for webpack version 1 to webpack version 2, check here: https://webpack.js.org/guides/migrating/.

Additional Resources