Ошибка Vuejs после обновления версии echarts с версии 4.1.0 до версии 4.2.0-rc.2 - PullRequest
Новая
       11

Ошибка Vuejs после обновления версии echarts с версии 4.1.0 до версии 4.2.0-rc.2

0 голосов
/ 06 декабря 2018

Я создал проект в vuejs, используя Vue-CLI.Я обновил версию echarts с версии 4.1.0 до версии 4.2.0-rc.2.После обновления возникает следующая ошибка:

  1. В терминале отображается ошибка:

«экспорт по умолчанию» (импортированный как «echarts») не найден в'echarts / lib / echarts'

и при доступе к странице гистограммы в консоли отображается ошибка:

TypeError: Невозможно назначить только для чтения свойство 'exports' объекта '#'

Перед обновлением пакета echarts вот мой код для

vue.config.js файла 

const path = require('path');
const webpack = require('webpack');

module.exports = {
  baseUrl: process.env.NODE_ENV == 'production' ? '/' :  '/',
  transpileDependencies: [
    /\bvue-echarts\b/,
    /\bresize-detector\b/
  ],
  configureWebpack: {
    plugins: [
      //jquery plugin
      new webpack.ProvidePlugin({
        $: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        jQuery: 'jquery'
      })
    ]
  }
}

После обновления версии echarts я должен заменитьнекоторые строки кода с этими строками: 

transpileDependencies: [
  /\/node_modules\/vue-echarts\//,
  /\/node_modules\/resize-detector\//
],

При обновлении этих строк я исправил 1-ю ошибку.Но на странице echarts в консоли возникает следующая ошибка:

Ошибка в подключенном хуке: «Ошибка: компонент series.bar не существует. Сначала загрузите его».

Вотмой файл barchart: 

    <template>
      <ECharts :options="bar" style="width:100%; height:300px"></ECharts>
    </template>

    <script>
      import ECharts from "vue-echarts/components/ECharts.vue";
      import "echarts/lib/chart/bar";
      import "echarts/lib/component/title";
      import { ChartConfig } from "Constants/chart-config";

      export default {
        components: {
          ECharts
        },
        data() {
          return {
            bar: {
             tooltip: {
             trigger: "axis"
            },
            color: [ChartConfig.color.danger],
            legend: {
             data: ["Series A"]
           },
           xAxis: {
             type: "category",
             boundaryGap: true,
             data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]
           },
           yAxis: {
             type: "value",
             axisLabel: {
             formatter: "{value} K"
           }
        },
        series: [
          {
            name: "Series A",
            type: "bar",
            data: [11, 11, 15, 13, 12, 13, 10]
          }
        ]
      }
    };
  }
};
</script>

Как мне удалить эти ошибки.Для получения дополнительной информации, пожалуйста, дайте мне знать.Спасибо!

1 Ответ

0 голосов
/ 06 февраля 2019

Я наконец-то нашел решение, эта ошибка возникает из-за того, что мы не можем смешивать модули commonjs и ES.Чтобы решить эту проблему, я обновил файл babel.config.js: 

// babel.config.js

module.exports = {
  presets: [
    ["@vue/app", {
      modules: "commonjs"
    }]
  ]
};

При добавлении приведенного выше кода весь код модуля ES будет перенесен в commonjs и затем передан в веб-пакет для компиляции.

...