在 Visual Studio 中发布时出现 React/Node “JavaScript heap out of memory”错误答案

【问题标题】：React/Node "JavaScript heap out of memory" error on publish in Visual Studio在 Visual Studio 中发布时出现 React/Node “JavaScript heap out of memory”错误
【发布时间】：2021-12-17 22:03:50
【问题描述】：

我知道这个问题有been raised many times，所以请多多包涵。 npm build run 不断失败，并出现“JavaScript 堆内存不足”错误。我尝试使用environment variable 以及命令行参数--max-old-space-size=8000 设置节点堆大小。我也试过这个已弃用的npm package

我在 Visual Studio 中有一个带有 .Net Core 3.1（无 Redux）的 ReactJS 17 应用程序
我可以毫无问题地从 Visual Studio 本地运行应用程序。
我尝试通过删除 package-lock.json、删除 npm_modules 文件夹并运行 npm cache clean --force 后跟 npm install 来清除 npm 缓存
我也将 Node 更新到了最新版本

当我从 Visual Studio (2019 Enterprise) 中发布应用程序或从命令行执行“npm run build”时会出现问题。（VS publish 执行npm build run 所以结果是一样的）发布输出日志这样结束

...
...
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.

您会注意到末尾的“--max-old-space-size=8000”。我尝试将其添加到我的 csproj 文件中，但这没有效果：

  <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>

这是“npm run build”的输出（有和没有--max-old-space-size 参数） 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>

我猜想我增加堆大小的尝试由于某种原因是无效/错误的，或者是以这种方式表现出来的其他东西。

为什么 VS 会成功运行应用，但没有这个问题就不能发布？

更新我尝试更新我的 package.json 文件以包含 max old space size 参数

  "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"
  },

当我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 --->

提前致谢！

【问题讨论】：

标签： reactjs visual-studio npm npm-build

【解决方案1】：

好吧，在对我的项目进行分支并逐个剥离它并每次运行npm run build 之后，它最终都是语法错误，表现为内存堆错误。

我达到了npm run build 成功运行的地步，所以我开始一个一个地重新添加我的组件。我有很多语法错误，我一一解决。

有些人决定将字符串变量分配给不是字符串的对象。

然后它发生了，在恢复其中一个组件后出现了堆错误。这也是一个语法错误！不是内存问题！

我觉得奇怪的是，这些问题只在 npm run build 上出现，而不是在 Visual Studio 中按 F5 时出现。另一个烦人的问题是，当您执行npm run build 时，它一次只会提出一个问题，而不是列出您可以一次性解决的所有问题。

【讨论】：