Error building with webpack

Question

I'm following a tutorial about React which includes the building process using webpack. Specifically, I'm trying to create two files (main and vendor). When I run build script (SET NODE_ENV=production && webpack --config webpack.config.babel.js) it crashes with the following error:

<--- Last few GCs ---> 45011 ms: Scavenge 860.2 (895.2) -> 844.5 (895.2) MB, 0.2 / 0.0 ms [allocation failure]. 45063 ms: Scavenge 860.2 (895.2) -> 844.5 (895.2) MB, 0.2 / 0.0 ms [allocation failure]. 45115 ms: Scavenge 860.2 (895.2) -> 844.5 (895.2) MB, 0.2 / 0.0 ms [allocation failure]. 45167 ms: Scavenge 860.2 (895.2) -> 844.5 (895.2) MB, 0.2 / 0.0 ms [allocation failure]. 45219 ms: Scavenge 860.2 (895.2) -> 844.5 (895.2) MB, 0.2 / 0.0 ms [allocation failure].

<--- JS stacktrace ---> ==== JS stack trace ========================================= Security context: 000002E09573FA99 2: takeMatchingModules [C:\\Users\\Cristi\\Desktop\\react_scafold\\hello-world\\node_modules\\webpack-split-chunks\\lib\\Tools.js:~17] [pc=00000189 723E4510] (this=00000342038AF381 ,chunkList=00000342038502E9 ,testers=000001653754EB29 ) 3: /* anonymous */ [C:\\Users\\Cristi\\Desktop\\react_scafold\\hello-world\\node_modules\\webpack-split-ch... FATAL ERROR: invalid array length Allocation failed - JavaScript heap out of memory

npm ERR! Windows_NT 6.3.9600 npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build" npm ERR! node v6.11.1 npm ERR! npm v3.10.10 npm ERR! code ELIFECYCLE npm ERR! hello-world@0.1.0 build: SET NODE_ENV=production && webpack --config webpack.config.babel.js npm ERR! Exit status 3 npm ERR! npm ERR! Failed at the hello-world@0.1.0 build script 'SET NODE_ENV=production && webpack --config webpack.config.babel.js'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the hello-world package,

npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! SET NODE_ENV=production && webpack --config webpack.config.babel.js npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs hello-world npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls hello-world npm ERR! There is likely additional logging output above. npm ERR! Please include the following file with any support request: npm ERR! C:\\Users\\Cristi\\Desktop\\react_scafold\\hello-world\\npm-debug.log

---

npm-debug.log file:

0 info it worked if it ends with ok

1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',

1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',

1 verbose cli 'run',

1 verbose cli 'build' ]

2 info using npm@3.10.10

3 info using node@v6.11.1

4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]

5 info lifecycle hello-world@0.1.0~prebuild: hello-world@0.1.0

6 silly lifecycle hello-world@0.1.0~prebuild: no script for prebuild, continuing

7 info lifecycle hello-world@0.1.0~build: hello-world@0.1.0

8 verbose lifecycle hello-world@0.1.0~build: unsafe-perm in lifecycle true

9 verbose lifecycle hello-world@0.1.0~build: PATH: C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\node-gyp-bin;C:\\Users\\Cristi\\Desktop\\react_scafold\\hello-world\\node_modules.bin;C:\\ProgramData\\Oracle\\Java\\javapath;C:\\Windows\\system32;C:\\Windows;C:\\Windows\\System32\\Wbem;C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\;C:\\Program Files (x86)\\Intel\\OpenCL SDK\\2.0\\bin\\x86;C:\\Program Files (x86)\\Intel\\OpenCL SDK\\2.0\\bin\\x64;C:\\Program Files (x86)\\Windows Live\\Shared;C:\\Program Files (x86)\\NVIDIA Corporation\\PhysX\\Common;C:\\Program Files\\nodejs\\;C:\\Users\\Cristi\\AppData\\Local\\atom\\bin;C:\\Users\\Cristi\\AppData\\Roaming\\npm

10 verbose lifecycle hello-world@0.1.0~build: CWD: C:\\Users\\Cristi\\Desktop\\react_scafold\\hello-world

11 silly lifecycle hello-world@0.1.0~build: Args: [ '/d /s /c',

11 silly lifecycle 'SET NODE_ENV=production && webpack --config webpack.config.babel.js' ]

12 silly lifecycle hello-world@0.1.0~build: Returned: code: 3 signal: null

13 info lifecycle hello-world@0.1.0~build: Failed to exec build script

14 verbose stack Error: hello-world@0.1.0 build: SET NODE_ENV=production && webpack --config webpack.config.babel.js

14 verbose stack Exit status 3

14 verbose stack at EventEmitter. (C:\\Program Files\\nodejs\\node_modules\\npm\\lib\\utils\\lifecycle.js:255:16)

14 verbose stack at emitTwo (events.js:106:13)

14 verbose stack at EventEmitter.emit (events.js:191:7)

14 verbose stack at ChildProcess. (C:\\Program Files\\nodejs\\node_modules\\npm\\lib\\utils\\spawn.js:40:14)

14 verbose stack at emitTwo (events.js:106:13)

14 verbose stack at ChildProcess.emit (events.js:191:7)

14 verbose stack at maybeClose (internal/child_process.js:891:16)

14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)

15 verbose pkgid hello-world@0.1.0

16 verbose cwd C:\\Users\\Cristi\\Desktop\\react_scafold\\hello-world

17 error Windows_NT 6.3.9600

18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"

19 error node v6.11.1

20 error npm v3.10.10

21 error code ELIFECYCLE

22 error hello-world@0.1.0 build: SET NODE_ENV=production && webpack --config webpack.config.babel.js

22 error Exit status 3

23 error Failed at the hello-world@0.1.0 build script 'SET NODE_ENV=production && webpack --config webpack.config.babel.js'.

23 error Make sure you have the latest version of node.js and npm installed.

23 error If you do, this is most likely a problem with the hello-world package,

23 error not with npm itself.

23 error Tell the author that this fails on your system:

23 error SET NODE_ENV=production && webpack --config webpack.config.babel.js

23 error You can get information on how to open an issue for this project with:

23 error npm bugs hello-world

23 error Or if that isn't available, you can get their info via:

23 error npm owner ls hello-world

23 error There is likely additional logging output above.

24 verbose exit [ 1, true ]

---

package.json:

{

  "name": "hello-world",

  "version": "0.1.0",

  "private": true,

  "dependencies": {

    "babel-cli": "^6.26.0",

    "babel-polyfill": "^6.23.0",

    "express": "^4.15.3",

    "path": "^0.12.7",

    "prop-types": "^15.5.8",

    "react": "^15.6.1",

    "react-dom": "^15.6.1",

    "react-router-dom": "^4.1.1",

    "react-scripts": "1.0.10",

    "serve": "^6.0.3"

  },

  "devDependencies": {

    "babel-cli": "^6.26.0",

    "babel-core": "^6.26.0",

    "babel-loader": "^7.1.2",

    "babel-preset-es2015": "^6.24.1",

    "babel-preset-react": "^6.24.1",

    "babel-preset-react-hmre": "^1.1.1",

    "babel-preset-stage-0": "^6.24.1",

    "babel-register": "^6.26.0",

    "css-loader": "^0.28.7",

    "file-loader": "^0.11.2",

    "open": "^0.0.5",

    "style-loader": "^0.18.2",

    "url-loader": "^0.5.9",

    "webpack": "^3.5.5",

    "webpack-dev-middleware": "^1.12.0",

    "webpack-hot-middleware": "^2.19.0",

    "webpack-split-chunks": "^0.2.1"

  },

  "scripts": {

    "start": "babel-node --max-old-space-size=1024 src/server",

    "production": "SET NODE_ENV=production BABEL_ENV=production && npm run 
build && npm start",
    "build": "SET NODE_ENV=production && webpack --config 
webpack.config.babel.js"
  }

}

---

webpack.config.babel.js

// Dependencies
import webpack from 'webpack';
import path from 'path';
import ChunksPlugin from 'webpack-split-chunks';

// Environment
const isDevelopment = process.env.NODE_ENV !== 'production';

// Paths
const PATHS = {
  index: path.join(__dirname, 'src/index'),
  build: path.join(__dirname, 'src/public'),
  src: path.join(__dirname, 'src')
};

const getDevtool = () => 'cheap-module-eval-source-map';
const getEntry = () => {
  const entry = [PATHS.index];

  if (isDevelopment) {
    entry.push('webpack-hot-middleware/client?reload=true');
  }

  return entry;
};
const getOutput = () => ({
  path: PATHS.build,
  publicPath: '/',
  filename: '[name].bundle.js'

});
const getPlugins = () => {
  const plugins = [
    new ChunksPlugin({
      to: 'vendor',
      test: /node_modules/
    })
  ];

  if (isDevelopment) {
    plugins.push(
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoEmitOnErrorsPlugin()
    );
  } else {
    plugins.push(
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          //screw_ie8: true,
          warnings: false
        }
      })
    );
  }

  return plugins;
};
const getLoaders = () => ({
  loaders: [
    {
      test: /\.js?$/,
      include: PATHS.src,
      loader: 'babel-loader'
    },
    {
      test: /(\.css)$/,
      loader: ['style-loader', 'css-loader']
    },
    {
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
    }
  ]

}  );

export default {
  devtool: getDevtool(),
  entry: getEntry(),
  output: getOutput(),
  plugins: getPlugins(),
  module: getLoaders()
};

Answer 1

First try to build using Parallel Webpack - -> node ./node_modules/parallel-webpack/bin/run.js --config webpack.config.babel.js

If the error don't resolve try increasing memory allocation to Node -> node --max-old-space-size=1024 ./node_modules/parallel-webpack/bin/run.js --config webpack.config.babel.js

https://medium.com/@vuongtran/how-to-solve-process-out-of-memory-in-node-js-5f0de8f8464c