`npm run watch` heap crash

[justingolden21]

`npm run watch` heap crash

[Aetles]

Don't know if it's related but I could never run npm run watch on my hosting server, crashed because of to little memory (I think). But running the individual commands (like npm run watch:css-app and npm run production:css-app) instead of multiple at once (like npm run watch) works every time.

[justingolden21]

Still crashes btw. This seems like a common problem in more places than just tailwind. There must be a memory leak somewhere, but hell if I have any idea.

[justingolden21]

Seems to still crash.

[1] Rebuilding...
[0] Done in 47814ms.
[0] 
[0] Rebuilding...
[1] Done in 1366ms.
[1] 
[1] <--- Last few GCs --->
[1]
[11372:000001934C9F8260]  5135525 ms: Mark-sweep 4044.9 (4137.7) -> 4032.2 (4141.0) MB, 2513.1 / 11.3 ms  (average mu = 0.307, current mu = 0.021) allocation failure scavenge might not succeed
[1] [11372:000001934C9F8260]  5139639 ms: Mark-sweep 4048.1 (4141.0) -> 4035.4 (4144.2) MB, 4040.0 / 6.9 ms  (average mu = 0.147, current mu = 0.018) allocation 
failure scavenge might not succeed
[1]
[1]
[1] <--- JS stacktrace --->
[1]
[1] FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
[1]  1: 00007FF7A929B1EF v8::internal::CodeObjectRegistry::~CodeObjectRegistry+123599
[1]  2: 00007FF7A9228BA6 v8::internal::MicrotaskQueue::GetMicrotasksScopeDepth+65206
[1]  3: 00007FF7A9229C7D node::OnFatalError+301
 4: 00007FF7A9B5C20E v8::Isolate::ReportExternalAllocationLimitReached+94
[1]  5: 00007FF7A9B467ED v8::SharedArrayBuffer::Externalize+781
[1]  6: 00007FF7A99E9DCC v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1468
[1]  7: 00007FF7A99E6EE4 v8::internal::Heap::CollectGarbage+4244
 8: 00007FF7A99E4860 v8::internal::Heap::AllocateExternalBackingStore+2000
[1]  9: 00007FF7A9A093E6 v8::internal::Factory::NewFillerObject+214
[1] 10: 00007FF7A973BB85 v8::internal::DateCache::Weekday+1797
[1] 11: 00007FF7A9BE9F01 v8::internal::SetupIsolateDelegate::SetupHeap+494417
[1] 12: 00007FF7A9BEADA9 v8::internal::SetupIsolateDelegate::SetupHeap+498169
[1] 13: 000001934E897F9E
[0] 
<--- Last few GCs --->
[0]
[0] [19752:00000162441491F0]  5136452 ms: Mark-sweep 4049.7 (4140.4) -> 4036.9 (4143.6) MB, 2549.5 / 10.5 ms  (average mu = 0.179, current mu = 0.020) allocation failure scavenge might not succeed
[19752:00000162441491F0]  5140234 ms: Mark-sweep 4052.9 (4143.6) -> 4040.1 (4146.6) MB, 3731.8 / 8.9 ms  (average mu = 0.086, current mu = 0.013) allocation failure scavenge might not succeed
[0]
[0]
[0] <--- JS stacktrace --->
[0]
[0] FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
[0]  1: 00007FF7A929B1EF v8::internal::CodeObjectRegistry::~CodeObjectRegistry+123599
[0]  2: 00007FF7A9228BA6 v8::internal::MicrotaskQueue::GetMicrotasksScopeDepth+65206
[0]  3: 00007FF7A9229C7D node::OnFatalError+301
[0]  4: 00007FF7A9B5C20E v8::Isolate::ReportExternalAllocationLimitReached+94
[0]  5: 00007FF7A9B467ED v8::SharedArrayBuffer::Externalize+781
 6: 00007FF7A99E9DCC v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1468
[0]  7: 00007FF7A99E6EE4 v8::internal::Heap::CollectGarbage+4244
[0]  8: 00007FF7A99E4860 v8::internal::Heap::AllocateExternalBackingStore+2000
 9: 00007FF7A9A02570 v8::internal::FreeListManyCached::Reset+1408
[0] 10: 00007FF7A9A02C25 v8::internal::Factory::AllocateRaw+37
[0] 11: 00007FF7A9A182FB v8::internal::FactoryBase<v8::internal::Factory>::NewRawOneByteString+75
[0] 12: 00007FF7A98A5314 v8::internal::JSTypedArray::element_size+17492
13: 00007FF7A973B2B1 v8::internal::DateCache::LocalTimezone+737
[0] 14: 00007FF7A9BE9F01 v8::internal::SetupIsolateDelegate::SetupHeap+494417
[0] 15: 00007FF7A9C6896B v8::internal::SetupIsolateDelegate::SetupHeap+1013179
[0] 16: 0000016245EAA4A8
[1] npm run watch:css-editor exited with code 134
[0] npm run watch:css-app exited with code 134

[jeffreyvr]

Based on what @Aetles comment, it appears to only happen on scripts that run concurrently (like npm run watch which uses both a esbuild script (for JS) and the tailwind cli).

But I haven't yet run into these issues myself, so I find it difficult to debug. What OS are you using?

You might consider trying Laravel Mix. For new projects, using the installer, you can add the compiler flag (tailpress new theme-name --compiler="mix").

For existing projects, check out the config here: https://github.com/jeffreyvr/tailpress-installer/blob/master/stubs/mix/webpack.mix.js.stub

Ideally this issue is fixed but as a workaround, you might consider giving the Mix route a try. On most projects I end up using Mix myself too.

[justingolden21]

Thanks for the reply. I'm on Windows 10, and ran into it when splitting from concurrently as well. Cannot currently use another OS at work.

I'll check out Mix. Thanks.

[justingolden21]

After adding laravel mix and finally getting it working, I've got a few concerns/questions if you don't mind:

1. I had to go through several paths that worked fine for months of development and change them in order for laravel mix to actually find the files. Although this is done now, I'm worried I'll run into more path issues in the future
2. After resolving a path issue for my fonts.postcss file that loads fonts with @font-face, now laravel mix copies over the entire folder of fonts into a new folder. Is there any way to avoid this? I know it's creating them for build and referring to those files somehow in webpack under the hood, but the project worked fine without this before laravel mix
3. npx mix seems to just run once. Is there a way I can have it run in watch mode, and
4. can I add an alias in package.json in order to see the script listed there and run it with npm run instead of downloading with npx?
5. We have many .js files that are not included in our app.js as they aren't required to be shipped on every page. Currently, I don't believe these are bundled with laravel mix. Do you have a suggestion or solution?

(also by the way, had to change config to use postcss files)

Sorry to keep going on about this. Had a super tight deadline and got by just ignoring the problem, but now I'm really looking to solve these watch crashing problems once and for all. Also, it seems to primarily be a Windows thing.

EDIT:
some people are saying laravel-mix still gets the js heap out of memory problem: laravel-mix/laravel-mix#2711

Ideally, we'd just use existing scripts and not add laravel mix, but whatever works.

I got it to "watch" with npx mix watch but it still doesn't link the files correctly.

I'm also having trouble adding it to package.json scripts; I tried "mix": "laravel-mix" and it errors, and can't find anywhere in their docs how to add it to scripts. I just found this article: https://www.mikestreety.co.uk/blog/how-to-set-up-and-use-laravel-mix-with-your-project/ that gives these long bloated scripts:

"scripts": {
  "prod:assets": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --env=production --config=node_modules/laravel-mix/setup/webpack.config.js",
  "watch:assets": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
}

We keep thinking it's a max space config in npm but don't see it defined anywhere, so we're not sure. I suppose this may not be a problem unique to tailpress, but do let me know if you've got any insights.

[justingolden21]

Seems like I can run watch mode: npx mix watch

mix.js('src/app.js', 'js')
   .sass('src/app.scss', 'css')
   .browserSync('http://your-app.test');

https://laravel-mix.com/docs/6.0/examples#trigger-browsersync-page-refreshes-when-in-watch-mode

I'll give it a try. Let me know if you know about the other questions I had. Thanks again for the help.

[justingolden21]

Still get this crash between once an hour and once a week. Output:

[0] Rebuilding...
[1] 
[1] Rebuilding...
[0] Done in 1673ms.
[1] Done in 1717ms.
[1] 
[1] Rebuilding...
[0]
[0] Rebuilding...
[0] Done in 1811ms.
[1] Done in 1885ms.
[0]
[0] Rebuilding...
[1]
[1] Rebuilding...
[0] Done in 1374ms.
[1] Done in 1472ms.
[0] 
[0] Rebuilding...
[1] 
[1] Rebuilding...
[0] Done in 1676ms.
[1] Done in 1700ms.
[0] 
[0] Rebuilding...
[1] 
[1] Rebuilding...
[0] Done in 1186ms.
[1] Done in 1288ms.
[0] 
[0] Rebuilding...
[1] 
[1] Rebuilding...
[1] Done in 1285ms.
[0] Done in 1290ms.
[0] 
[0] Rebuilding...
[1] 
[1] Rebuilding...
[0] Done in 1033ms.
[1] Done in 1097ms.
[0] 
[0] <--- Last few GCs --->
[0]
[16224:0000012F4E9B5090] 491584800 ms: Mark-sweep 4046.1 (4137.7) -> 4033.7 (4141.2) MB, 3057.2 / 0.0 ms  (average mu = 0.320, current mu = 0.031) allocation failure; scavenge might not succeed
[0] [16224:0000012F4E9B5090] 491589696 ms: Mark-sweep 4049.6 (4141.2) -> 4037.1 (4144.4) MB, 4801.3 / 0.0 ms  (average mu = 0.159, current mu = 0.019) 
allocation failure; scavenge might not succeed
[0]
[0]
[0] <--- JS stacktrace --->
[0]
[0] FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
[0]  1: 00007FF7395F012F node_api_throw_syntax_error+175407
[0]  2: 00007FF739575AF6 SSL_get_quiet_shutdown+63110
[0]  3: 00007FF739576EB2 SSL_get_quiet_shutdown+68162
 4: 00007FF73A00FF24 v8::Isolate::ReportExternalAllocationLimitReached+116
[0]  5: 00007FF739FFB282 v8::Isolate::Exit+674
[0]  6: 00007FF739E7D0DC v8::internal::EmbedderStackStateScope::ExplicitScopeForTesting+124
[0]  7: 00007FF739E7A2FB v8::internal::Heap::CollectGarbage+3963
[0]  8: 00007FF739E90533 v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath+2099
 9: 00007FF739E90DDD v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath+93
[0] 10: 00007FF739EA0613 v8::internal::Factory::NewFillerObject+851
[0] 11: 00007FF739B91BC5 v8::internal::DateCache::Weekday+1349
12: 00007FF73A0AD5C1 v8::internal::SetupIsolateDelegate::SetupHeap+558193
[0] 13: 00007FF6BA4CB031
[0] npm run watch:css-app exited with code 134
[1] 
[1] <--- Last few GCs --->
[1]
[1] [1828:00000287BFF9E5A0] 491588473 ms: Mark-sweep 4048.4 (4140.2) -> 4035.9 (4143.7) MB, 3047.3 / 0.0 ms  (average mu = 0.205, current mu = 0.023) allocation failure; scavenge might not succeed
[1828:00000287BFF9E5A0] 491592263 ms: Mark-sweep 4051.8 (4143.7) -> 4039.3 (4146.9) MB, 3729.9 / 0.0 ms  (average mu = 0.110, current mu = 0.016) allocation failure; scavenge might not succeed
[1]
[1]
<--- JS stacktrace --->
[1]
[1] FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
[1]  1: 00007FF7395F012F node_api_throw_syntax_error+175407
[1]  2: 00007FF739575AF6 SSL_get_quiet_shutdown+63110
[1]  3: 00007FF739576EB2 SSL_get_quiet_shutdown+68162
[1]  4: 00007FF73A00FF24 v8::Isolate::ReportExternalAllocationLimitReached+116
 5: 00007FF739FFB282 v8::Isolate::Exit+674
[1]  6: 00007FF739E7D0DC v8::internal::EmbedderStackStateScope::ExplicitScopeForTesting+124
[1]  7: 00007FF739E7A2FB v8::internal::Heap::CollectGarbage+3963
[1]  8: 00007FF739E90533 v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath+2099
 9: 00007FF739E90DDD v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath+93
[1] 10: 00007FF739EA0613 v8::internal::Factory::NewFillerObject+851
[1] 11: 00007FF739B91BC5 v8::internal::DateCache::Weekday+1349
12: 00007FF73A0AD5C1 v8::internal::SetupIsolateDelegate::SetupHeap+558193
[1] 13: 00007FF73A0AE68D v8::internal::SetupIsolateDelegate::SetupHeap+562493
[1] 14: 00007FF6BA2C7AEF
[1] npm run watch:css-editor exited with code 134
[2] ^CTerminate batch job (Y/N)? ^CTerminate batch job (Y/N)? 
^C^C
C:\Users\my-user\Local Sites\my-site\app\public\wp-content\themes\my-theme>npm run watch:js exited with code 1

Edited last line to change names of folders.