Why do i get this Webpack loader Error?

Question

I was trying to add bootstrap in my new React project. After running npm install bootstrap and react-bootstrap, i run webpack in my project and i get this Error : What could be the problem ?

/home/dove/projects/yulu/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/dove/projects/yulu/node_modules/url/url.js' is not a loader (must have normal or pitch function) at loadLoader (/home/dove/projects/yulu/node_modules/loader-runner/lib/loadLoader.js:35:10) at iteratePitchingLoaders (/home/dove/projects/yulu/node_modules/loader-runner/lib/LoaderRunner.js:169:2) at runLoaders (/home/dove/projects/yulu/node_modules/loader-runner/lib/LoaderRunner.js:362:2) at NormalModule.doBuild (/home/dove/projects/yulu/node_modules/webpack/lib/NormalModule.js:181:3) at NormalModule.build (/home/dove/projects/yulu/node_modules/webpack/lib/NormalModule.js:274:15) at Compilation.buildModule (/home/dove/projects/yulu/node_modules/webpack/lib/Compilation.js:149:10) at factoryCallback (/home/dove/projects/yulu/node_modules/webpack/lib/Compilation.js:337:12) at factory (/home/dove/projects/yulu/node_modules/webpack/lib/NormalModuleFactory.js:241:5) at applyPluginsAsyncWaterfall (/home/dove/projects/yulu/node_modules/webpack/lib/NormalModuleFactory.js:94:13) at /home/dove/projects/yulu/node_modules/tapable/lib/Tapable.js:268:11 at NormalModuleFactory.params.normalModuleFactory.plugin (/home/dove/projects/yulu/node_modules/webpack/lib/CompatibilityPlugin.js:52:5) at NormalModuleFactory.applyPluginsAsyncWaterfall (/home/dove/projects/yulu/node_modules/tapable/lib/Tapable.js:272:13) at resolver (/home/dove/projects/yulu/node_modules/webpack/lib/NormalModuleFactory.js:69:10) at process.nextTick (/home/dove/projects/yulu/node_modules/webpack/lib/NormalModuleFactory.js:194:7) at _combinedTickCallback (internal/process/next_tick.js:131:7) at process._tickCallback (internal/process/next_tick.js:180:9)

my webpack.config.js

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

module.exports =
{
  entry :{

    app :'./app/app.jsx',

  },

  output :{
    path : __dirname,
    filename: './client/bundle.js'
  },
  resolve :{

    alias : {

      //Utilities: path.resolve(__dirname, 'src/utilities/'),
      //Templates: path.resolve(__dirname, 'src/templates/')

    },
    extensions : ['.js','.jsx']
  },
  module :{

    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        },
        exclude :/(node_modules|bower_components)/
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader"
      },
      {
        test: /\.png$/,
        loader: "url-loader?limit=100000"
      },
      {
        test: /\.jpg$/,
        loader: "file-loader"
      },
      {
        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&mimetype=application/font-woff'
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&mimetype=application/octet-stream'
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file'
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&mimetype=image/svg+xml'
      }
    ]
  }
}

my package.json

  {
  "name": "yulu",
  "version": "1.0.0",
  "description": "This is a business advertising website",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "author": "@magic wand",
  "license": "MIT",
  "dependencies": {
    "bootstrap": "^3.3.7",
    "express": "^4.15.4",
    "react": "^15.6.1",
    "react-bootstrap": "^0.31.2",
    "react-dom": "^15.6.1",
    "react-router": "^4.1.2"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "exports-loader": "^0.6.4",
    "file-loader": "^0.11.2",
    "imports-loader": "^0.7.1",
    "node-sass": "^4.5.3",
    "postcss-loader": "^2.0.6",
    "resolve-url-loader": "^2.1.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "webpack": "^3.5.4"
  }
}

Answer 1

Since wepack 2 it's no longer allowed to omit the -loader suffix and the loaders are resolved literally. In your case it uses the npm package url, which might be a dependency of one of your dependencies. That package is not a valid loader and therefore fails.

The affected rules need to be changed to:

{
  test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
  loader: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
  test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
  loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
},
{
  test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
  loader: 'file-loader'
},
{
  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
  loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
}