5

I'm having problems with Webpack 4 on a Linux machine. The build works fine in dev mode, but fail in production. It also seems to be working on a windows machine. I did try do downgrade webpack to an older version and nothing.

Nodejs: v10.2.1

 *TypeError: Cannot read property 'length' of undefined* at node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:59
        this.workers = workers === true ? _os2.default.cpus().length - 1 : Math.min(Number(workers) || 0, _os2.default.cpus().length - 1);

packge.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "build": "webpack -p"
  },
  "devDependencies": {},
  "dependencies": {
    "@types/node": "^10.5.1",
    "css-loader": "^0.28.11",
    "global": "^4.3.2",
    "node-sass": "^4.9.1",
    "npm": "^6.1.0",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "ts-loader": "^4.4.2",
    "typescript": "^2.9.2",
    "uglifyjs-webpack-plugin": "1.0.0-beta.2",
    "webpack": "^4.15.1",
    "webpack-cli": "^3.0.8"
  }
}

webpack.config.js

const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
var webpack = require('webpack');
module.exports = {
    entry: './src/index.ts',
    devtool: 'source-map',
     mode: 'production',
     module: {
             rules: [{
                 test: /\.tsx?$/,
                 use: 'ts-loader',
                 exclude: /node_modules/
             },
             {
                 test: /\.scss$/,
                 use: ['style-loader', 'css-loader', 'sass-loader'],
                 exclude: /node_modules/
             }
            ],
         },
    resolve: {
             extensions: ['.tsx', '.ts', '.js','.css','.scss']
         },
    plugins: [
        new UglifyJsPlugin()
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    }
}
hong4rc
  • 3,999
  • 4
  • 21
  • 40
yacine benzmane
  • 3,888
  • 4
  • 22
  • 32
  • can you give more detail like webpack config file, package.json, or anything relevant? – Pravesh Khatri Jul 09 '18 at 10:28
  • just added webpack.config.js and packge.json – yacine benzmane Jul 09 '18 at 10:34
  • Your version of `uglifyjs-webpack-plugin` is a year old. It may be because of that. See if `npm install -S uglifyjs-webpack-plugin@latest` fixes the problem. – Aankhen Jul 09 '18 at 10:42
  • By the way, is there a reason why `npm` is in your dependencies? – Aankhen Jul 09 '18 at 10:44
  • @Aankhen nothing. I don't think it has something to do with the version. – yacine benzmane Jul 09 '18 at 10:45
  • Okay. Is your production build on the same machine but with a different `NODE_ENV` (or other variables) or is it on a different machine? – Aankhen Jul 09 '18 at 10:47
  • @Aankhen It's on a different machine (Linux server) – yacine benzmane Jul 09 '18 at 10:49
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/174646/discussion-between-aankhen-and-yacine-benzmane). – Aankhen Jul 09 '18 at 10:50
  • Delete you `node_modules` folder, then do a fresh `npm i`. By the looks of it you have tried to run with packages that were installed for a machine running MacOS. – connexo Jul 09 '18 at 10:58
  • @connexo deleted the `node_modules` and run `yarn` but still get the same problem. – yacine benzmane Jul 09 '18 at 13:39
  • Because this seems to be a very involved issue, you should probably make a minimal project on github which has the bare minimum code to reproduce the problem on your machine. This will help others diagnose the issue. – damanptyltd Jul 10 '18 at 00:17
  • @damanptyltd I did try using a boilerplate project but kept getting the same error in prod. I even disabled uglify from my project and the build still failed. – yacine benzmane Jul 10 '18 at 08:24

1 Answers1

7

Setting mode to production in Webpack v4 should do enough optimisations, so there's no need to specifically require the Uglify plugin. Try remove uglifyjs-webpack-plugin and there's also no need for passing the -p flag for the build script.

If you want to customise the Uglify plugin, you can also do so in Webpack's optimization config, see https://webpack.js.org/configuration/optimization/

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  //...
  optimization: {
    minimizer: [
      new UglifyJsPlugin({ /* your config */ })
    ]
  }
};

Finally, I have a basic webpack v4 starter boilerplate with all the latest ecosystem on Github, take a look and see if it will help you or not

zenoh
  • 2,071
  • 1
  • 22
  • 38