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>

[heynext]

@heynext create a patch script and apply it on postinstall script: see changes to apply #201 (comment)

thx. the changes work! i write a script to do the changes

import fs from 'fs'
import path from 'path'

const patchPkg = (name, data) => {
  const pkgPath = path.resolve('node_modules', name, 'package.json')

  const pkg = JSON.parse(fs.readFileSync(pkgPath))
  const patchedPkg = {
    ...pkg,
    ...data,
  }

  fs.writeFileSync(pkgPath, JSON.stringify(patchedPkg, null, 2))
}

patchPkg('echarts', {
  type: 'module',
  exports: {
    '.': {
      require: './dist/echarts.js',
      import: './dist/echarts.esm.js',
      types: './index.d.ts',
    },
    './core': {
      require: './core.js',
      import: './core.js',
      types: './core.d.ts',
    },
    './renderers': {
      require: './renderers.js',
      import: './renderers.js',
      types: './renderers.d.ts',
    },
    './charts': {
      require: './charts.js',
      import: './charts.js',
      types: './charts.d.ts',
    },
    './components': {
      require: './components.js',
      import: './components.js',
      types: './components.d.ts',
    },
  },
})

patchPkg('zrender', {
  type: 'module',
})


patchPkg('resize-detector', {
  type: 'module',
  exports: {
    '.': {
      require: './dist/index.js',
      import: './esm/index.js',
    },
  },
})

patchPkg('vue-echarts', {
  type: 'module',
  exports: {
    '.': {
      require: './dist/index.cjs.js',
      import: './dist/index.esm.js',
      types: './dist/index.d.ts',
    },
  },
})

[userquin]

@heynext protect the patchPkg script function against multiple install, just check if the type is module and then omit the patch if already patched.