mirisuzanne
commented
3 months ago Ok, I'm getting this error again – and the reason seems similar. Here's the situation:
In my template, I'm using the <black-out> component:
I want to <black-out>pass in some slotted content</black-out>.black-out.webc is really just a shorthand to set up another webC web component with the proper attributes, and get some necessary styles in place:
<toggle-switch
data-for="#main"
data-set="data-erase"
><slot>(erase it)</slot></toggle-switch>
<style webc:bucket="object">
#main[data-erase] {
visibility: hidden;
}
[data-set=data-erase],
mark { visibility: visible; }
</style>toggle-switch.webc is a fully registered web component, that also has a slot:
<button
type="button"
:data-btn="this.dataBtn || 'switch'"
:aria-pressed="!!this.ariaPressed"
><slot>toggle</slot></button>
<script src="./toggle-switch.js"></script>The error only occurs when I add the <slot>…</slot> in black-out.webc. If I remove the middle-step slot, everything works great – but without any way to pass in content. If I add the slot, I get this fatal error.
😱
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory(don't worry, I survived)
Full error output
``` <--- Last few GCs ---> [52368:0x138008000] 140133 ms: Mark-sweep 4052.3 (4140.6) -> 4038.6 (4142.6) MB, 1920.6 / 0.0 ms (average mu = 0.142, current mu = 0.005) allocation failure; scavenge might not succeed [52368:0x138008000] 142738 ms: Mark-sweep 4054.4 (4142.6) -> 4040.8 (4144.9) MB, 2596.4 / 0.0 ms (average mu = 0.067, current mu = 0.003) allocation failure; scavenge might not succeed <--- JS stacktrace ---> FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory 1: 0x10075978c node::Abort() [/Users/mia/.nvm/versions/node/v18.20.2/bin/node] 2: 0x100759970 node::ModifyCodeGenerationFromStrings(v8::LocalI understand that this sort of thing is likely caused by pagination. And I am using data-pagination to generate open-graph images for every page on the site. I suppose at some point that could be a lot of pages (and I should re-consider?) – but at this point, it's in the low 20-some test pages. But I wasn't messing with pagination at the time, so the issue started somewhere else - even if pagination lead to the crash.
I am using:
It seems like the cause was an attempt at nesting two webc custom elements. Three files were involved, roughly like this:
I wanted both:
I probably tried a number of other things in there. Adding
webc:rootvarious places, to try and get the desired outcome. I don't remember the exact state when things broke.In the end, I split the base component into two files: a JS file with the registration, and a webc file with the template. Then I import the JS file in both components. I also duplicated the template content - it's not enough to worry about duplication.