Maximum Call Stack Size Error on Nuxt with CDN Load.
ariomoklo opened this issue · 3 comments
ariomoklo commented
I am in a situation where I can't integrate using npm and only cdn script hosted on private host. I get this error with just adding cdn script in Nuxt.
Maximum call stack size exceeded
nuxt.config.js
export default {
head: {
script: [
{
src: 'https://cdn.jsdelivr.net/npm/chart.js',
},
{
src: 'https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@2.1.0/dist/chartjs-plugin-annotation.js',
},
]
},
Here is the replicated example for the issue:
https://stackblitz.com/edit/pia-scurve-test?file=components/SCurve.vue
stockiNail commented
@ariomoklo I was able to reproduce the issue. The root cause still not found.
stockiNail commented
After a quick analysis (I need to go more in deep), I have seen that:
- the application is working as "normal" web page therefore it sounds something related to NUXT, even if I don't see where yet.
- the loop is occurring when the fallback of the proxy is invoked for
animation
.
stockiNail commented
@ariomoklo I have used your sandbox testing locally the code. After some investigations, the issue disappears if you include your html code in <template>
between <client-only>
tag.
<template>
<client-only> // <-- added
<div class="chartWrapper">
<div
style="
display: flex;
justify-content: space-between;
padding-bottom: 1rem;
"
>
<p>Actual & Plan</p>
<p>Achivement</p>
</div>
<div style="position: relative; display: flex">
<canvas ref="yLeft" id="yLeftAxis" height="450" width="0"></canvas>
<div style="overflow-x: scroll">
<div class="chartContainer" :style="`width: ${50 * raw.length}px`">
<canvas
ref="chartContainer"
id="myChart"
height="450"
width="1200"
></canvas>
</div>
</div>
<canvas ref="yRight" id="yRightAxis" height="450" width="0"></canvas>
</div>
</div>
</client-only> // <-- added
</template>