Webpack Error: TypeError: require(…).usage is not a function - node_modules/webpack/bin/webpack.js:17:3

Question

Here is my setup:

NodeJS: 7.6.0

NPM: 4.4.1

package.json

{
  "name": "Fieldstart",
  "version": "1.0.0",
  "description": "Fieldstart",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "babel": "babel",
    "webpack": "webpack"
  },
  "author": "Conrad Brinker",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.15.3",
    "babel": "^6.23.0",
    "babel-cli": "^6.24.0",
    "babel-core": "6.24.0",
    "babel-loader": "^6.4.0",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.23.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-react": "^6.23.0",
    "babel-preset-stage-0": "^6.22.0",
    "gulp": "3.9.1",
    "gulp-concat": "2.6.1",
    "gulp-rename": "1.2.2",
    "gulp-sass": "3.1.0",
    "gulp-uglify": "2.0.1",
    "node-sass": "4.5.0",
    "react": "15.4.2",
    "react-dom": "15.4.2",
    "react-redux": "^5.0.3",
    "react-router": "^4.0.0",
    "react-router-redux": "^4.0.8",
    "redux": "^3.6.0",
    "redux-thunk": "^2.2.0",
    "remote-redux-devtools": "^0.5.7",
    "webpack": "^2.2.1"
  }
}

webpack.config.js

const debug = process.env.NODE_ENV !== "production";
const webpack = require('webpack');
const path = require('path');

module.exports = {
    context: path.join(__dirname, "jsx"),
    devtool: debug ? "inline-sourcemap" : null,
    watch: true,
    //devtool: 'source-map',
    entry: "./jsx/main.js",
    output: {
        path: path.resolve(__dirname + "/../html/app"),
        filename: "fs.js",
        publicPath: "/js/"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    presets: ['react', 'es2015', 'stage-0'],
                    plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties']
                }
            }
        ]
    },
    resolve: {
        extensions: ['.js']
    },
    plugins: debug ? [] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin({
            compress: { screw_ie8: true, warnings: false },
            mangle: false,
            sourcemap: false,
            comments: false
        })
    ]
};

When I go to run "npm run webpack" I get this output

> Fieldstart@1.0.0 webpack /var/www/src
> webpack

/var/www/src/node_modules/webpack/bin/webpack.js:17
        .usage("webpack " + require("../package.json").version + "\n" +
         ^

TypeError: require(...).usage is not a function
    at Object.<anonymous> (/var/www/src/node_modules/webpack/bin/webpack.js:17:3)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.runMain (module.js:605:10)
    at run (bootstrap_node.js:422:7)
    at startup (bootstrap_node.js:143:9)
    at bootstrap_node.js:537:3

It appears there's a problem with my config and webpack? I've been trying to find answers and change my config in different ways, but no luck.

Answer 1

Your config is not the issue. But it seems that there is a problem with one of webpack's dependencies, namely yargs . There probably was an issue with npm that made it install a broken version of it. You should delete your node_modules and re-install the dependencies, and to make sure it doesn't use the same broekn package from the cache you can also clear the npm cache.

rm -rf node_modules
npm cache clear
npm install