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
- I have a ReactJS 17 app in Visual Studio with .Net Core 3.1 (No Redux)
- I can run the app locally from Visual Studio with no issues.
- I have tried clearing the npm cache by deleting the package-lock.json, deleting the npm_modules folder, and running
npm cache clean --forcefollowed bynpm install - I also updated Node to the latest version
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 build run 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 npm@8.1.2` to update!
npm notice
npm run build --max-old-space-size=8000
> aptivdataviz.ui@0.1.0 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
> aptivdataviz.ui@0.1.0 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
> aptivdataviz.ui@0.1.0 build
> react-scripts --max_old_space_size=4096 build
Creating an optimized production build...
<--- Last few GCs --->
Thanks in advance!