why webpack can't find loader

Question

Here's my pacjage.json:

{
  "name": "redux-todo",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "webpack-dev-server"
  },

  "devDependencies": {
    "babel": "^6.5.2",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
      "webpack": "^1.13.2"
   },
  "dependencies": {
   "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "react-redux": "^4.4.5",
     "redux": "^3.5.2"
  }
}

webpack.config.js:

var path = require('path');

module.exports = {
entry: './index.js',
output: {
    path: './',
    filename: 'app.js'
},
devServer: {
    inline: true,
    port: 3334
},
resolveLoader: { root: path.join(__dirname, "node_modules") },
module: {
    loaders: [
        {
            test: /\.js$/,
            exclude: '/node_modules',
            loader: 'babel',
            query: {
                presets: ['es2015', 'react']
            }
        }
    ]
}
};

and I have following project directory structure:

├── actions.js
├── components
├── containers
├── index.js
├── node_modules
├── package.json
├── reducers.js
├── test.js
└── webpack.config.js

the absolute path to project dir is /home/dmitriy/WebstormProjects/Redux-todo

so why when I run npm start it crashes with error:

ERROR in (webpack)/~/process/browser.js Module build failed: Error: Couldn't find preset "es2015" relative to directory "/usr/local/lib/node_modules/webpack/node_modules/process"

what's this /usr/local/lib/node_modules/webpack/node_modules/process path and why it says that it searches relative to it?

Googling this error I found that

IMPORTANT: The loaders here are resolved relative to the resource which they are applied to. This means they are not resolved relative the the configuration file. If you have loaders installed from npm and your node_modules folder is not in a parent folder of all source files, webpack cannot find the loader. You need to add the node_modules folder as absolute path to the resolveLoader.root option. (resolveLoader: { root: path.join(__dirname, "node_modules") })

should fix it, but as you can see I have it in my config and still seeing this error.

I'm on ubuntu 16.04 LTS, nodejs version is 4.2.6, npm 3.5.2

Answer 1

You are only excluding /node_modules as absolute path:

exclude: '/node_modules'

If you want to recursively exclude all node_modules try using:

exclude: /node_modules/

The difference is subtle but the former is using a string with an absolute path to the root node_modules and the latter a regular expression that matches any path with node_modules.

This should work without the resolveLoader configuration. So you can remove this field:

resolveLoader: { root: path.join(__dirname, "node_modules") },

Answer 2

actually I removed node_modules, tweaked package.json a little bit:

{
  "name": "redux-todo",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
  "start": "webpack-dev-server"
  },
 "dependencies": {
    "babel": "^6.5.2",
   "react": "^15.3.1",
   "react-dom": "^15.3.1",
    "react-redux": "^4.4.5",
    "redux": "^3.5.2"
  },
  "devDependencies": {
   "babel-core": "^6.13.2",
    "babel-loader": "^6.2.5",
   "babel-preset-es2015": "^6.13.2",
   "babel-preset-react": "^6.11.1",
   "webpack": "^1.13.2",
   "webpack-dev-server": "^1.14.1"
 }
}

aaand it worked. Not sure why. Here's how webpack config looks like now:

var path = require('path');

module.exports = {
entry: './index.js',
output: {
    path: './',
    filename: 'app.js'
},
devServer: {
    inline: true,
    port: 3334
},
module: {
    loaders: [
        {
            test: /\.js$/,
            exclude: '/node_modules',
            loader: 'babel',
            query: {
                presets: ['es2015', 'react']
            }
        }
    ]
}
};

I have no clue what was that about ¯_(ツ)_/¯

Answer 3

For my project the loader is configured like this:

{
  test: /\.js$/,
  exclude: '/node_modules',
  loader: "babel-loader"
}

And the .babelrc file contains this:

{
  "presets": ["es2015","react"]
}

Watching the first config of webpack that you have posted, I noticed the option resolveLoader: { root: path.join(__dirname, "node_modules") }. This option isn't needed if you have all loader on correct path (node_modules directory on project root).

Answer 4

Did you mean to use babel-loader? If so, and if there is no babel-loader folder in node_modules, then npm install [email protected] --save-dev should fix the issue and generate that folder.