title: React/Node "JavaScript heap out of memory" error on publish in Visual Studio
body: <p>I know this problem has <a href="https://stackoverflow.com/questions/38558989/node-js-heap-out-of-memory">been</a> <a href="https://stackoverflow.com/questions/38558989/node-js-heap-out-of-memory">raised</a> <a href="https://stackoverflow.com/questions/53230823/fatal-error-ineffective-mark-compacts-near-heap-limit-allocation-failed-javas">many</a> <a href="https://stackoverflow.com/questions/43922573/javascript-heap-out-of-memory-error">times</a>, so please bear with me. <code>npm build run</code> keeps failing with the &quot;JavaScript heap out of memory&quot; error. I've tried setting the Node heap size using the <a href="https://stackoverflow.com/questions/56742334/how-to-use-the-node-options-environment-variable-to-set-the-max-old-space-size-g?rq=1">environment variable</a> as well as command-line argument <code>--max-old-space-size=8000</code>. I also tried this deprecated <a href="https://www.npmjs.com/package/increase-memory-limit" rel="nofollow noreferrer">npm package</a></p>
  <ul>
  <li>I have a ReactJS 17 app in Visual Studio with .Net Core 3.1 (No Redux)</li>
  <li>I can run the app locally from Visual Studio with no issues.</li>
  <li>I have tried clearing the npm cache by deleting the package-lock.json, deleting the npm_modules folder, and running <code>npm cache clean --force</code> followed by <code>npm install</code></li>
  <li>I also updated Node to the latest version</li>
  </ul>
  <p>The problem occurs when I publish the app from within Visual Studio (2019 Enterprise) or when I execute &quot;npm run build&quot; from the command line. (VS publish executes <code>npm run build</code> so the result is the same)
  The publish output log ends like this</p>
  <pre><code>...
  ...
  npm notice
  npm notice New patch version of npm available! 8.1.0 -&gt; 8.1.2
  npm notice Changelog: &lt;https://github.com/npm/cli/releases/tag/v8.1.2&gt;
  npm notice Run `npm install -g npm@8.1.2` to update!
  npm notice
  npm run build --max-old-space-size=8000
  
  &gt; aptivdataviz.ui@0.1.0 build
  &gt; react-scripts build
  
  Creating an optimized production build...
  
  &lt;--- Last few GCs ---&gt;
  
  [25772:000001DF72B19920] 116426 ms: Mark-sweep (reduce) 2045.5 (2082.4) -&gt; 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) -&gt; 2045.8 (2083.6) MB, 1584.9 / 0.1 ms (average mu = 0.306, current mu = 0.001) allocation failure scavenge might not succeed
  
  
  &lt;--- JS stacktrace ---&gt;
  
  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 &quot;npm run build --max-old-space-size=8000&quot; exited with code -1.
  Done building project &quot;Foo.UI.csproj&quot; -- FAILED.
  </code></pre>
  <p>you'll notice the &quot; --max-old-space-size=8000&quot; at the end. I tried adding that to my csproj file, but this had no effect:</p>
  <pre><code>  &lt;Target Name=&quot;PublishRunWebpack&quot; AfterTargets=&quot;ComputeFilesToPublish&quot;&gt;
      &lt;!-- As part of publishing, ensure the JS resources are freshly built in production mode --&gt;
      &lt;Exec WorkingDirectory=&quot;$(SpaRoot)&quot; Command=&quot;npm install --max-old-space-size=8000&quot; /&gt;
      &lt;Exec WorkingDirectory=&quot;$(SpaRoot)&quot; Command=&quot;npm run build --max-old-space-size=8000&quot; /&gt;
  
      &lt;!-- Include the newly-built files in the publish output --&gt;
      &lt;ItemGroup&gt;
        &lt;DistFiles Include=&quot;$(SpaRoot)build\**; $(SpaRoot)build-ssr\**&quot; /&gt;
        &lt;ResolvedFileToPublish Include=&quot;@(DistFiles-&gt;'%(FullPath)')&quot; Exclude=&quot;@(ResolvedFileToPublish)&quot;&gt;
          &lt;RelativePath&gt;%(DistFiles.Identity)&lt;/RelativePath&gt;
          &lt;CopyToPublishDirectory&gt;PreserveNewest&lt;/CopyToPublishDirectory&gt;
          &lt;ExcludeFromSingleFile&gt;true&lt;/ExcludeFromSingleFile&gt;
        &lt;/ResolvedFileToPublish&gt;
      &lt;/ItemGroup&gt;
    &lt;/Target&gt;
  </code></pre>
  <p>this is the output from &quot;npm run build&quot; (with and without the <code>--max-old-space-size</code> argument)
  PS C:\Dev...\Foo.UI\ClientApp&gt; npm run build</p>
  <pre><code>&gt; aptivdataviz.ui@0.1.0 build
  &gt; react-scripts build
  
  Creating an optimized production build...
  
  &lt;--- Last few GCs ---&gt;
  
  [3440:000002CDAA96ADB0]   111440 ms: Mark-sweep (reduce) 2045.6 (2082.6) -&gt; 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) -&gt; 2045.7 (2083.9) MB, 2079.8 / 0.1 ms  (average mu = 0.260, current mu = 0.001) allocation failure scavenge might not succeed
  
  
  &lt;--- JS stacktrace ---&gt;
  
  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&gt;
  </code></pre>
  <p>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.</p>
  <p>Why will VS run the app successfully, but not publish it without this issue?</p>
  <p><strong>UPDATE</strong>
  I tried updating my package.json file to include the <code>max old space size</code> argument</p>
  <pre><code>  &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts --max_old_space_size=4096 build&quot;,
      &quot;test&quot;: &quot;cross-env CI=true react-scripts test --env=jsdom&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;,
      &quot;lint&quot;: &quot;eslint ./src/**/*.ts ./src/**/*.tsx&quot;
    },
  </code></pre>
  <p>and I get the following when I <code>npm run build</code></p>
  <pre><code>&gt; aptivdataviz.ui@0.1.0 build
  &gt; react-scripts --max_old_space_size=4096 build
  
  Creating an optimized production build...
  
  &lt;--- Last few GCs ---&gt;
  </code></pre>
  <p>Thanks in advance!</p>