Livewire version
v3.6.2
Laravel version
v11.44.2
PHP version
PHP 8.3
What is the problem?
I have nested livewire components in the following way (I am not sure if this information is relevant)
BoardEditor
└── GridLayout (Here I have the @foreach loop)
└── ChartComponent
└── LineChart (or other chart types)
I read in the documentation that I need to add wire:key or :key depending on the situation to avoid having this issue
So here are the relevant sections of the different component views where I am using the nested livewire components, each component has a wrapping div with additional content, I will only show the sections where I am using the nested livewire components.
board-editor.blade.php:
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">Layout</h3>
<livewire:dashboard.analytics.boardsponents.grid-layout
:initialLayout="$layout"
wire:key="grid-layout-{{ $renderTimestamp }}"
/>
</div>
grid-layout.blade.php:
@foreach($layout as $index => $component)
<div wire:key="component-{{ $component['id'] }} - {{ $renderTimestamp }}"
class="component-wrapper bg-white dark:bg-gray-800 rounded-lg shadow {{ !$viewMode ? 'cursor-move' : '' }}"
style="
grid-column: span {{ $component['width'] ?? 1 }};
grid-row: span {{ $component['height'] ?? 1 }};
height: {{ ($component['height'] ?? 1) * 12 + (($component['height'] ?? 1) - 1) }}rem;
position: relative;
"
>
@if($component['type'] === 'chart')
<livewire:dashboard.analytics.boardsponents.chart-component
:componentId="$component['id']"
:config="$component['config']"
:viewMode="$viewMode"
:height="$component['height'] ?? 1"
:width="$component['width'] ?? 1"
wire:key="chart-{{ $component['id'] }}-{{ $renderTimestamp }}"
/>
<!-- Other non relevant content -->
@endif
</div>
@endforeach
chart-component.blade.php:
<div>
<div style="height: {{ $chartHeight }}; width: {{ $chartWidth }};">
@if($selectedChartType && isset($config['data']) && isset($config['fields']))
<div
class="h-full"
wire:poll.5s.visible="{{ isset($config['isLive']) && $config['isLive'] ? 'updateConfig' : null }}"
>
@switch($selectedChartType)
@case('line')
<livewire:dashboard.analytics.charts.line-chart
:chartId="'line-chart-' . $componentId"
:data="$config['data']"
:selectedFields="$config['fields']"
wire:key="'line-chart-{{ $componentId }}-{{ $renderTimestamp }}'"
/>
@break
<!-- Other type of chart components -->
@endswitch
</div>
@else
<div class="flex items-center justify-center h-full">
<p class="text-gray-900 dark:text-gray-100">Configure your chart to get started</p>
</div>
@endif
</div>
<x-modal.dialog>
<!-- Modal where I select the type of chart to be displayed -->
</x-modal.dialog>
</div>
line-chart.blade.php:
<div
<!-- Alpine section where I create the chart configuration -->
>
<div class="w-full h-full">
<div class="absolute inset-0 top-10 bottom-2">
<div id="{{ $chartId }}" class="w-full h-full"></div>
</div>
</div>
</div>
I have noticed that when using the livewire components if I use wire:key, then all of them are rendered and functional, if I use only :key, then the components are not rendered.
The problem is, whenever I open the modal in chart-component to select the type of chart I want to use and "save" that configuration. I will get the following error in the console:
edit:1 Uncaught (in promise) Component not found: idOfTheComponentApparentlyNotFound
But still the chart is rendered and I can interact with it, so it is like the component was not found briefly, then it was found and everything else works.
When I use the wire:poll function for the chart, then the same error appears every 5s, but again, the chart is rendered and everything works fine.
After checking, the component that is reported as not found is always the one inside chart-component so the line-chart or the chart that was selected in the modal.
How can I fix this? Why just using :key makes the components not render?
How do you expect it to work?
The project "works" somehow, I just want to get rid of the console errors
Edit
I am using Apache Echarts for the individual chart components, and an Alpine component to render the chart and trigger the re-render once the data has been updated.
Full line-chart.blade.php:
<div
x-data="{
selectedFields: @js($selectedFields),
initChart() {
const container = document.getElementById('{{ $chartId }}');
if (!container) return;
const rawData = @this.chartData;
if (!rawData) return;
const chartData = JSON.parse(JSON.stringify(rawData));
// Initialize chart
let echart = echarts.init(container);
// Prepare legend data and series
const legendData = chartData.data.datasets.map(dataset => dataset.label);
const series = chartData.data.datasets.map((dataset, index) => ({
name: dataset.label,
type: 'line',
data: dataset.data,
smooth: true,
showSymbol: false,
lineStyle: {
width: 2
},
itemStyle: {
color: dataset.borderColor || '{{ $colors[0] }}'
},
emphasis: {
focus: 'series'
}
}));
// Set chart options
const options = {
...@js($commonOptions),
animation: false,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: @js($themeColors['axisLine'])
},
label: {
backgroundColor: @js($themeColors['text'])
}
},
formatter: function(params) {
const time = params[0].axisValue;
let tooltipContent = time + '<br/>';
params.forEach(param => {
if (param.seriesName && typeof param.value !== 'undefined') {
tooltipContent += param.marker + ' ' + param.seriesName + ': ' + param.value + '<br/>';
}
});
return tooltipContent;
}
},
legend: {
show: true,
type: 'plain',
orient: 'horizontal',
top: 0,
selectedMode: true,
data: legendData,
textStyle: {
color: @js($themeColors['text'])
}
},
grid: {
left: '5%',
right: '5%',
bottom: '5%',
top: 45,
containLabel: true
},
xAxis: {
type: 'category',
data: chartData.data.labels,
name: this.selectedFields[0],
nameLocation: 'middle',
nameGap: 35,
boundaryGap: '10%',
axisLabel: {
interval: 'auto',
hideOverlap: true,
margin: 15,
color: @js($themeColors['text'])
},
axisPointer: {
show: true,
snap: false
}
},
yAxis: {
type: 'value',
scale: true,
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: @js($themeColors['splitLine'])
}
},
axisPointer: {
show: true,
snap: false
},
axisLabel: {
margin: 15,
color: @js($themeColors['text'])
},
min: function(value) {
return value.min - (value.max - value.min) * 0.05;
},
max: function(value) {
return value.max + (value.max - value.min) * 0.05;
}
},
series: series
};
echart.setOption(options);
// Handle legend select event
echart.on('legendselectchanged', (params) => {
const instance = echarts.getInstanceByDom(container);
if (instance) {
instance.setOption({
legend: { selected: params.selected }
});
}
});
},
resizeHandler() {
const container = document.getElementById('{{ $chartId }}');
const instance = echarts.getInstanceByDom(container);
if (instance) {
instance.resize();
}
}
}"
x-init="initChart()"
@chart-data-updated.window="initChart()"
@theme-changed.window="initChart()"
@resize.window="resizeHandler()"
class="w-full h-full flex flex-col items-center justify-center"
>
<div class="w-full h-full">
<div class="absolute inset-0 top-10 bottom-2">
<div id="{{ $chartId }}" class="w-full h-full"></div>
</div>
</div>
</div>