Tailwind heap out of memory

[shnmrc]

Hello! Having issues with using npx mix.
Using 2 identical servers. On one server compilation without issues in seconds, on second for some reasons not.

Tailwind v3.3.3
Laravel mix latest
npx v9.8.1

Node: v18.17.1
OS: Ubuntu

Error:

 import loader ./node_modules/postcss-loader/dist/cjs.js


<--- Last few GCs --->

[536678:0x711e380]   109143 ms: Mark-sweep 8067.1 (8232.7) -> 8056.6 (8237.7) MB, 2117.2 / 0.0 ms  (average mu = 0.638, current mu = 0.009) allocation failure; scavenge might not succeed
[536678:0x711e380]   112867 ms: Mark-sweep 8072.4 (8237.7) -> 8062.5 (8243.7) MB, 3704.2 / 0.0 ms  (average mu = 0.377, current mu = 0.005) allocation failure; scavenge might not succeed

<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0xb83f50 node::Abort() [webpack]
 2: 0xa94834  [webpack]
 3: 0xd647c0 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [webpack]
 4: 0xd64b67 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [webpack]
 5: 0xf42265  [webpack]
 6: 0xf43168 v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [webpack]
 7: 0xf53673  [webpack]
 8: 0xf544e8 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [webpack]
 9: 0xf2ee4e v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [webpack]
10: 0xf30217 v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [webpack]
11: 0xf113ea v8::internal::Factory::NewFillerObject(int, v8::internal::AllocationAlignment, v8::internal::AllocationType, v8::internal::AllocationOrigin) [webpack]
12: 0x12d674f v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [webpack]
13: 0x17035b9  [webpack]
Aborted

Config files:

**// webpack.mix.js**

let mix = require('laravel-mix');

mix.js('src/app.js', 'assets/js').postCss('src/app.css','public/css',[
      require("tailwindcss"),
]);

Tailwind config

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/views/*.php",
    "./app/views/**/*.php",
    "./app/views/**/**/*.php",
    "./app/views/**/**/**/*.php",
    "./inc/plugins/**/**/**/*.php",
    "./inc/plugins/**/**/*.php",
    "./inc/themes/**/**/*.php",
    "./inc/plugins/**/**/**/*.js",
    "./assets/js/*.js",
    "./node_modules/flowbite/**/*.js"
  ],
  theme: {
    extend: {
      fontFamily: {
        'poppins': ['"Poppins"', 'sans-serif'],
        'mulish': ['"Mulish"', 'sans-serif'],
        'jakarta': ['"Plus Jakarta Sans"', 'sans-serif']
      },
      lineHeight: {
        'targets': '2.938',
      },
      colors: {
        primary: {"50":"#eff6ff","100":"#dbeafe","200":"#bfdbfe","300":"#93c5fd","400":"#60a5fa","500":"#3b82f6","600":"#2563eb","700":"#1d4ed8","800":"#1e40af","900":"#1e3a8a"}
      }
    },
  },
  plugins: [
    require('flowbite/plugin'),
    require('@tailwindcss/forms')
  ]
}

app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@import url(https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap);

.active-tab {
      margin-right: 0.5rem;
      cursor: pointer;
      border-radius: 0.25rem;
      border-width: 1px;
      --tw-bg-opacity: 1;
      background-color: rgb(31 41 55 / var(--tw-bg-opacity))!important;
      padding-left: 0.625rem;
      padding-right: 0.625rem;
      padding-top: 0.125rem;
      padding-bottom: 0.125rem;
      font-size: 0.75rem;
      line-height: 1rem;
      font-weight: 500;
      --tw-text-opacity: 1;
      color: rgb(255 255 255 / var(--tw-text-opacity))!important;
      --tw-border-opacity: 1;
      border-color: rgb(107 114 128 / var(--tw-border-opacity))!important;
}
.banner-tele {
      position: fixed;
      left: 0px;
      right: 0px;
      bottom: 0px;
      display: flex;
      justify-content: center;
      padding-bottom: 1.25rem;
      padding-left: 2rem;
      padding-right: 2rem;
}
.pricing-cosmic-text {
      color: #788afe;
      background-color: #000000;
      background-image: radial-gradient(45% 85% at 65% 65%, rgb(13 58 216 / 81%) 0%, rgba(0, 0, 0, 0) 100%), radial-gradient(35% 70% at 35% 50%, #9d0391e0 0%, rgba(0, 0, 0, 0) 79.09%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
}

@layer components {
      .button-admin-settings {
            @apply text-[#526484] border border-gray-200 cursor-pointer font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 hover:bg-[#21a80e] hover:border-[#21a80e] hover:text-white
      }
      .button-AI-options {
            @apply hover:bg-[#21a80e] hover:border-[#21a80e] text-[#526484] border border-gray-200 cursor-pointer font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 hover:text-white
      }
}
.labels-cs {
      @apply bg-blue-100 text-gray-600 text-xs font-medium mr-2 px-2.5 py-[0.2rem] rounded
}

.jconfirm.jconfirm-supervan .jconfirm-bg {
      @apply bg-gray-500 bg-opacity-75 transition-opacity
}
  
  .jconfirm.jconfirm-supervan .jconfirm-box {
      background-color: transparent
  }
  
  .jconfirm.jconfirm-supervan .jconfirm-box.jconfirm-type-blue {
      border: 0
  }
  
  .jconfirm.jconfirm-supervan .jconfirm-box.jconfirm-type-green {
      border: 0
  }
  
  .jconfirm.jconfirm-supervan .jconfirm-box.jconfirm-type-red {
      border: 0
  }
  
  .jconfirm.jconfirm-supervan .jconfirm-box.jconfirm-type-orange {
      border: 0
  }
  
  .jconfirm.jconfirm-supervan .jconfirm-box.jconfirm-type-purple {
      border: 0
  }
  
  .jconfirm.jconfirm-supervan .jconfirm-box.jconfirm-type-dark {
      border: 0
  }
  
  .jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-closeIcon {
      color: white
  }
  
  .jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-title-c {
      @apply flex items-center justify-center text-lg font-medium leading-6 text-gray-900
  }
  
  .jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-title-c>* {
      @apply mb-2
  }
  
  .jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c {
      margin-right: 8px;
      margin-left: 0
  }
  
  .jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-content-pane {
      @apply flex items-center justify-center
  }
  
  .jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-content {
      @apply text-sm text-gray-500
  }
  
  .jconfirm.jconfirm-supervan .jconfirm-box .jconfirm-buttons {
      text-align: center
  }
  
  .jconfirm.jconfirm-supervan .jconfirm-box .jconfirm-buttons button {

  }
  
  .jconfirm.jconfirm-supervan.jconfirm-rtl .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c {
      margin-left: 8px;
      margin-right: 0
  }
  .selectize-control {
      position: relative;
      padding-bottom: 10px;
      padding-top: 10px;
  }
  .imgIG {
    position: relative!important;
    width: 125px!important;
    height: 125px!important;
    margin-right: 10px!important;
    border-radius: 50%!important;
  }
  .imgIG img {
    position: absolute!important;
    left: 50%!important;
    top: 50%!important;
    transform: translate(-50%, -50%)!important;
    transition: all .5s ease-in-out!important;
    width: 85px!important;
    border-radius: 50%!important;
  }
  .svgI {
    fill: none;
    stroke: #8a3ab9;
    stroke-linecap: round;
    stroke-width: 3;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: stroke-draw 6s ease-out infinite alternate;
  }
  @keyframes stroke-draw {
    from {
      stroke: #6576ff;
      stroke-dasharray: 1; }
    to {
      stroke: #ff6435;
      transform: rotate(180deg);
      stroke-dasharray: 8; } }

[thecrypticace]

Hey!

Are you sure the servers are identical? This leads me to believe that either the node versions are different or the servers have different amounts of RAM. Without a clonable reproduction I might not be able to help too much here.

My guess though is that safe lists are involved. Generally when the process runs out of heap memory and it's looks to be because of Tailwind generally it's due to a safelist configuration including an extremely large number of classes. In this case, Tailwind itself usually does an okay job of generating the CSS but tools like webpack, cssnano, etc… (and even your browser sometimes) has a hard time handling such a large amount of CSS.

I poked around flow bite a bit and it's using safelist when using charts but I'm not sure if that's the source of the problem here.

Any chance you could provide a reproduction? If so please link it and @-mention me and I'll take a closer look.

[willdean]

No idea if it's helpful or related, but I see regular OOM crashes running TW with NPX under Windows. I tracked down a leak in TW a while ago (#9205) but I guess there is still something else.

`
<--- Last few GCs --->

[10708:0000012D3810C250] 6906075 ms: Mark-sweep 4037.4 (4137.0) -> 4025.2 (4140.8) MB, 1942.6 / 0.0 ms (average mu = 0.313, current mu = 0.025) allocation failure; scavenge might not succeed
[10708:0000012D3810C250] 6909973 ms: Mark-sweep 4041.0 (4140.8) -> 4029.0 (4144.8) MB, 3861.2 / 0.0 ms (average mu = 0.131, current mu = 0.010) allocation failure; scavenge might not succeed

<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
1: 00007FF73A1E2BCF node_api_throw_syntax_error+175519
2: 00007FF73A1683A6 SSL_get_quiet_shutdown+64006
3: 00007FF73A169762 SSL_get_quiet_shutdown+69058
4: 00007FF73AC0FDD4 v8::Isolate::ReportExternalAllocationLimitReached+116
5: 00007FF73ABFB132 v8::Isolate::Exit+674
6: 00007FF73AA7CF8C v8::internal::EmbedderStackStateScope::ExplicitScopeForTesting+124
7: 00007FF73AA7A1AB v8::internal::Heap::CollectGarbage+3963
8: 00007FF73AA903E3 v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath+2099
9: 00007FF73AA90C8D v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath+93
10: 00007FF73AAA04C3 v8::internal::Factory::NewFillerObject+851
11: 00007FF73A7916B5 v8::internal::DateCache::Weekday+1349
12: 00007FF73ACAD371 v8::internal::SetupIsolateDelegate::SetupHeap+558193
13: 00007FF6BAF9F3D6
`

Tailwind was invoked like this:

npx tailwindcss --output wwwroot/css/tailwind.css --watch -i wwwroot/css/twbase.css

and failed after something between 30 and 50 watch/rebuild cycles.

This is on a huge complicated project which I can't possibly send you for repro, so I know I'm not doing anything useful here other than putting a marker down to say that there are memory exhaustion issues in TW in some circumstance.

My 1c which you didn't ask for is that #11876 should be left open.

[xantari]

Seems there are still memory leaks. Using watch works for awhile but then ultimately crashes

npx tailwindcss -i wwwroot/css/app.css -o wwwroot/css/appbundle.css --watch

Rebuilding...
Done in 5930ms.
Rebuilding...
Done in 361ms.
Rebuilding...
Done in 491ms.
Rebuilding...
Done in 527ms.
Rebuilding...
Done in 951ms.
Rebuilding...
Done in 783ms.
Rebuilding...
Done in 855ms.
Rebuilding...
Done in 832ms.
Rebuilding...
Done in 942ms.
Rebuilding...
Done in 1039ms.
Rebuilding...
Done in 1511ms.
Rebuilding...
Done in 1235ms.
Rebuilding...
Done in 1292ms.
Rebuilding...
Done in 1978ms.
Rebuilding...
Done in 1610ms.
Rebuilding...
Done in 2052ms.
Rebuilding...
Done in 2402ms.
Rebuilding...
Done in 2059ms.

<--- Last few GCs --->

[36228:000001BDB1820080] 8234176 ms: Mark-Compact 4051.5 (4138.6) -> 4040.2 (4143.1) MB, 1462.72 / 0.00 ms (average mu = 0.805, current mu = 0.108) allocation failure; scavenge might not succeed
[36228:000001BDB1820080] 8236765 ms: Mark-Compact 4056.0 (4143.1) -> 4043.8 (4146.6) MB, 2558.07 / 0.00 ms (average mu = 0.573, current mu = 0.012) allocation failure; scavenge might not succeed

<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
----- Native stack trace -----

1: 00007FF6A7BA72EB node::SetCppgcReference+18123
2: 00007FF6A7B18F04 DSA_meth_get_flags+90724
3: 00007FF6A8590701 v8::Isolate::ReportExternalAllocationLimitReached+65
4: 00007FF6A8579E58 v8::Function::Experimental_IsNopFunction+1336
5: 00007FF6A83DB8A0 v8::Platform::SystemClockTimeMillis+659328
6: 00007FF6A83D8928 v8::Platform::SystemClockTimeMillis+647176
7: 00007FF6A83EDC3A v8::Platform::SystemClockTimeMillis+733978
8: 00007FF6A83EE4B7 v8::Platform::SystemClockTimeMillis+736151
9: 00007FF6A83FCDAF v8::Platform::SystemClockTimeMillis+795791
10: 00007FF6A80BCD05 v8::CodeEvent::GetFunctionName+116773
11: 00007FF6A864208E v8::PropertyDescriptor::writable+678094
12: 00007FF6A85B31F8 v8::PropertyDescriptor::writable+92728
13: 00007FF6288B6287