Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Since updating to 3.3.0, running out of memory #8096

Open
daviseford opened this issue Dec 5, 2019 · 136 comments
Open

Since updating to 3.3.0, running out of memory #8096

daviseford opened this issue Dec 5, 2019 · 136 comments

Comments

@daviseford
Copy link

daviseford commented Dec 5, 2019

Describe the bug

After upgrading to 3.3.0 and TS 3.7.3 (was previously on 3.2.0 and TS 3.7.2), I am unable to run yarn start

I receive this error: FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

Reverting to react-scripts v3.2.0 resolves this issue - Typescript being at 3.7.3 or 3.7.2. has no effect, so I've narrowed it to react-scripts.

Did you try recovering your dependencies?

Yes, blew away node_modules and re-ran yarn, tried without a lock file, etc. No dice.

Environment

Windows 10, VSCode (also occurs on my macbook)

@daviseford daviseford changed the title Since updating to 3.3.0, running out of me Since updating to 3.3.0, running out of memory Dec 5, 2019
@endiliey
Copy link
Contributor

endiliey commented Dec 6, 2019

You’ll need a reproducible repo for this. There are some dependencies upgrade in 3.3.0 and that could have taken more memory usage.

@xiaoxiangmoe
Copy link
Contributor

I also encountered the same problem in the company project.

@anhquande
Copy link

me too

@daviseford
Copy link
Author

daviseford commented Dec 6, 2019

I apologize because this isn't a minimally reproducible repo, but this is my repo having problems: https://github.com/daviseford/aos-reminders

Just running yarn, upgrading react-scripts to 3.3.0, and running yarn start will give you the bad behavior.

I will look into creating a minimal version after work.

@mrmckeb
Copy link
Contributor

mrmckeb commented Dec 6, 2019

Have you tried removing the existing node_modules, then reinstalling? Maybe also removing the lockfile? Just out of interest.

@daviseford
Copy link
Author

daviseford commented Dec 6, 2019

Yes to both.

@MasterCassim
Copy link

I had the same error with nodejs v10; upgrading to nodejs v12 fixed the issue for me.

@daviseford
Copy link
Author

I am on v12.11.0

@xiaoxiangmoe
Copy link
Contributor

I am on v13.2.0

@petetnt
Copy link
Contributor

petetnt commented Dec 9, 2019

Temporary workaround is to set a larger max-old-space-size eg, react-scripts --expose-gc --max-old-space-size=8192 ... as stated in #8130 (comment)

@abrcdf1023
Copy link

Use @petetnt suggestion is work but it take a lot of build time.

@MichaelCharles
Copy link

I experienced this today, however it was from updating from 3.0.1 to 3.2.0. After reverting to 3.0.1 the problem disappeared.

I'll attach the generated report.json file.
report.20191213.130235.34745.0.001.json.zip

@chawax
Copy link

chawax commented Dec 18, 2019

Same problem here. I upgraded to react-scripts 3.3.0 and webpack 4.41.2 and I had this memory problem.

@petetnt suggestion did not help

Disabling sourcemaps generation solved the problem, but you need them when developing !

@robsco-git
Copy link

Please see wojtekmaj/react-pdf#498 (comment) - a response to what I think may be the same issue. I am not sure how one fixes this within the context of create-react-app.

@astrada
Copy link

astrada commented Dec 19, 2019

It looks like this issue: babel/babel#10875. That's fixed in https://github.com/babel/babel/releases/tag/v7.7.7. create-react-app should bump the @babel/core dependency.

@yusufnb
Copy link

yusufnb commented Dec 24, 2019

Having this same issue since I upgraded react-scripts. Node version v13.1.0. react-scripts 3.3.0.

@gnmerritt
Copy link

The following in package.json fixed the issue for me (react-scripts 3.3.0, react-pdf) without requiring the memory increase flags:

  "devDependencies": {
    "@babel/core": "^7.7.7",

@benbruscella
Copy link

@gnmerritt this didn't work for us, anything else you changed?

@erik-sytnyk
Copy link

I've been able to run app changing npm start script

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

@jacobwod
Copy link

jacobwod commented Jan 9, 2020

The following in package.json fixed the issue for me (react-scripts 3.3.0, react-pdf) without requiring the memory increase flags:

  "devDependencies": {
    "@babel/core": "^7.7.7",

Adding "@babel/core": "^7.7.7", to devDependencies did work in my project, even though I didn't have explicit dependency to @bable/core previously in package.json.

There were (and still are) multiple dependencies to @bable/core in package-lock.json, of course. Intrestingly, those "dependencies of dependencies" still refer to 7.7.4 in package-lock.json. But the project starts and builds fine.

jacobwod referenced this issue in hajkmap/Hajk Jan 9, 2020
- We had a major bug since a while back where we ran out of heap memory when building and/or starting the project. I boiled it down to be caused by a bug in Bable 7.7.4, which itself isn't a dependency, but react-scripts depend on it. The bug is fixed in 7.7.7, but I couldn't easily upgrade the package. We'll have to wait for a new release of react-scripts (>3.3.0) and see if they've bumped Babel to >=7.7.7.
- Note that this only happens in bigger projects when the source map is being build. Admin remains unaffected, even tough it's on 3.3.0.
@cgratie
Copy link

cgratie commented Apr 12, 2021

My personal experience with this bug: GENERATE_SOURCEMAP=false works in some cases, but not always:

  • enough RAM available => no bug
  • limited RAM (2GB - t2-small instance on AWS) => bug
    • BUT with additional --max_old_space_size=2048 => no bug (slow)
    • AND after successful build (for example as above) I can remove --max_old_space_size and the build will succeed (and run faster too). If, however, I then remove the cache from node_modules/.cache, the build fails again as before.

Maybe this can help debug the issue.

@pavankjadda
Copy link

pavankjadda commented Apr 13, 2021

I have new react project and I still see this error even after setting max old space size

react-scripts --max_old_space_size=4096 build

I am using react-scripts version 4.0.3 and react version 17.0.2

@Dineshchitta
Copy link

Dineshchitta commented Jun 5, 2021

In my case, I tried increasing heap memory space to 4 GB but the build is getting very slow(Other solutions like Upgrading babel,CRA,Node didn't work for me). When the build is success with 4GB Heapspace I observed that nearly 8 - 10 chunk files sizes are nearly 1MB. So I analyzed all those chunks using Source map explorer. In all chunks almost same libraries code is included (In my case those are Firebase, Video player, etc which are heavy)

So In my assumption when webpack is trying to bundle all these chunks It had to build all those libraries dependency graph in every chunk which in turn causes heap memory space issue. So I used Loadable components to lazy load those libraries.

After lazy loading all those libraries all chunks files size is reduced almost by half, And Build is getting success without increasing any heap space and build time also got reduced.

After optimization if I keep build in 6vCPU , i7 System it is taking around 3 - 4 minutes and I observed that based on the number of Cores available in the system build time is getting reduced. If I keep build in 2vCPU system it is taking around 20 - 25 mins like that sometimes

@sharma-sudhakar
Copy link

I have new react project and I still see this error even after setting max old space size

react-scripts --max_old_space_size=4096 build

I am using react-scripts version 4.0.3 and react version 17.0.2

I am getting the same error. Did anyone find any workaround?

@ghost
Copy link

ghost commented Jul 12, 2021

I have new react project and I still see this error even after setting max old space size

react-scripts --max_old_space_size=4096 build

I am using react-scripts version 4.0.3 and react version 17.0.2

I am getting the same error. Did anyone find any workaround?

No, but in my case one specific dependency causing the issue. Once I remove it, the issues went away. I know it does not solve the original issue, but a temporary solution

@tlester
Copy link

tlester commented Aug 8, 2021

Yeah.. I have min max_old_space_size set to 16384 and it's STILL failing after 40 minutes. It's ridiculous. Builds in 45 seconds on my workstation. Build on google cloud run, and it's 40 minutes. What gives?

@SamKirkland
Copy link

@tlester see my comment above. max_old_space_size does NOT set the typescript memory size without modifications via craco

@LucasHang
Copy link

Any update about that? I've already tried increasing max_old_space_size but it didn't worked.
I'm searching for anything that may cause this, but founded nothing till now :(

@martenrichter
Copy link

This happens again with react-scripts@5.0.0. For me it is caused by:
import pdfjsWorker from 'pdfjs-dist/legacy/build/pdf.worker.entry'
and can be fixed by deactivating building sourcemaps. It did not occur however on 4.0.3 .

@Fullchee
Copy link

Fullchee commented Jan 28, 2022

What worked for me

  • cloning the repo in a different folder.

What didn't work for me

  • deleting folder and re-cloning it in the same folder but I got the JavaScript Heap out of memory error.
  • adding the --max-old-space-size flag
  • restarting the VM

What may have caused this for me

  • npm linking with another local package

Environment

I've only had this problem on my AWS Workspace (Windows 10) and not my Mac.

@zachkirsch
Copy link

+1 I have been getting out of memory errors when running craco start since upgrading to react-scripts@5.0.0

@andr30z
Copy link

andr30z commented Feb 1, 2022

In my case, I tried increasing heap memory space to 4 GB but the build is getting very slow(Other solutions like Upgrading babel,CRA,Node didn't work for me). When the build is success with 4GB Heapspace I observed that nearly 8 - 10 chunk files sizes are nearly 1MB. So I analyzed all those chunks using Source map explorer. In all chunks almost same libraries code is included (In my case those are Firebase, Video player, etc which are heavy)

So In my assumption when webpack is trying to bundle all these chunks It had to build all those libraries dependency graph in every chunk which in turn causes heap memory space issue. So I used Loadable components to lazy load those libraries.

After lazy loading all those libraries all chunks files size is reduced almost by half, And Build is getting success without increasing any heap space and build time also got reduced.

After optimization if I keep build in 6vCPU , i7 System it is taking around 3 - 4 minutes and I observed that based on the number of Cores available in the system build time is getting reduced. If I keep build in 2vCPU system it is taking around 20 - 25 mins like that sometimes

Thanks, using LoadableComponents resolved the problem for me.

@AmrAbdulrahman
Copy link

For TypeScript folks out there:

The Problem:
I have been facing the same problem for few days now. --max-old-space-size won't help. since it doesn't forward the heapLimit to ForkTsCheckerWebpackPlugin

https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/blob/main/README.md#options
Default spaceLimit is 2048.

CRA doesn't send any value for spaceLimit here: https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/webpack.config.js#L720

My solution:
I already use react-app-rewired along with customize-cra to provide configs for CRA.
What I did is to simply find and replace ForkTsCheckerWebpackPlugin plugin as following:

config-overrides.js

const { override, useBabelRc, removeModuleScopePlugin, addWebpackPlugin } = require('customize-cra');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const paths = require("react-scripts/config/paths.js");
const resolve = require('resolve');

module.exports = (config, webpackEnv) => {
  // https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/webpack.config.js#L101
  const isEnvDevelopment = webpackEnv === 'development';
  const isEnvProduction = webpackEnv === 'production';
  const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

  // feel free to find a smarter way to detect and grab the plugin index 🤷‍♂️ 
  const forkTsCheckerWebpackPluginIndex = config.plugins.findIndex(plugin => {
    const  options = plugin.options || {}
    return "async" in options && "typescript" in options && "issue" in options && "logger" in options;
  });


  // copied from: https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/webpack.config.js#L720
  // and only increased the memory limit
  const heapSizeLimit = 9000;
  const newTsCheckerWebpackPlugin = new ForkTsCheckerWebpackPlugin({
    async: isEnvDevelopment,
    typescript: {
      memoryLimit: heapSizeLimit,
      typescriptPath: resolve.sync('typescript', {
        basedir: paths.appNodeModules,
      }),
      configOverwrite: {
        compilerOptions: {
          sourceMap: isEnvProduction
            ? shouldUseSourceMap
            : isEnvDevelopment,
          skipLibCheck: true,
          inlineSourceMap: false,
          declarationMap: false,
          noEmit: true,
          incremental: true,
          tsBuildInfoFile: paths.appTsBuildInfoFile,
        },
      },
      context: paths.appPath,
      diagnosticOptions: {
        syntactic: true,
      },
      mode: 'write-references',
      // profile: true,
    },
    issue: {
      // This one is specifically to match during CI tests,
      // as micromatch doesn't match
      // '../cra-template-typescript/template/src/App.tsx'
      // otherwise.
      include: [
        { file: '../**/src/**/*.{ts,tsx}' },
        { file: '**/src/**/*.{ts,tsx}' },
      ],
      exclude: [
        { file: '**/src/**/__tests__/**' },
        { file: '**/src/**/?(*.){spec|test}.*' },
        { file: '**/src/setupProxy.*' },
        { file: '**/src/setupTests.*' },
      ],
    },
    logger: {
      infrastructure: 'silent',
    },
  });

  // replace old with new ForkTsCheckerWebpackPlugin
  config.plugins.splice(forkTsCheckerWebpackPluginIndex, 1, newTsCheckerWebpackPlugin);

  return override(
     // i have project specific configs here using `customize-cra` (useBabelRC() for example)
  )(config);
}

I also disabled source map generations unfortunately.
.env

GENERATE_SOURCEMAP=false

Hope that will help you people!

@matiasfacio
Copy link

I have new react project and I still see this error even after setting max old space size

react-scripts --max_old_space_size=4096 build

I am using react-scripts version 4.0.3 and react version 17.0.2

This did it for me. thanks! Do you know why this might work like in my case did?

@egorgrushin
Copy link

My solution based on @AmrAbdulrahman solution:

module.exports = function override(config) {
    const forkTsCheckerWebpackPlugin = config.plugins.find(
        (plugin) => plugin.constructor.name === 'ForkTsCheckerWebpackPlugin',
    );
    if (forkTsCheckerWebpackPlugin) {
        forkTsCheckerWebpackPlugin.options.typescript.memoryLimit = 8192;
    }

    return config;
};

@DamianDobrev
Copy link

My solution based on @AmrAbdulrahman solution:

module.exports = function override(config) {
    const forkTsCheckerWebpackPlugin = config.plugins.find(
        (plugin) => plugin.constructor.name === 'ForkTsCheckerWebpackPlugin',
    );
    if (forkTsCheckerWebpackPlugin) {
        forkTsCheckerWebpackPlugin.options.typescript.memoryLimit = 8192;
    }

    return config;
};

That fixes the issue for me as well and it's the most non-intrusive answer so far because it does not overwrite any of the previously set TS configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests