Maximum Call Stack Size Error on Nuxt with CDN Load.

[Ario Widiatmoko]

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]

@ariomoklo I was able to reproduce the issue. The root cause still not found.

[stockiNail]

After a quick analysis (I need to go more in deep), I have seen that:

1. the application is working as "normal" web page therefore it sounds something related to NUXT, even if I don't see where yet.
2. the loop is occurring when the fallback of the proxy is invoked for animation.

[stockiNail]

@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>