reactjs React/Node在Visual Studio中发布时出现“JavaScript堆内存不足”错误

ars1skjm 于 10个月前发布在 React

关注(0)|答案(2)|浏览(59)

我知道这个问题有been raised many times，所以请容忍我。npm build run一直失败，并出现“JavaScript heap out of memory”错误。我尝试使用environment variable和命令行参数--max-old-space-size=8000设置Node堆大小。我也尝试了这个弃用的npm package

我在Visual Studio中有一个ReactJS 17应用程序，带有.Net Core 3.1（无Redux）
我可以从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 run build，因此结果相同）发布输出日志如下所示

...
...
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会成功运行应用程序，但在没有此问题的情况下无法发布？

UPDATE我尝试更新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

来源：https://stackoverflow.com/questions/69826318/react-node-javascript-heap-out-of-memory-error-on-publish-in-visual-studio

2条答案

按热度按时间

34gzjxbg1#

好吧，在分支我的项目并逐段剥离它，并每次运行npm run build之后，它最终成为语法错误，表现为内存堆错误。
我达到了npm run build成功运行的程度，因此我开始逐个重新添加组件。我有很多语法错误，我解决了一个接一个。
有些人把一个字符串变量赋值给一个不是字符串的对象。
然后它发生了，堆错误在恢复其中一个组件后出现。这也是语法错误！不是记忆问题！
我确实觉得奇怪的是，这些问题只在npm run build上出现，而不是在Visual Studio中按F5时出现。另一个恼人的问题是，当您执行npm run build时，它一次只提出一个问题，而不是列出您可以一次性解决的所有问题。

赞(0）回复(0）举报 10个月前

l2osamch2#

这可能有点傻，但这是我的场景，从JavaScript堆内存不足的Angular 来看。

// 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();
})

字符串
现在如果你仔细看，我使用<Button>Click</Button>而不是<button>Click</button>
这导致了错误。它看起来类似于没有基本情况的递归自调用。因此，请确保您不是自调用组件。

赞(0）回复(0）举报 10个月前

我来回答

reactjs React/Node在Visual Studio中发布时出现“JavaScript堆内存不足”错误

2条答案

相关问题

热门标签

最新问答