Error in v1.0.13: No DOM element with id 'plotly-<uuid>' exists on the page
- What happened: Plots do not get rendered and mentioned error is thrown.
- What i would expect: Plots rendering
- What i did:
- Install the plugin as per the instructions from README.md
- create a chart as per plotly docs
Reproduction minimal example
Code
<template>
<div class="">
<client-only>
<nuxt-plotly :data="data"
:layout="{ title: style.title || data[0].meta.title, plot_bgcolor: 'rgba(0,0,0,0)', paper_bgcolor: 'rgba(0,0,0,0)', margin: { b: 150 }, barmode: 'stack', showlegend: false }"
:config="{ staticPlot: true }"></nuxt-plotly>
</client-only>
</div>
</template>
<script setup lang="ts">
const data = [
{ "y": Array.from({ length: 40 }, () => Math.floor(Math.random() * 20)), "x": Array.from({ length: 20 }, (_, i) => "element_" + i), "type": "bar", "marker": { "color": "#fbbf24" }, "meta": { "title": "Example Graph" } }]
const style = {}
const test = ref(0)
</script>
In version v1.0.12
In verrsion v1.0.13
Following error in the Console and a blnak page:
Uncaught (in promise) Error: No DOM element with id 'plotly-0bbf9e71-3c30-4cf3-9581-24b3a875dca2' exists on the page.
(this uuid is different every time the page is reloaded) Curiously doing any kind of edit to the file while running the hot reloading dev server results n the graph being rendered on reload.
Fix
Downgrading to 1.0.12 fixes the issue, this is not a viable long term solution
Same error in 1.0.14 version :(
Same issue.
Same issue.
Same issue :(
I've tried to take a look at the commits to see if I could pinpoint the issue, but most the changes between versions seem very minor.
Especially for the jump from 1.0.12 to 1.0.13, the only thing that changed is the logo. The package-lock.json also remains unchanged, so I don't think it can be due to the underlying dependencies changing.