Can't use Vue ChartJs in Nova Tool

[theianjohnson]

• Laravel Version: 8.48.1
• Nova Version: 3.22.0

Description:

Trying to use Vue ChartJs in a Nova tool .vue file and when compiling with npm run watch getting the following (snippet) error

ERROR in ./node_modules/chart.js/dist/chart.esm.js
Module parse failed: Unexpected token (6809:12)
You may need an appropriate loader to handle this file type.

Detailed steps to reproduce the issue on a fresh Nova installation:

1. Create new Nova tool
2. In the tool repo npm install vue-chartjs chart.js --save
3. In the Tool.vue file import { LineChart } from 'vue-chartjs';
4. npm run watch
5. Error

[theianjohnson]

Is this not a bug in how Nova is building its JS files if we can’t import third party libraries?

[crynobone]

Is this not a bug in how Nova is building its JS files if we can’t import third party libraries?

Not really, a quick google search indicates that you might be missing a babel preset. But from experience, it can take hours (or even days) debugging this sort of issue, which is why I move this to discussion so others (with experience with using ChartJs) might give better suggestions.

[theianjohnson]

Sure, I’m seeing the same thing and working on it. Are Nova tools not intended to support third party components? It’s not like ChartJs is unheard of.

Or is there another supported way to get charts on a tool page?