Skip to content

Chart: TypeError: can't access property "id", existingChart.canvas is null #8228

@MJDSys

Description

@MJDSys

Describe the bug

When a component containing a Chart.js chart is mounted for only a short period of time, Chart.js may throw an error like: TypeError: can't access property "id", existingChart.canvas is null. This appears to occur as Chart.js is dynamically imported, and so the component can be unmounted during the import process.

We see this specifically in our tests, as the component may be mounted for only a single tick and the import does not complete in time.

I've provided a stackblitz that reproduces the issue (though sometimes with a different error message). I also created a storybook test reproducer here: https://github.com/MJDSys/primevue-chart-reproducer . This will usually fail if you run yarn test after a couple of cycles (sometimes the tests do complete without error).

This appears to be related to #3392 , but I opened a separate bug here as it did not have a reproducer/further details and was already closed. I can move these details there if preferred.

Pull Request Link

#8227

Reason for not contributing a PR

  • Lack of time
  • Unsure how to implement the fix/feature
  • Difficulty understanding the codebase
  • Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/primevue-4-vite-issue-template-smbyzhdj

Environment

Our code base is using Vite 7/Yarn 4. The tests we see failing use Storybook 9 to test the component can be created.

Vue version

3.5.22

PrimeVue version

4.4.1

Node version

24.10.0

Browser(s)

No response

Steps to reproduce the behavior

For stackblitz:
Open the link and check the console log, there should be an error splat.

For our repo:

  1. Run yarn install
  2. Run while yarn test;do true;done.

You should see a failure after a couple runs of that loop, but there are often other errors printed to the console.

Expected behavior

No errors should occur, regardless of when the component is unmounted.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: Needs TriageIssue will be reviewed by Core Team and a relevant label will be added as soon as possible

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions