reactjs/react-modal

Huge memory leak with Jest/Enzyme after upgrading to react-modal 3.X

Open

#593 opened on Jan 10, 2018

View on GitHub
 (43 comments) (9 reactions) (0 assignees)JavaScript (7,294 stars) (828 forks)batch import
bughelp wantedneeds infotesting

Description

Summary:

For a while now, I've been unable to upgrade to react-modal 3.X in my React 16 project with Jest/Enzyme because when I run tests Node itself actually crashes and I usually have to take some fairly nuclear steps such as force-quitting the process in my activity monitor app in order to use it again. The latest 2.X release of react-modal is totally fine.

Steps to reproduce:

  1. Upgrade react-modal from 2.4.1 to 3.X
  2. Run npm run jest
  3. First few tests may run, but eventually the process hangs, and eventually these errors start to spill out:
<--- Last few GCs --->

[46548:0x102802400]    43615 ms: Mark-sweep 1402.9 (1437.6) -> 1402.9 (1436.6) MB, 1477.5 / 0.0 ms  (+ 0.0 ms in 0 steps since start of marking, biggest step 0.0 ms, walltime since start of marking 1477 ms) last resort GC in old space requested
[46548:0x102802400]    45072 ms: Mark-sweep 1402.9 (1436.6) -> 1402.9 (1436.6) MB, 1456.0 / 0.0 ms  last resort GC in old space requested


<--- JS stacktrace --->

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

Security context: 0x38a049725ec1 <JSObject>
    1: read [/path/to/project/node_modules/react-dom/cjs/react-dom-server.node.development.js:~2206] [pc=0x181429965313](this=0x38a08a383211 <ReactDOMServerRenderer map = 0x38a00fd8cc29>,bytes=0x38a0125029a9 <Number inf>)
    3: renderToStaticMarkup [/path/to/project/node_modules/react-dom/cjs/react-dom-server.node.development.js:2512] [bytecode=0x38a0...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: node::Abort() [/Users/username/.nvm/versions/node/v8.9.0/bin/node]
 2: node::FatalException(v8::Isolate*, v8::Local<v8::Value>, v8::Local<v8::Message>) [/Users/username/.nvm/versions/node/v8.9.0/bin/node]
 3: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [/Users/username/.nvm/versions/node/v8.9.0/bin/node]
 4: v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [/Users/username/.nvm/versions/node/v8.9.0/bin/node]
 5: v8::internal::Runtime_AllocateInTargetSpace(int, v8::internal::Object**, v8::internal::Isolate*) [/Users/username/.nvm/versions/node/v8.9.0/bin/node]
 6: 0x18142970463d

*Note that I've replaced the actual path and username in this snippet.

Contributor guide

Tech stack
javascriptreact
Domain
frontendtesting
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
4
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
React knowledgeFamiliarity with Jest and EnzymeDebugging memory leaks
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
30
Research direction
The issue manifests when running tests with Jest/Enzyme after upgrading to react modal 3.x, causing Node to run out of memory. The stack trace points to react dom server (server side rendering). Investigate changes between react modal 2.x and 3.x that affect SSR behavior, such as how the modal component handles rendering or lifecycle hooks. Focus on the `Modal` component source (likely in `src/components/Modal.js`). Check for potential infinite loops or excessive re renders during server side rendering. Additionally, review issues and comments in the linked issue #593 for any suggested fixes or reproduction hints.