导出意外标记‘SyntaxError’(nuxt vue-echarts)

Question

更新-已修复，请参阅我的评论以获得解决方案的链接。

我无法解决错误"SyntaxError意外令牌‘导出’。我正在使用vue-echarts 6.0.0-beta.5echarts 5.0.2，和nuxt 2.15.4。我已经让echarts v4在nuxt内正常工作，我正在尝试让echarts 5工作，所以我可以升级，因为一些功能真的很好。

如果我已经在一个单独的网页上，我可以导航到这个页面，它可以工作。如果我刷新页面或者使用图表直接转到页面，我会得到这个错误。

这个问题的一个实际例子可以在here中找到。或者，如果转到invalid link并选择导航到主页的链接，图表将出现，直到页面刷新。

我能找到的关于错误状态的所有东西，以确保我的nuxt.config.js中有以下不能解决问题的代码。

build: {
    transpile: ['vue-echarts']
  }

我使用的是vue-charts示例。

<template>
    <client-only>
        <v-chart class="chart" :option="option" />
    </client-only>
</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 ECharts, { THEME_KEY } from "vue-echarts";

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

export default {
    components: { "v-chart": ECharts },
    provide: {
        [THEME_KEY]: "dark",
    },
    data() {
        return {
            option: {
                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)",
                            },
                        },
                    },
                ],
            },
        };
    },
};
</script>

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

Answer 1

这对我很有帮助：

https://codesandbox.io/s/nuxtjs-vue-echarts-9jpl7?file=/components/Tutorial.vue

特别是nuxt.config.js文件中的这一行：

  build: {
    transpile: [/echarts/, /zrender/]
  },