Error: Please remove the <template></template> tags from your chart component

Expected Behavior

No error

Actual Behavior

I have 3 different SFC chart components that are loaded on a page. The SFCs look almost 1:1 with the example in the documentation on using vue-chartjs in SFCs. There are no template tags in the SFCs just the script tags. When I load the view with the chart SFCs I get

Error: Please remove the <template></template> tags from your chart component. See https://vue-chartjs.org/guide/#vue-single-file-components

I’m using both the Bar and Pie charts. They still render but I get the error for each of the SFCs that are loaded.

Environment

• vue.js version: 2.6.12
• vue-chart.js version: 3.5.1
• chart.js version: 2.9.4
• npm version: 6.4.11

[newcat]

Same here when I use a specific setup with computed properties for chartData. The reason is that the watcher for props.chartOptions is called before the onMounted callback. The watcher handler sees that the chart has not been initialized yet and therefore calls the chartCreate function, which in turn calls the renderChart function. At this point, the ref to the canvas has not been set, as the onMounted callback has also not been called. This leads to the error.

@apertureless it would be nice if you could fix it so the chartCreate or renderChart functions just fail silently if they are called before onMounted (or the watchers check, whether the component has been mounted yet and if that is not the case, they simply don’t call their respective handlers).

[gbaron]

@newcat could you please provide more information about the “specific setup with computed properties for chartData”. Ideally a codepen/repo with reproducible code. Thanks