SyntaxError Unexpected token 'export' (nuxt vue-echarts)

Question

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

我无法解决错误“SyntaxError Unexpected token 'export'。我正在使用 vue-echarts 6.0.0-beta.5 echarts 5.0.2 和 nuxt 2.15.4。我的 echarts v4 已经在 nuxt 中运行良好，并且我正在尝试让 echarts 5 正常工作，这样我就可以升级，因为一些功能非常好。

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

可以在此处找到该问题的工作示例。 或者，如果转到无效链接并选择链接以导航到主页，图表将出现，直到页面刷新。

我可以在错误状态中找到的所有内容，以确保我的 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/]
  },