Webpack error - can't resolve loader in 'tmp/build...' - node.js

Question

I recently added the eslint and eslint-loader NPM modules as dev dependencies to my React app (with Webpack) - all is well when I am running my development server locally. However, when I try to build the production release locally, it fails with the following error:
npm ERR! Darwin 16.7.0
npm ERR! argv "/Users/user/.nvm/versions/node/v6.11.1/bin/node" "/Users/user/.nvm/versions/node/v6.11.1/bin/npm" "run" "build:client"
npm ERR! node v6.11.1
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! App#0.0.1 build:client: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the App#0.0.1 build:client script 'webpack'.
On a whim, I also tried pushing to Heroku, where I got a more helpful error:
ERROR in Entry module not found: Error: Can't resolve 'eslint-loader' in '/tmp/build_5f502b6d28fee058cbe484b873b6e7cb'
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! App#0.0.1 build:client: `webpack`
npm ERR! Exit status 2
So this is the part where I admit that I am a bit baffled by Webpack, and would greatly appreciate some guidance and clarification, if that can be offered. I've seen others with a similar issue, but never referring to the '/tmp/build...' directory.
So first off, here are the scripts and some other relevant bits in my package.json:
"scripts": {
"start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
"start:prod": "node server.bundle.js",
"start:dev": "concurrently --prefix \"[{name}]\" -k \"webpack -d --watch --colors\" \"nodemon index.js\" -n \"WEBPACK,NODEMON\" --content-base public/",
"build:client": "webpack",
"build:server": "webpack --config webpack.server.config.js",
"build": "NODE_ENV=production npm run build:client && npm run build:server",
"postinstall": "npm run build"
},
"dependencies": {
"webpack": "^2.6.0"
},
"devDependencies": {
"eslint": "^4.4.1",
"eslint-loader": "^1.9.0",
"eslint-plugin-babel": "^4.1.2",
"eslint-plugin-react": "^7.1.0"
"webpack-dev-server": "^2.4.5"
}
As the errors say, build:client is where this is failing...
And from webpack.config.js:
"module": {
"loaders": [
{
"exclude": /node_modules/,
"loader": "babel-loader",
"query": { "presets": ["react", "es2015", "stage-2"] },
"test": /\.jsx?$/
},
{
"exclude": /node_modules/,
"loader": "babel-loader",
"test": /\.js$/
},
{
"enforce": "pre",
"exclude": /node_modules/,
"loader": "eslint-loader",
"query": { "presets": ["react", "es2015", "stage-2"] },
"test": /\.jsx$/
},
{
"enforce": "pre",
"exclude": /node_modules/,
"loader": "eslint-loader",
"test": /\.js$/
}
]
}
If I comment out the sections referring to eslint-loader in the config, then it builds just fine, so as Heroku so keenly observed, the problem must be with those lines. Can anyone suggest a fix for this problem? I'm not sure that I really understand what is going wrong, let alone how to resolve it.
Edit Here is my complete webpack.config.js:
const webpack = require("webpack")
module.exports = {
"entry": "./src/index.jsx",
"module": {
"loaders": [
{
"exclude": /node_modules/,
"loader": "babel-loader",
"query": { "presets": ["react", "es2015", "stage-2"] },
"test": /\.jsx?$/
},
{
"exclude": /node_modules/,
"loader": "babel-loader",
"test": /\.js$/
},
{
"enforce": "pre",
"exclude": /node_modules/,
"loader": "eslint-loader",
"query": { "presets": ["react", "es2015", "stage-2"] },
"test": /\.jsx$/
},
{
"enforce": "pre",
"exclude": /node_modules/,
"loader": "eslint-loader",
"test": /\.js$/
}
]
},
"output": {
"filename": "./public/bundle.js",
"publicPath": "/"
},
"plugins": [
new webpack.DefinePlugin({
"API_URL": JSON.stringify(process.env.API_URL || "http://localhost:4000/api/v1"),
"IS_STAGING": JSON.stringify(process.env.IS_STAGING || "false"),
"NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development")
})
]
}

Answer 1

Thanks to #Marek and #archae0pteryx for their thoughts on this - I came up with a fix, though it may not be optimal...
Basically, I created a webpack.dev.config.js file that included the references to eslint-loader... which is just fine, since I only want to use the linting in local development. Then I removed those references from my main config file updated package.json to use the dev config in local development, and it was all good.

Answer 2

I had the same problem, but for me, that wasn't solved in such way.
I solved it using this answer by EvHaus
https://github.com/babel/babel-loader/issues/166#issuecomment-184763126
This is the solution:
plugins: [
require.resolve("babel-plugin-add-module-exports"),
require.resolve("babel-plugin-transform-decorators-legacy")
],
presets: [
require.resolve("babel-preset-es2015"),
require.resolve("babel-preset-stage-0"),
require.resolve("babel-preset-react")
]

Answer 3

I think your problem may be that you have EsLint in devDependencies. If I remember correctly Heroku installs only dependencies of your app. Try moving EsLint into dependencies.