vite-ssg: ERR_MODULE_NOT_FOUND : echarts\core only during SSG Build

I’m having an issue integrating apache’s echarts and vue-echarts specifically when building in SSG mode. Everything works under vite build and vite (dev mode) but ssg build fails. I’m pretty sure this is an issue with the echarts package format, but I don’t know how to get this to work in my SSG build. Any hints or ideas would be appreciated!!

https://github.com/ecomfe/vue-echarts https://github.com/apache/echarts

vite-ssg build

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '\node_modules\echarts\core' imported from \.vite-ssg-temp\main.mjs 
Did you mean to import echarts@5.3.0/node_modules/echarts/core.js?

If I try to add ‘.js’ to the end of all the echarts imports the error changes to :

file:///C:/Users/***/.vite-ssg-temp/main.mjs:26
import { CanvasRenderer } from "echarts/renderers.js";
         ^^^^^^^^^^^^^^
SyntaxError: Named export 'CanvasRenderer' not found. The requested module 'echarts/renderers.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'echarts/renderers.js';
const { CanvasRenderer } = pkg;

other attempts at fixing this issue

• ssgOptions: {format : ‘cjs’}
• wrapping the component in <client-only>

I have an SFC that looks like this and is being imported on a page:

<template>
  <v-chart class="chart" :option="option" />
</template>

<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, defineComponent } from "vue";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
]);

export default defineComponent({
  name: "HelloWorld",
  components: {
    VChart
  },
  provide: {
    [THEME_KEY]: "dark"
  },
  setup () {
    const option = ref({
      title: {
        text: "Traffic Sources",
        left: "center"
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        orient: "vertical",
        left: "left",
        data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
      },
      series: [
        {
          name: "Traffic Sources",
          type: "pie",
          radius: "55%",
          center: ["50%", "60%"],
          data: [
            { value: 335, name: "Direct" },
            { value: 310, name: "Email" },
            { value: 234, name: "Ad Networks" },
            { value: 135, name: "Video Ads" },
            { value: 1548, name: "Search Engines" }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    });

    return { option };
  }
});
</script>

<style scoped>
.chart {
  height: 400px;
}
</style>