opheliadesign's avatar

Laravel Mix running out of RAM

I am attempting to compile several LESS files (Bootstrap, Font Awesome, and AdminLTE) using webpack (Laravel Mix) and the process seems to fail due to a memory issue. Stack trace:

Security context: 00000373F6C3FA99 <JS Object>
    1: /* anonymous */ [C:\Users\Benjamin\PhpstormProjects\cvahimt-dev\node_modules\less\lib\less\tree\ruleset.js:239] [pc=000003481D34EFF1] (this=000000EF94336CF9 <JS Global Object>,hash=000003EF61DE84D9 <an Object with map 0000004273E06829>,r=00000335983FB711
 <a Rule with map 000001FD8BF7D5C9>)
    2: arguments adaptor frame: 4->2
    3: InnerArrayReduce(aka InnerArrayReduce) [native array....

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "development"
npm ERR! node v6.11.2
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 3
npm ERR!
npm ERR! Failed at the @ development script 'cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.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  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\Benjamin\PhpstormProjects\cvahimt-dev\npm-debug.log

If I remove some of the files, it runs normally. Windows 10, 16 GB RAM, latest versions of Laravel Mix, NPM, and Node.

Any ideas??

** UPDATE ** Here is my admin.less code, I am trying to combine Bootstrap and AdminLTE together in one file. Combining them seems to cause the memory issue, running each separately works - but I want to combine them for easier loading and caching.

@import "../bower/bootstrap/less/bootstrap.less";
@import "../bower/AdminLTE/build/less/AdminLTE.less";

AdminLTE.less contains a bunch of imports, it's almost like webpack is getting overwhelmed.

0 likes
4 replies
opheliadesign's avatar

@danmatthews no dice, any other ideas? Hangs when trying to run admin.less, removed references to Bootstrap in AdminLTE.

Could it just be the large number of imports that AdminLTE.less contains?

opheliadesign's avatar

Update: I also tried this, which worked using Gulp in a previous project. I moved AdminLTE out of the bower directory and placed it under my less directory, all import paths are correct. Laravel Mix runs out of memory while trying to process the modified AdminLTE.less file.

/*!
 *   AdminLTE v2.3.8
 *   Author: Almsaeed Studio
 *   Website: Almsaeed Studio <http://almsaeedstudio.com>
 *   License: Open source - MIT
 *           Please visit http://opensource.org/licenses/MIT for more information
!*/
@import "../../../../bower/bootstrap/less/bootstrap";
@import "../../../../bower/font-awesome/less/font-awesome";
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);
@import "skins/skin-blue.less";

@icon-font-path: "/fonts/";
@fa-font-path: "/fonts/";

@headings-small-color: @gray-dark;
@hr-border: #c3c3c3;

[v-cloak] {
  display: none !important;
}

// Full Calendar width fix
.fc-day-grid-event > .fc-content {
  white-space: normal !important;
}
//MISC
//----
@import "core.less";
@import "variables.less";
@import "mixins.less";
//COMPONENTS
//-----------
@import "header.less";
@import "sidebar.less";
@import "sidebar-mini.less";
@import "control-sidebar.less";
@import "dropdown.less";
@import "forms.less";
@import "progress-bars.less";
@import "small-box.less";
@import "boxes.less";
@import "info-box.less";
@import "timeline.less";
@import "buttons.less";
@import "callout.less";
@import "alerts.less";
@import "navs.less";
@import "products.less";
@import "table.less";
@import "labels.less";
@import "direct-chat.less";
@import "users-list.less";
@import "carousel.less";
@import "modal.less";
@import "social-widgets.less";
//PAGES
//------
@import "mailbox.less";
@import "lockscreen.less";
@import "login_and_register.less";
@import "404_500_errors.less";
@import "invoice.less";
@import "profile";
//Plugins
//--------
@import "plugins.less";
//Miscellaneous
//-------------
@import "miscellaneous.less";
@import "print.less";

Please or to participate in this conversation.