Skip to content

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

Open
@Stevetec-exe

Description

@Stevetec-exe
  • What happened: Plots do not get rendered and mentioned error is thrown.
  • What i would expect: Plots rendering
  • What i did:
    1. Install the plugin as per the instructions from README.md
    2. 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

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions