VueChartsCSS & Vite - Uncaught (in promise) TypeError: Cannot read properties of null (reading 'isCE')

Hello all,

I'm working on a fresh Laravel/Jetstream/Vue3/TailwindCSS install and attempting to figure out how to import a dependency for VueChartCSS which is a wrapper for Chart.css. I like the functionality of being able to use standard Chartcss for blade files and then hopefully use VueChartCSS for Vue components.

• composer create-project laravel/laravel chartcss
• cd chartcss
• composer require laravel/jetstream
• php artisan jetstream:install inertia --teams --pest
• npm install
• npm run build
• php artisan migrate
• npm run dev
• php artisan serve
• npm install charts.css
• npm install vue.charts.css

I'm following the basic setup instructions from - https://vue-charts-css.github.io/docs/get-started/usage/

/app.js

import './bootstrap';
import '../css/app.css';
import 'charts.css';

import { createApp, h } from 'vue';
import VueChartsCSS from "vue.charts.css"
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .use(VueChartsCSS)
            .mount(el);
    },
});

InertiaProgress.init({ color: '#4B5563' });

and I've dropped the basic chart example here app/resources/js/components/welcome.vue

<template>
    <charts-css
        heading="Coffee count"
        type="bar"
        :labels="['Mon', 'Tue', 'Wed',]"
        :datasets="[ { values: [4, 2, 70,] } ]"
    />
</template>

I get the following error:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'isCE') at lt (vue-charts-css.min.js:1:17459)

[Vue warn]: Unhandled error during execution of render function at <ChartsCss heading="Coffee count" type="bar" labels= (3) ['Mon', 'Tue', 'Wed'] ... >

I think what's happening is the VueChartCSS wrapper is working based on some trial and error. But the whole thing isn't rendering properly because I'm not importing the Chart CSS dependency and making it available to Vue.

I've tried various ways to import the chartcss package but all attempts have confused me more. I don't fully understand how these asset compilers work yet.

Thank you for your support.

Ben