How to fix "FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory" error

Question

I'm trying to deploy a reactjs application to heroku. While compiling assets, the build fails and produces this error:

-----> Ruby app detected
-----> Compiling Ruby/Rails
-----> Using Ruby version: ruby-2.5.1
-----> Installing dependencies using bundler 1.15.2
       Running: bundle install --without development:test --path vendor/bundle --binstubs vendor/bundle/bin -j4 --deployment
       Warning: the running version of Bundler (1.15.2) is older than the version that created the lockfile (1.16.3). We suggest you upgrade to the latest version of Bundler by running `gem install bundler`.
       Fetching gem metadata from https://rubygems.org/............
       Fetching version metadata from https://rubygems.org/..
       Fetching dependency metadata from https://rubygems.org/.
       Using rake 12.3.1
       Using concurrent-ruby 1.1.3
       Using minitest 5.11.3
       Using thread_safe 0.3.6
       Using builder 3.2.3
       Using erubi 1.7.1
       Using mini_portile2 2.3.0
       Using crass 1.0.4
       Using rack 2.0.6
       Using nio4r 2.3.1
       Using websocket-extensions 0.1.3
       Using mini_mime 1.0.1
       Using jsonapi-renderer 0.2.0
       Using arel 9.0.0
       Using mimemagic 0.3.2
       Using public_suffix 3.0.3
       Using airbrake-ruby 2.12.0
       Using execjs 2.7.0
       Using bcrypt 3.1.12
       Using popper_js 1.14.5
       Using rb-fsevent 0.10.3
       Using ffi 1.9.25
       Using bundler 1.15.2
       Using regexp_parser 1.3.0
       Using mime-types-data 3.2018.0812
       Using chartkick 3.0.1
       Using highline 2.0.0
       Using connection_pool 2.2.2
       Using orm_adapter 0.5.0
       Using method_source 0.9.2
       Using thor 0.19.4
       Using multipart-post 2.0.0
       Using geokit 1.13.1
       Using temple 0.8.0
       Using tilt 2.0.9
       Using hashie 3.5.7
       Using json 2.1.0
       Using mini_magick 4.9.2
       Using multi_json 1.13.1
       Using newrelic_rpm 5.5.0.348
       Using one_signal 1.2.0
       Using xml-simple 1.1.5
       Using pg 0.21.0
       Using puma 3.12.0
       Using rack-timeout 0.5.1
       Using redis 4.0.3
       Using secure_headers 6.0.0
       Using swagger-ui_rails 0.1.7
       Using i18n 1.1.1
       Using nokogiri 1.8.5
       Using tzinfo 1.2.5
       Using websocket-driver 0.7.0
       Using mail 2.7.1
       Using marcel 0.3.3
       Using addressable 2.5.2
       Using rack-test 1.1.0
       Using warden 1.2.8
       Using sprockets 3.7.2
       Using request_store 1.4.1
       Using rack-protection 2.0.4
       Using rack-proxy 0.6.5
       Using autoprefixer-rails 9.4.2
       Using uglifier 4.1.20
       Using airbrake 7.4.0
       Using rb-inotify 0.9.10
       Using mime-types 3.2.2
       Using commander 4.4.7
       Using net-http-persistent 3.0.0
       Using faraday 0.15.4
       Using hashie-forbidden_attributes 0.1.1
       Using omniauth 1.8.1
       Using haml 5.0.4
       Using slim 4.0.1
       Using paypal-sdk-core 0.3.4
       Using faker 1.9.1 from https://github.com/stympy/faker.git (at master@aca03be)
       Using money 6.13.1
       Using loofah 2.2.3
       Using xpath 3.2.0
       Using activesupport 5.2.0
       Using sidekiq 5.2.3
       Using sass-listen 4.0.0
       Using houston 2.4.0
       Using stripe 4.2.0
       Using paypal-sdk-adaptivepayments 1.117.1
       Using monetize 1.9.0
       Using rails-html-sanitizer 1.0.4
       Using capybara 3.12.0
       Using rails-dom-testing 2.0.3
       Using globalid 0.4.1
       Using activemodel 5.2.0
       Using case_transform 0.2
       Using decent_exposure 3.0.0
       Using factory_bot 4.11.1
       Using fast_jsonapi 1.5
       Using groupdate 4.1.0
       Using pundit 2.0.0
       Using sass 3.7.2
       Using actionview 5.2.0
       Using activerecord 5.2.0
       Using carrierwave 1.2.3
       Using activejob 5.2.0
       Using actionpack 5.2.0
       Using bootstrap 4.1.3
       Using actioncable 5.2.0
       Using actionmailer 5.2.0
       Using active_model_serializers 0.10.8
       Using activestorage 5.2.0
       Using railties 5.2.0
       Using sprockets-rails 3.2.1
       Using simple_form 4.1.0
       Using responders 2.4.0
       Using factory_bot_rails 4.11.1
       Using font-awesome-rails 4.7.0.4
       Using highcharts-rails 6.0.3
       Using jquery-rails 4.3.3
       Using lograge 0.10.0
       Using money-rails 1.13.0
       Using slim-rails 3.2.0
       Using webpacker 3.5.5
       Using rails 5.2.0
       Using sass-rails 5.0.7
       Using geokit-rails 2.3.1
       Using swagger-docs 0.2.9
       Using devise 4.5.0
       Using devise_token_auth 1.0.0
       Bundle complete! 68 Gemfile dependencies, 125 gems now installed.
       Gems in the groups development and test were not installed.
       Bundled gems are installed into ./vendor/bundle.
       Bundle completed (5.09s)
       Cleaning up the bundler cache.
       Warning: the running version of Bundler (1.15.2) is older than the version that created the lockfile (1.16.3). We suggest you upgrade to the latest version of Bundler by running `gem install bundler`.
       The latest bundler is 2.0.1, but you are currently running 1.15.2.
       To update, run `gem install bundler`
-----> Installing node-v10.14.1-linux-x64
-----> Installing yarn-v1.12.3
-----> Detecting rake tasks
-----> Preparing app for Rails asset pipeline
       Running: rake assets:precompile
       yarn install v1.12.3
       warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
       [1/5] Validating package.json...
       [2/5] Resolving packages...
       [3/5] Fetching packages...
       info fsevents@1.2.4: The platform "linux" is incompatible with this module.
       info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
       [4/5] Linking dependencies...
       warning "@rails/webpacker > postcss-cssnext@3.1.0" has unmet peer dependency "caniuse-lite@^1.0.30000697".
       warning " > react-addons-css-transition-group@15.6.2" has incorrect peer dependency "react@^15.4.2".
       warning " > react-bootstrap-table-next@1.4.0" has unmet peer dependency "classnames@^2.2.5".
       warning " > react-progressbar@15.4.1" has incorrect peer dependency "react@^15.0.1".
       warning " > redux-immutable@4.0.0" has unmet peer dependency "immutable@^3.8.1 || ^4.0.0-rc.1".
       warning "eslint-config-airbnb > eslint-config-airbnb-base@11.3.2" has incorrect peer dependency "eslint-plugin-import@^2.7.0".
       warning " > webpack-dev-server@2.11.2" has unmet peer dependency "webpack@^2.2.0 || ^3.0.0".
       warning "webpack-dev-server > webpack-dev-middleware@1.12.2" has unmet peer dependency "webpack@^1.0.0 || ^2.0.0 || ^3.0.0".
       [5/5] Building fresh packages...
       $ cd client && yarn
       yarn install v1.12.3
       warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
       [1/5] Validating package.json...
       [2/5] Resolving packages...
       [3/5] Fetching packages...
       info fsevents@1.2.4: The platform "linux" is incompatible with this module.
       info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
       [4/5] Linking dependencies...
       warning " > babel-loader@7.1.0" has unmet peer dependency "webpack@2 || 3".
       warning " > react-intl@2.3.0" has incorrect peer dependency "react@^0.14.9 || ^15.0.0".
       warning " > react-router-dom@4.1.1" has incorrect peer dependency "react@^15".
       warning " > react-router-redux@5.0.0-alpha.6" has incorrect peer dependency "react@^15".
       warning " > enzyme@2.8.2" has incorrect peer dependency "react@0.13.x || 0.14.x || ^15.0.0-0 || 15.x".
       warning " > eslint-import-resolver-webpack@0.8.3" has unmet peer dependency "webpack@>=1.11.0".
       warning " > html-webpack-plugin@2.29.0" has unmet peer dependency "webpack@1 || ^2 || ^2.1.0-beta || ^2.2.0-rc || ^3".
       warning "image-webpack-loader > file-loader@1.1.11" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
       warning " > react-test-renderer@15.6.1" has incorrect peer dependency "react@^15.6.1".
       [5/5] Building fresh packages...
       Done in 31.85s.
       Done in 76.09s.
       Webpacker is installed 🎉 🍰
       Using /tmp/build_8f521e11fc612876bcd3c01cd8da6bdd/config/webpacker.yml file for setting up webpack paths
       Compiling…
       Compilation failed:
       FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
        1: 0x8dbaa0 node::Abort() [node]
        2: 0x8dbaec  [node]
        3: 0xad83de v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
        4: 0xad8614 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
        5: 0xec5c42  [node]
        6: 0xec5d48 v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [node]
        7: 0xed1e22 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [node]
        8: 0xed2754 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
        9: 0xed53c1 v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [node]
       10: 0xe9e844 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [node]
       11: 0x113dfae v8::internal::Runtime_AllocateInNewSpace(int, v8::internal::Object**, v8::internal::Isolate*) [node]
       12: 0x2daefc5be1d 


       <--- Last few GCs --->

       [587:0x2713f20]  1469419 ms: Mark-sweep 1362.0 (1417.7) -> 1361.9 (1418.2) MB, 1183.8 / 0.0 ms  (average mu = 0.099, current mu = 0.004) allocation failure scavenge might not succeed
       [587:0x2713f20]  1470575 ms: Mark-sweep 1363.1 (1418.7) -> 1362.9 (1419.7) MB, 1151.7 / 0.0 ms  (average mu = 0.053, current mu = 0.004) allocation failure scavenge might not succeed


       <--- JS stacktrace --->

       ==== JS stack trace =========================================

           0: ExitFrame [pc: 0x2daefc5be1d]
       Security context: 0x395bbaa1e6e1 <JSObject>
           1: addMappingWithCode [0x1a4bb3f1a89] [/tmp/build_8f521e11fc612876bcd3c01cd8da6bdd/node_modules/webpack-sources/node_modules/source-map/lib/source-node.js:~150] [pc=0x2daf487dfd2](this=0x08663a09ad49 <JSGlobal Object>,mapping=0x2969e26a1e61 <Object map = 0x1067d74ad2e1>,code=0x3e38d99f4479 <String[6]: break >)
           2: /* anonymous */ [0x1a4bb3dcc79] [/tmp/...


 !
 !     Precompiling assets failed.
 !
 !     Push rejected, failed to compile Ruby app.
 !     Push failed

I've tried various methods in my package.json file:

"scripts" : {
   "start": "cross-env NODE_OPTIONS=--max_old_space_size=5120 webpack"
}

"scripts" : {
  "webpacker": "node --max-old-space-size=4096 node_modules/.bin/react-scripts start"
}

"scripts" : {
  "start": "node --max-old-space-size=6144 client/app/app.js"
}

I've researched and found various github and stackoverflow threads but they do not seem to fix my issue.

• https://github.com/npm/npm/issues/12238
• Increase JavaScript Heap size in create-react-app project

Here is my package.json file:

{
  "name": "safe_deliver",
  "private": true,
  "engines": {
    "node": ">=6.0.0",
    "yarn": ">=0.25.2"
  },
  "scripts": {
    "postinstall": "cd client && yarn",
    "pre-commit": "cd client && npm run lint:staged",
    "start": "cross-env NODE_OPTIONS=--max-old-space-size=6144 bin/webpack"
  },
  "dependencies": {
    "@fortawesome/fontawesome": "^1.1.8",
    "@fortawesome/fontawesome-free": "^5.3.1",
    "@fortawesome/fontawesome-free-brands": "^5.0.13",
    "@fortawesome/fontawesome-free-regular": "^5.0.13",
    "@fortawesome/fontawesome-free-solid": "^5.0.13",
    "@fortawesome/fontawesome-svg-core": "^1.2.4",
    "@fortawesome/free-solid-svg-icons": "^5.3.1",
    "@fortawesome/react-fontawesome": "^0.1.3",
    "@rails/webpacker": "^3.3.1",
    "babel-plugin-emotion": "^9.2.6",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "bootstrap": "4.0.0",
    "chart.js": "^2.7.3",
    "chartkick": "^3.0.1",
    "emotion": "^9.2.6",
    "google-maps-react": "^2.0.2",
    "jquery": "^3.2.1",
    "jquery-ujs": "^1.2.2",
    "leaflet": "^1.3.1",
    "normalize.css": "^8.0.1",
    "popper.js": "^1.12.9",
    "prop-types": "^15.6.1",
    "rc-time-picker": "^3.6.2",
    "react": "^16.4.1",
    "react-addons-css-transition-group": "^15.6.2",
    "react-animate-height": "^2.0.5",
    "react-bootstrap-table-next": "^1.4.0",
    "react-calendar": "^2.16.0",
    "react-datepicker": "^2.3.0",
    "react-dom": "^16.4.1",
    "react-emotion": "^9.2.6",
    "react-fontawesome": "^1.6.1",
    "react-geocode": "^0.1.2",
    "react-https-redirect": "^1.0.11",
    "react-input-mask": "^2.0.4",
    "react-progressbar": "^15.4.1",
    "react-star-rating-component": "^1.4.1",
    "react-stripe-elements": "^2.0.1",
    "reactjs-popup": "^1.3.2",
    "redux-immutable": "^4.0.0",
    "reset-css": "^4.0.1",
    "seamless-immutable": "^7.1.4",
    "styled-components": "^3.4.2"
  },
  "devDependencies": {
    "eslint": "3.19.0",
    "eslint-config-airbnb": "15.0.1",
    "eslint-plugin-import": "2.2.0",
    "eslint-plugin-jsx-a11y": "5.0.3",
    "eslint-plugin-react": "7.0.1",
    "pre-commit": "1.2.2",
    "webpack-dev-server": "^2.7.1"
  }
}

I am expecting this error to go away and the application to be deployed. Right now it is throwing javascript heap out of memory error.

Answer 1

It's because more "js" files in your react application. You can build your application after making some changes in package.json like below of code:

"scripts": {
    "start": "react-scripts --max_old_space_size=4096 start",
    "build": "react-scripts --max_old_space_size=4096 build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

Answer 2

WHAT about VITE-REACT APP ?

I am using vite-react app and encountered same issue.

vite v5.1.4 building for production...
node_modules/rustbn.js/lib/index.asm.js (1:8481) Use of eval in "node_modules/rustbn.js/lib/index.asm.js" is strongly discouraged as it poses security risks and may cause issues with minification.
node_modules/rustbn.js/lib/index.asm.js (1:11181) Use of eval in "node_modules/rustbn.js/lib/index.asm.js" is strongly discouraged as it poses security risks and may cause issues with minification.
✓ 11974 modules transformed.
rendering chunks (129)...
<--- Last few GCs --->

[11528:000001CE159C02C0]    86360 ms: Mark-sweep (reduce) 4008.6 (4153.7) -> 4008.6 (4153.7) MB, 2523.5 / 0.0 ms  (average mu = 0.406, current mu = 0.010) allocation failure; scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF7459307BF node_api_throw_syntax_error+175823
 2: 00007FF7458B5796 DSA_meth_get_flags+59654
 3: 00007FF7458B7480 DSA_meth_get_flags+67056
 4: 00007FF74635E944 v8::Isolate::ReportExternalAllocationLimitReached+116
 5: 00007FF746349CD2 v8::Isolate::Exit+674
 6: 00007FF7461CBB8C v8::internal::EmbedderStackStateScope::ExplicitScopeForTesting+124
 7: 00007FF7461C8DAB v8::internal::Heap::CollectGarbage+3963
 8: 00007FF7461DEFE3 v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath+2099
 9: 00007FF7461DF88D v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath+93
10: 00007FF7461E81BF v8::internal::Factory::AllocateRaw+783
11: 00007FF7461FEA6A v8::internal::FactoryBase<v8::internal::Factory>::NewFixedArrayWithFiller+90
12: 00007FF7461FE97D v8::internal::FactoryBase<v8::internal::Factory>::NewFixedArray+77
13: 00007FF7461F00E1 v8::internal::Factory::NewJSArrayStorage+145
14: 00007FF7461EFA26 v8::internal::Factory::NewJSArray+150
15: 00007FF7460F06EC v8::base::TimeDelta::operator!=+19564
16: 00007FF7460F58D6 v8::base::TimeDelta::operator!=+40534
17: 00007FF7460F383A v8::base::TimeDelta::operator!=+32186
18: 00007FF7462F2E0D v8::internal::Builtins::code+98989
19: 00007FF7462F2EE0 v8::internal::Builtins::code+99200
20: 00007FF7463FBF71 v8::internal::SetupIsolateDelegate::SetupHeap+558449
21: 00007FF6C66FAC2A

so I solved this issue by following steps

FIRST

npm install cross-env

SECOND

I changed "build" statement like this

  "scripts": {
    "dev": "vite",
    "build": "cross-env NODE_OPTIONS=--max_old_space_size=8192 vite build",
    "preview": "vite preview"
  },

then it works.

I found out that the problem occurred because the memory size of Node build engine exceeds it's default size (nearly exceed 5.6GB in RAM)

I hope that it works fine on your side. Thanks

Answer 3

The error is orignated from lesser memory(all available memory is occupied by stack). I have just resolved the issue by restarting my PC. Alternatively, you may also clear your partition to get some space(partition C in my case). Now I am able to run my project successfully: See the screenshot

Answer 4

Bought a remote server with just 1GB of RAM and I couldn't build the react app while ssh'd into that remote server due how low memory the computer was.

Nothing you can do other than upgrading your plan or building it elsewhere and then copying the files.

Ended up just building it on my local machine and then copying it to my remote server over ssh using the scp command. -r flag for recursively copying files in the build directory.

scp -r ~/desktop/my-web-app/frontend/build myUser@xxx.xxx.xxx.xxx:~/project/my-web-app/frontend

Replace myUser and xxx.xxx.xxx.xxx with your Linux user name and your server's IP address respectively, and replace the paths to your local machine react build's project path and your remote server's react project path.

Answer 5

In case somebody else is having this problem using React: in my case, it was a "circular reference"

export default class SurroundedByGreenAndBlue extends React.Component {

    /**
     * The component is referencing the class itself instead
     * of the styled component desired `SurroundedByGreenAndBlue`
     */
    render(): JSX.Element {
        return (
            <SurroundedByGreenAndBlue>
                // ...
            </SurroundedByGreenAndBlue>
        )
    }
}

Answer 6

Solution for those running react-scripts.

You should NOT be deploying your react application with react-scripts into production without previously determining your production setup.

react-scripts start is only meant for development and hot module reload, and if you're running the free or low tier version of Heroku it's running out of memory (since not enough RAM is allocated for your project). Development mode uses considerably more resources. Heroku and similar platforms are configured by default to run the commands yarn build and yarn start (or with npm).

If you check your Heroku logs, you'll notice that your application is running in development mode.

You'll even notice when you run yarn build in the terminal it says:

File sizes after gzip:

  193.81 kB (+4 B)  build/static/js/main.e2ea9faa.js
  1.78 kB           build/static/js/787.1d6a0bb1.chunk.js

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

I would recommend renaming the start script to dev (i.e.: yarn dev) and then setting your start script to:

serve -s build

(don't forget to install it yarn add serve)

Answer 7

There might certainly be no need increasing the processing time. It might interest you to know that problems of this sort are raised when the 'forEach' loop structure is used; rather than the classical for-loop'. So, I'd advice that you check the functions being called and change whatever 'forEach' structure you've got to a classical 'for-loop'. Especially when you've got database transactions, send emails etc in these loops.

Answer 8

Solved!!! (For Angular) After hours of trying to solve this, I finally identified that the reason I keep on getting that error despite trying to increase max_old_space_size is because I had installed the x86 (32bit) version of Node.js on a 64bit computer.

After I saw this I:

1. deleted chocolatey from C:\ProgramData\chocolatey\bin
2. uninstalled the x86 (32bit) version on node.js
3. deleted npm & npm cache folders from C:\Users\%username%\AppData\Roaming
4. restarted my computer
5. installed the x64 version of node
6. reinstalled angular/cli npm install -g @angular/cli
7. complied my projects & everything worked without any errors

Answer 9

I solved this issue in react js by running the following command in terminal

set NODE_OPTIONS=--max_old_space_size=8096

Answer 10

Using Windows (x64) and Node v14.15.1

I tried to allocate memory manually and stil got no results.

Finally i uninstalled the next dependency from my project and used npm i next@latest to upgrade to Next 11.1.2 and I've got rid of the problem.

Upgrading Next from https://nextjs.org/docs/upgrading

Now I can run npm run buil npm run start and my app is back running.

Took a look at the memory heap snapshot and looks like nothing annusual.

Answer 11

Using Next.js version 10.2.0

In my case I got past this error by specifying target: 'server' instead of target: 'serverless' in the next.config.js file. This made the source maps in development smaller - from over 100MB to around 10MB.

My CI runner with 2GB probably couldn't provided the amount of memory required to create the large source maps required for Next.js's serverless setup

Old next.config.js:

module.exports = {
  target: 'serverless',
};

New next.config.js:

module.exports = {
  target: 'server',
};

Answer 12

Using ubuntu 20.04 and node 14.16.1, I had same error reinstalling node fixed the issue. I had tried the following methods:

• I tried to augment ram swap space to 20G because it was full.

• I tried to use computer with 8G ram instead of 4G.

• I tried to start with flag to use more ram in package json start script

  "start": "node --max_old_space_size=8196 node_modules/.bin/react-scripts start"

• I created .env file with

  GENERATE_SOURCEMAP=false

Every time remove node-modules. (package lock was working for my colleague)

Answer 13

Just wanted to add another item to check here, if all the other suggested answers don't resolve the issue:

I accidentally set in my .yarnrc file --modules-folder src/.node_modules. I don't know why, just wasn't thinking, silly of me.

As a result, all of the .node_modules content - hundreds of MB of source code - was pulled into the build when I ran yarn build (which was mapped to react-scripts build).

So if the other answers fail to solve your issue, check to see if you are potentially mis-configuring your .node_modules directory, make sure it is not inside src.

Answer 14

In my case this error was caused by the fact that I imported twice the same less files:

@import "~@myPackage/file1.less";
@import "~@myPackage/file1.less";

@import "~@myPackage/file2.less";
@import "~@myPackage/file2.less";

Answer 15

The root cause of the issue is due to large source file sizes.
If the underline problem is within your source code you can resolve it by simply increasing the Node Heap Size as below,

"start": "react-scripts --max_old_space_size=4096 start",
"build": "react-scripts --max_old_space_size=4096 build",
But if the problem lies within any dependencies introduced, we may need to increase the Node Heap allocation globally to resolve the issue.

For Windows:

set NODE_OPTIONS=--max_old_space_size=4096

For Linux:

export NODE_OPTIONS=--max_old_space_size=4096

Answer 16

I had a similar heap allocation error while deploying to Heroku. The app would still build correctly but would not load in the browser. Heroku logs would show me this: FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

After trying a dozen different things this seemed to work in package.json:

 "start": "react-scripts --max_old_space_size=4096 start",
 "build": "react-scripts --max_old_space_size=4096 build",

Answer 17

I had the same error. Fixed it by using an earlier version of Node/npm. Might fix your problem.

Answer 18

That problem is related with large files in your project.

I'm using create-react-app, and I got that error, after doing some search, it seems one solution is this.

Put in .env file:

GENERATE_SOURCEMAP=false