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

chrrasmussen commented 9 months ago

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 commented 2 months ago

Still happening with vue-chartjs@5.3.1 and chart.js@4.4.3

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/vue@3.4.15/dist/vue.esm-browser.js",
      "chartjs": "https://cdn.jsdelivr.net/npm/chart.js@4.4.3/+esm",
      "vue-chartjs": "https://cdn.jsdelivr.net/npm/vue-chartjs@5.3.1/+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 commented 2 months ago

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

apertureless commented 3 weeks ago

So, this is resolved?

chrrasmussen commented 1 week ago

Yes. Thanks to @sunripecertified, I realized that the file dist/index.js is a valid ESM module already. I wanted to use a local copy of vue-chartjs so I copied node_modules/vue-chartjs/dist/index.js to a vendor directory. Then referencing it via an import map: "vue-chartjs": "./vendor/vue-chartjs/index.js",

Initially I tried to use rollup to create a bundle that included the dependencies but that caused all sorts of problems.

apertureless / vue-chartjs