"JavaScript heap out of memory" problems with PostCSS 7 compatibility build

[tzurbaev]

• Node version: 12.20.0
• NPM version: 6.14.8

I'm upgrading a Vue 2 SPA from tailwindcss 1.4.6 to 2.0. Because of the PostCSS plugin tailwindcss requires PostCSS 8. error I'm trying to use PostCSS 7 compatibility build ("tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1"). But this version somehow causes OOM errors while building the app.

Compilation gets really slow at around 66% and it crashes at random vendor files.

Report 1

68% building 1423/1448 modules 25 active /projects/Zenky/Github/zenky-web-ui-tailwind/node_modules/core-js/internals/number-parse-int.js
<--- Last few GCs --->

[46476:0x36ffe40]   128027 ms: Scavenge 2018.7 (2044.6) -> 2009.1 (2045.1) MB, 5.5 / 0.0 ms  (average mu = 0.378, current mu = 0.507) allocation failure 
[46476:0x36ffe40]   128050 ms: Scavenge 2019.6 (2045.1) -> 2009.9 (2046.3) MB, 5.4 / 0.0 ms  (average mu = 0.378, current mu = 0.507) allocation failure 
[46476:0x36ffe40]   128077 ms: Scavenge 2020.4 (2046.3) -> 2011.3 (2055.8) MB, 6.3 / 0.0 ms  (average mu = 0.378, current mu = 0.507) allocation failure 


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x1409219]
Security context: 0x3237200808d1 <JSObject>
    1: hasPromises(aka hasPromises) [0x1ad84b4dd8f1] [/projects/Zenky/Github/zenky-web-ui-tailwind/node_modules/postcss-functions/dist/lib/helpers.js:~13] [pc=0x156946016760](this=0x02489c5c04b1 <undefined>,0x1dcca55116b1 <JSArray[1]>)
    2: transformValue(aka transformValue) [0x138b35f5c8c1] [/projects/Zenky/Github/zenky-web-ui-tailwind/node_modules/postcss-functions/dist/li...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0xa17c40 node::Abort() [node]
 2: 0xa1804c node::OnFatalError(char const*, char const*) [node]
 3: 0xb95a7e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
 4: 0xb95df9 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
 5: 0xd53075  [node]
 6: 0xd53706 v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [node]
 7: 0xd5ffc5 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [node]
 8: 0xd60e75 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
 9: 0xd6251f v8::internal::Heap::HandleGCRequest() [node]
10: 0xd10f85 v8::internal::StackGuard::HandleInterrupts() [node]
11: 0x106c5c6 v8::internal::Runtime_StackGuard(int, unsigned long*, v8::internal::Isolate*) [node]
12: 0x1409219  [node]
Aborted (core dumped)

Report 2

69% building 1431/1454 modules 23 active /projects/Zenky/Github/zenky-web-ui-tailwind/node_modules/core-js/internals/number-is-finite.js
<--- Last few GCs --->

[47804:0x3687e40]   125747 ms: Scavenge 2034.7 (2050.7) -> 2032.7 (2051.2) MB, 6.1 / 0.0 ms  (average mu = 0.218, current mu = 0.226) allocation failure 
[47804:0x3687e40]   125770 ms: Scavenge 2034.9 (2051.2) -> 2033.4 (2051.7) MB, 9.8 / 0.0 ms  (average mu = 0.218, current mu = 0.226) allocation failure 
[47804:0x3687e40]   125784 ms: Scavenge 2036.5 (2052.2) -> 2034.8 (2060.0) MB, 6.0 / 0.0 ms  (average mu = 0.218, current mu = 0.226) allocation failure 


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x1409219]
Security context: 0x0d9c5db408d1 <JSObject>
    1: decl [0x15da80f63e9] [/projects/Zenky/Github/zenky-web-ui-tailwind/node_modules/postcss/lib/stringifier.js:~46] [pc=0x1932bddae6e9](this=0x386477080159 <Stringifier map = 0x39833f572529>,0x3c0398def181 <Declaration map = 0x1f27d8b26599>,0x01fc985c0639 <true>)
    2: rule [0x15da80f6429] [/projects/Zenky/Github/zenky-web-ui-tailwind/node_modules/postcss/lib/stringifier.j...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0xa17c40 node::Abort() [node]
 2: 0xa1804c node::OnFatalError(char const*, char const*) [node]
 3: 0xb95a7e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
 4: 0xb95df9 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
 5: 0xd53075  [node]
 6: 0xd53706 v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [node]
 7: 0xd5ffc5 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [node]
 8: 0xd60e75 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
 9: 0xd6251f v8::internal::Heap::HandleGCRequest() [node]
10: 0xd10f85 v8::internal::StackGuard::HandleInterrupts() [node]
11: 0x106c5c6 v8::internal::Runtime_StackGuard(int, unsigned long*, v8::internal::Isolate*) [node]
12: 0x1409219  [node]
Aborted (core dumped)

Report 3

68% building 1396/1421 modules 25 active /projects/Zenky/Github/zenky-web-ui-tailwind/node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js
<--- Last few GCs --->

[122815:0x3d88fc0]   124493 ms: Scavenge 2038.6 (2049.4) -> 2038.5 (2050.4) MB, 5.1 / 0.0 ms  (average mu = 0.176, current mu = 0.067) allocation failure 
[122815:0x3d88fc0]   124500 ms: Scavenge 2039.1 (2050.4) -> 2039.0 (2050.4) MB, 5.3 / 0.0 ms  (average mu = 0.176, current mu = 0.067) allocation failure 
[122815:0x3d88fc0]   124506 ms: Scavenge 2039.4 (2050.4) -> 2039.3 (2051.1) MB, 5.1 / 0.0 ms  (average mu = 0.176, current mu = 0.067) allocation failure 


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x1409d59]
    1: StubFrame [pc: 0x1472718]
Security context: 0x3e57bdb408d1 <JSObject>
    2: /* anonymous */(aka /* anonymous */) [0x36eaf0b501b1] [/projects/Zenky/Github/zenky-web-ui-tailwind/node_modules/tailwindcss/lib/lib/substituteClassApplyAtRules.js:121] [bytecode=0x3f058753b5a1 offset=11](this=0x3db550c804b1 <undefined>,0x03b5993f9e19 <String[#4]: p-10>,0)
    3: forEach [0x3e57bdb56769](this=0x07953314a1b9...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0xa18150 node::Abort() [node]
 2: 0xa1855c node::OnFatalError(char const*, char const*) [node]
 3: 0xb965be v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
 4: 0xb96939 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
 5: 0xd53bb5  [node]
 6: 0xd54246 v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [node]
 7: 0xd60b05 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [node]
 8: 0xd619b5 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
 9: 0xd6446c v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node]
10: 0xd2ae8b v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [node]
11: 0x106d45e v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [node]
12: 0x1409d59  [node]
Aborted (core dumped)

I tried to disable some components & webpack at least was able to finish compilation process without crashing.

The app is relatively large (112 Vue SFCs) but even if number of components can cause such crashes, I have no idea why it was working with previous versions of tailwindcs.

I suspect that this might be related to that compatibility build because with PostCSS 8 there're no OOM errors & it doesn't slow down at ~66%. Also it seems that previous version (1.4.6) was also running on PostCSS 7 and compliation process didn't have such issues.

Repoduction repo

I wasn't able to reproduce this bug in small codebases. Also this is a private project, so I can't share sources with everyone but if someone wants to look into it and/or knows how to debug memory allocation crashes, I can add collaborator to private repository here on Github.

[AlexVipond]

@tzurbaev When I had a similar error, the root cause was an endless loop when postcss tried to apply a class recursively.

The simplified version of my original code:

.italic {
  @apply italic;
}

My workaround was to simply use CSS instead of @apply:

.italic {
  font-style: italic;
}

In my case, I was designing a code syntax theme, and the .italic class was used by a third-party syntax highlighting library (refractor + rehype, processing markdown files to highlight syntax), which is why I didn't catch it right away. Definitely worth checking your code to see if something similar might be happening.

[deadcoder0904]

Can confirm, this happened to me a lot of times (8-10 times at least). Not sure if it was a Tailwind issue or Next.js or MDX but it happened a lot while PostCSS was loading to compile for 15-20 seconds which is another problem since v2.

[acoyfellow]

Sounds related to #2820

[tzurbaev]

@AlexVipond thanks for your tip! I checked all occurrences of @apply in my code but I wasn't able to find anything suspicious. I guess that #2820 mentioned by @acoyfellow might be the culprit of my crashes.

Unfortunately as a backend developer I have no experience with underlying webpack components, so I guess I'll have to wait while more smart people than me will figure it out 😃

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

I am pretty sure this is related to #2820.
To keep track of our issues a bit better, I am going to close this one.
We will hopefully find a solution or work around in the near future!

[justingolden21]

This is happening to me frequently, my package.json has dev set to "dev": "postcss src/styles.css -o dist/css/styles.css --watch" and npm run dev will run fine for 10-100 min or so and then it will crash and give similar output to above. I've checked and I've got no recursive styles.

[RobinMalfait]

@justingolden21 can you create a reproduction repo and open up a new issue?

[kiily]

I can also confirm I still have the issue on tailwind 2.0.2. Will try to reproduce the problem in a simpler way, but simply building tailwind shoots my memory up for 1GB. Are there any bad practices in the usage of the library that could be causing this?

[AlexSchaeferBs]

I still have those issues running the dev server on a RPi 4B with 8 GB RAM up to a extend where i can barely develop at all.

• tailwind 2.2.5
• craco 6.2.0
• headless ui react 1.3.0

I fixed the problem and increased performance massively by enabling jit mode as described here

[PlusA2M]

Tried with 16G config with no luck, debug for hours, finally get things right.
Same out of memory things encountered in "@nuxtjs/tailwindcss": "^4.2.1",, after hours of debug, I found that this line is causing everything went wrong:
.pointer-events-none .mega-dropdown-item:hover .mega-dropdown-menu, .pointer-events-none .mega-dropdown-item:focus .mega-dropdown-menu { @apply pointer-events-none opacity-0; }

Don't know why, but just replacing the @apply with the actual css and viola! Everything went good now.

[basickarl]

We are also getting heap issues. Sounds like this is a memory leak issue.

[closebracket]

We are also getting heap issues. Sounds like this is a memory leak issue.

Can confirm I also got this issue when working on a new 11ty project using Tailwind + PostCSS. All the project does is pass a page collection from input to output with Tailwind styles applied, nothing extensive so I was really confused by the error. Weird that it hasn't been fixed since 2020.

Edit: Decided to remove tailwind competely and just write my own scss for this project.

[abiiranathan]

<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 0x5b9b21019ce5 node::Abort() [node]
2: 0x5b9b20e901a4 node::OOMErrorHandler(char const*, bool) [node]
3: 0x5b9b2121dd54 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
4: 0x5b9b2121e14b v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
5: 0x5b9b213e8b1a [node]
6: 0x5b9b213eeb9a [node]
7: 0x5b9b21400058 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::internal::GarbageCollectionReason, char const*, v8::GCCallbackFlags) [node]
8: 0x5b9b214009b9 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
9: 0x5b9b213db5b7 v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node]
10: 0x5b9b213dc5e9 v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node]
11: 0x5b9b213c0836 v8::internal::Factory::NewFillerObject(int, v8::internal::AllocationAlignment, v8::internal::AllocationType, v8::internal::AllocationOrigin) [node]
12: 0x5b9b21759ba7 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [node]

Same problem here!!