CODEWITHSUNDEEP
reactjsvisual-studionpmnpm-build
Adam Hey
Adam Hey

Reputation: 1691

React/Node "JavaScript heap out of memory" error on publish in Visual Studio

I know this problem has been raised many times, so please bear with me. npm build run keeps failing with the "JavaScript heap out of memory" error. I've tried setting the Node heap size using the environment variable as well as command-line argument --max-old-space-size=8000. I also tried this deprecated npm package

The problem occurs when I publish the app from within Visual Studio (2019 Enterprise) or when I execute "npm run build" from the command line. (VS publish executes npm run build so the result is the same) The publish output log ends like this

...
...
npm notice
npm notice New patch version of npm available! 8.1.0 -> 8.1.2
npm notice Changelog: <https://github.com/npm/cli/releases/tag/v8.1.2>
npm notice Run `npm install -g [email protected]` to update!
npm notice
npm run build --max-old-space-size=8000

> [email protected] build
> react-scripts build

Creating an optimized production build...

<--- Last few GCs --->

[25772:000001DF72B19920] 116426 ms: Mark-sweep (reduce) 2045.5 (2082.4) -> 2045.0 (2082.9) MB, 1337.8 / 0.1 ms (+ 87.0 ms in 21 steps since start of marking, biggest step 8.4 ms, walltime since start of marking 1439 ms) (average mu = 0.482, current mu [25772:000001DF72B19920] 118013 ms: Mark-sweep (reduce) 2046.1 (2082.9) -> 2045.8 (2083.6) MB, 1584.9 / 0.1 ms (average mu = 0.306, current mu = 0.001) allocation failure scavenge might not succeed


<--- JS stacktrace --->

EXEC(0,0): Error : Reached heap limit Allocation failed - JavaScript heap out of memory
1: 00007FF7AF3A013F v8::internal::CodeObjectRegistry::~CodeObjectRegistry+112495
2: 00007FF7AF32F396 DSA_meth_get_flags+65526
3: 00007FF7AF33024D node::OnFatalError+301
4: 00007FF7AFC619EE v8::Isolate::ReportExternalAllocationLimitReached+94
5: 00007FF7AFC4BECD v8::SharedArrayBuffer::Externalize+781
6: 00007FF7AFAEF61C v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1468
7: 00007FF7AFAEC754 v8::internal::Heap::CollectGarbage+4244
8: 00007FF7AFAEA0D0 v8::internal::Heap::AllocateExternalBackingStore+2000
9: 00007FF7AFB0EA06 v8::internal::Factory::NewFillerObject+214
10: 00007FF7AF841CD5 v8::internal::DateCache::Weekday+1797
11: 00007FF7AFCEF3E1 v8::internal::SetupIsolateDelegate::SetupHeap+494417
12: 00007FF7AFCAB44B v8::internal::SetupIsolateDelegate::SetupHeap+215995
13: 000001DF74924705
C:\Dev\.....\Foo.UI.csproj(171,5): Error MSB3073: The command "npm run build --max-old-space-size=8000" exited with code -1.
Done building project "Foo.UI.csproj" -- FAILED.

you'll notice the " --max-old-space-size=8000" at the end. I tried adding that to my csproj file, but this had no effect:

  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install --max-old-space-size=8000" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build --max-old-space-size=8000" />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)build\**; $(SpaRoot)build-ssr\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

this is the output from "npm run build" (with and without the --max-old-space-size argument) PS C:\Dev...\Foo.UI\ClientApp> npm run build

> [email protected] build
> react-scripts build

Creating an optimized production build...

<--- Last few GCs --->

[3440:000002CDAA96ADB0]   111440 ms: Mark-sweep (reduce) 2045.6 (2082.6) -> 2045.0 (2083.1) MB, 1629.6 / 0.1 ms  (average mu = 0.452, current mu = 0.005) allocation failure scavenge might not succeed
[3440:000002CDAA96ADB0]   113522 ms: Mark-sweep (reduce) 2046.1 (2083.1) -> 2045.7 (2083.9) MB, 2079.8 / 0.1 ms  (average mu = 0.260, current mu = 0.001) allocation failure scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF63704013F v8::internal::CodeObjectRegistry::~CodeObjectRegistry+112495
 2: 00007FF636FCF396 DSA_meth_get_flags+65526
 3: 00007FF636FD024D node::OnFatalError+301
 4: 00007FF6379019EE v8::Isolate::ReportExternalAllocationLimitReached+94
 5: 00007FF6378EBECD v8::SharedArrayBuffer::Externalize+781
 6: 00007FF63778F61C v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1468
 7: 00007FF63778C754 v8::internal::Heap::CollectGarbage+4244
 8: 00007FF63778A0D0 v8::internal::Heap::AllocateExternalBackingStore+2000
 9: 00007FF6377AEA06 v8::internal::Factory::NewFillerObject+214
10: 00007FF6374E1CD5 v8::internal::DateCache::Weekday+1797
11: 00007FF63798F3E1 v8::internal::SetupIsolateDelegate::SetupHeap+494417
12: 000002CDACB7E30F
PS C:\Dev\...\Foo.UI\ClientApp>

I'm guessing that my attempts to increase the heap size have been ineffective/wrong for some reason, or it's something else that is manifesting that way.

Why will VS run the app successfully, but not publish it without this issue?

UPDATE I tried updating my package.json file to include the max old space size argument

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts --max_old_space_size=4096 build",
    "test": "cross-env CI=true react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint ./src/**/*.ts ./src/**/*.tsx"
  },

and I get the following when I npm run build

> [email protected] build
> react-scripts --max_old_space_size=4096 build

Creating an optimized production build...

<--- Last few GCs --->

Thanks in advance!

Upvotes: 3

Views: 8168

Answers (2)

Natnael Kagnaw
Natnael Kagnaw

Reputation: 75

It might be silly but here is my scenario in the sense of JavaScript Heap out of memory.

// button.jsx
const Button = () => {
    return <Button>Click</Button>;
};


// button.test.jsx
test("button is displayed in UI", () => {
   render(<Button />);
   const buttonElement = screen.getByText("Click");
   expect(buttonElement).toBeInTheDocument();
})

Now if you look closely i used <Button>Click</Button> instead of <button>Click</button>

And that cause the Error. It seems similar to Recursive self call with no base case. So, make sure you are not self calling your components.

Upvotes: 0

Adam Hey
Adam Hey

Reputation: 1691

Well, after branching my project and stripping it piece by piece, and running npm run build each time, it ended up being syntax errors that were manifesting as the memory heap error.

I reached a point where npm run build ran successfully, so I started re-adding my components one by one. I had many syntax errors that I solved one by one.

Some were down to assigning a string variable to an object which was not a string.

And then it happened, the heap error came up after restoring one of the components. This was also a syntax error! NOT a memory issue!

I do find it weird that these issues only get raised on npm run build and not when you hit F5 in Visual Studio. The other annoying issue is that when you do npm run build it only raises ONE issue at a time instead of listing all the issues that you could address in one go.

Upvotes: 4

Related Questions