superdev-tech / nuxt-plotly

📊 Enhance your Nuxt 3 projects with interactive data visualizations using nuxt-plotly – Simplified Plotly.js integration made easy!
https://stackblitz.com/edit/nuxt-starter-1bs1ke?file=app.vue
MIT License
26 stars 4 forks source link

Error in v1.0.13: No DOM element with id 'plotly-<uuid>' exists on the page #10

Open Stevetec-exe opened 1 month ago

Stevetec-exe commented 1 month ago

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

image

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

florealcab commented 1 month ago

Same error in 1.0.14 version :(

evguu commented 1 month ago

Same issue.

Data-Bike commented 5 days ago

Same issue.