unexpected usage when publish to npm

[jingyuLin1999]

unexpected usage I solve it by #32. However when I publish my project to npm, I get same problem.
This is part of the code for my project

// webpack.config.js
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 plugins: [
    new MonacoWebpackPlugin({
      languages: ['javascript']
    }),
  ],

// init monaco
this.monacoEditor = await monaco.editor.create(document.getElementById("monaco-codding"), {
              value: "",
              language: "javascript",
              readOnly: false,
              theme: "vs", // vs  vs-dark  hc-black
          });

using in npm
npm i hello-kkkk-layout

<template>
  <div class="echarts">
    <EchartsDesign :echarts="charts" />
  </div>
</template>

<script>
import { EchartsDesign } from "hello-kkkk-layout";
export default {
  components: { EchartsDesign },
  data() {
    return {
      charts: {
        title: "图表名称",
        bgColor: "#fff",
        list: [
          {
            id: "1",
            title: "柱形图",
            widget: "bar",
            borderType: "1",
            px: { x: 0, y: 0, width: 890, height: 337, z: 999 },
            "%": {
              x: 0,
              y: 0,
              width: 0.5614161849710982,
              height: 0.35965848452508004,
            },
            dataSource: [
              // 数据源
              {
                method: "get",
                url: "http://yapi.smart-xwork.cn/mock/99307/echarts/asyncPath",
              },
            ],
            codding: "", // 逻辑
            responseData: [], // 响应数据
            data: {
              title: {
                text: "IPQC白班良率统计",
                left: "left", // center/right
                textStyle: {
                  fontStyle: "normal",
                  color: "#f00",
                },
                subtext: "",
              },
              legend: {
                orient: "horizontal", // vertical/horizontal
                // left: 0,
                right: 10,
                top: 0,
                bottom: 0,
              },
              tooltip: {},
              dataset: {
                dimensions: ["product", "2015", "2016", "2017"],
                source: [
                  ["Matcha Latte", 43.3, 85.8, 93.7],
                  ["Milk Tea", 83.1, 73.4, 55.1],
                  ["Cheese Cocoa", 86.4, 65.2, 82.5],
                  ["Walnut Brownie", 72.4, 53.9, 39.1],
                ],
              },
              // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
              xAxis: {
                type: "category",
                axisLabel: {
                  formatter: "{value}",
                  align: "center",
                },
              },
              yAxis: {
                name: "数量",
                axisLabel: {
                  formatter: "{value} 件",
                  align: "center",
                  position: "left",
                  margin: 28,
                },
              },
              series: [
                { type: "bar", seriesLayoutBy: "column" },
                { type: "bar", seriesLayoutBy: "column" },
                { type: "line", seriesLayoutBy: "column" },
              ],
            },
          },
        ],
      },
    };
  },
};
</script>

<style>
.echarts {
  width: 100%;
  height: 1000px;
  background: #f00;
}
</style>