[Bug]: Problem using vue-chartjs when imported as ESM module

[chrrasmussen]

Would you like to work on a fix?

• Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

I am unable to get the example described in the quickstart to work properly when importing vue-chartjs and chart.js as ESM modules (via importmap). See the reproduction link below.
The error I get is: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function.

I am able to use Chart.js directly (imported as an ESM module), but then I don't get the conveniences provided by vue-chartjs.

Reproduction

https://play.vuejs.org/#eNqNVN9P2zAQ/lesvAS0NgHKHlZ1qAMxaYj90OCN8GCSa2rm2NHZKUVV//edHadNK1Q1apPz3fm77/xdsoq+1XWyaCAaRxMLVS25hatMMTa55sjGBbf8axa5Rxaxsa6t0MqQJ1jkTCl9kvb20tLkKGrLJFcl5VpKI7+oao2WrRz6zZyTyU1r3D0MnPNRWAmtpbW0ovb2PZSgCm8SpVsJFSjrlzdUr9T4/pDzsO9eKODo15lasxnqisW5K5G8mnhLwSGxLk7dD32OT8lUoJQglMJYwJPdOv0igz6lwH9DPjA/dZiw9IULmPFGhjNQvIIxi0mA2JPPNbFThGTGbYJv2BlrH3cinJx2IQTboOpWbXSzz12Sv4AkqKf4jquG43s8YPF3eMHO/skxn8fPHnuLYcDVf1oFwKfLswG7oP/5xTNbP3e5LSN3hUHYKY1gqBMjFtSfxYa0CLtawz/oRr9J2o7KVTSIWnGGFa9JLK1oIj1kFgI0RJsiWUSiuXUWza2tzThN80LRtgKkWGCiwKaqrtIppaXYKCsqGBa6mo6Sy+T8S1qQsH1/AqYavqB+M4CEkkWhPV8nJecCcIgkJiDgsXX3tu3U3osdrN8N5xF1e9nTz8koOUs/EXIPrnsXjsDqUqeXjncA6pQjuazJtZqJck8sN8VCAv7uPhA90biU+u3O+9xY9FhB/u8D/6tZtkT/0ES5E+t1YjmWYNvw7cMvWJK9CVa6aOgTcCj4F4yWjePYpl03qiDavTzP9oefPaHKR3O7tEBDHZrq5rp9E7xQNwda39IdJaPNKa7/A89ez90=

chart.js version

v4.4.1

vue-chartjs version

v5.3.0

Possible solution

No response

[sunripecertified]

Still happening with [email protected] and [email protected]

Not everyone is using or wants to use a build chain.
Anything Vue should be able to run from the browser as a standalone .html file.
Import maps are awesome for doing this.
In fact, I would suggest that the basic examples should assume zero build chain and work from cdn.

<script type="importmap">
  {
  "imports": {
      "vue": "https://unpkg.com/[email protected]/dist/vue.esm-browser.js",
      "chartjs": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
      "vue-chartjs": "https://cdn.jsdelivr.net/npm/[email protected]/+esm"
  }
  }
</script>
<script type="module">
     import {Bar} from 'vue-chartjs'
     import { Chart as ChartJS,registerables, Title, Tooltip, Legend, BarElement, CategoryScale,LinearScale} from 'chartjs'
</script>

[sunripecertified]

Note, changing the import map to use this
"chart.js": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
"vue-chartjs": "https://cdnjs.cloudflare.com/ajax/libs/vue-chartjs/5.3.1/index.js"
DOES WORK without the warning???

[apertureless]

So, this is resolved?