"Module '" + loader.path + "' is not a loader webpack error

Question

webpack version - 2.3.2

node version -4.6.1

Ii am getting this strange error

    /home/ubuntu/workspace/node_modules/webpack/node_modules/loader-runner/lib/loadLoader.js:35
                        throw new Error("Module '" + loader.path + "' is not a loader (must have normal or pitch function)");
                        ^

Error: Module '/home/ubuntu/workspace/node_modules/file/lib/file.js' is not a loader (must have normal or pitch function)
    at loadLoader (/home/ubuntu/workspace/node_modules/webpack/node_modules/loader-runner/lib/loadLoader.js:35:10)
    at iteratePitchingLoaders (/home/ubuntu/workspace/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at runLoaders (/home/ubuntu/workspace/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:362:2)
    at NormalModule.doBuild (/home/ubuntu/workspace/node_modules/webpack/lib/NormalModule.js:179:3)
    at NormalModule.build (/home/ubuntu/workspace/node_modules/webpack/lib/NormalModule.js:268:15)
    at Compilation.buildModule (/home/ubuntu/workspace/node_modules/webpack/lib/Compilation.js:142:10)

I checked the github questions and answers. Looks like I need to add -loaders in all the used loaders. But, I am already using -loaders. Check out my webpack config

    var webpack = require("webpack");
var path = require("path");
var ExtractTextPlugin = require('extract-text-webpack-plugin');


module.exports = {
  entry: {app: './src/app.js' },
  output: {filename: 'public/build/bundle.js',
        sourceMapFilename: 'public/build/bundle.map' },
  module: {
    loaders: [
      { test: /\.(js|jsx)$/, loader: 'babel-loader',options: {
        presets: ['stage-0','react','es2015'],
        plugins: ["transform-decorators-legacy","transform-class-properties"]
    } },
      { test: /\.css$/, loaders: [ 'style-loader', 'css-loader' ] },
      { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file?name=public/fonts/[name].[ext]'  },
   {
  test: /\.(jpe?g|png|gif|svg)$/i,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[sha512:hash:hex].[ext]'
      }
    },
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true,
        mozjpeg: {
          progressive: true
        },
        gifsicle: {
          interlaced: true
        },
        optipng: {
          optimizationLevel: 7
        }
      }
    }
  ]
}
    ]
  }
}

There is no other thread on stackoverflow which solves this issue. Thats why I have to open a new thread.

Answer 1

The issue is with this line:

{ test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file?name=public/fonts/[name].[ext]' }

You have a module called file installed, that Webpack is trying to load. Because it's not a loader, you're getting the error (AFAIK, with any loader configuration, Webpack will always first try to load the module by name verbatim, so file in this case, and only when the module doesn't exist will it retry by appending -loader, so file-loader; however, since file exists, Webpack thinks is has found the correct loader module).

Change it to this:

{ test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file-loader?name=public/fonts/[name].[ext]' }

Answer 2

If you are encountering similar problem, please note that webpack2 needs all the name of loaders to have a suffix of -loader.

So a loader named url shall have to used as url-loader as shown below.

{
  test: /\.(eot|svg|ttf|woff(2)?)(\?v=\d+\.\d+\.\d+)?/,
  loader: 'url-loader'
}

Another example..

{test: /\.css$/, loader: "style-loader!css-loader"},