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

Posted 2023-02-22

【中文标题】SyntaxError Unexpected token \'export\' (nuxt vue-echarts)

【英文标题】：SyntaxError Unexpected token 'export' (nuxt vue-echarts)SyntaxError Unexpected token 'export' (nuxt vue-echarts)

【发布时间】：2021-07-04 20:44:58

【问题描述】：

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

我无法解决错误“SyntaxError Unexpected token 'export'。我正在使用 vue-echarts 6.0.0-beta.5 echarts 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>

【问题讨论】：

我在 GitHub 上解决了这个问题。 github.com/ecomfe/vue-echarts/issues/536 使用工作示例 codesandbox.io/s/thirsty-shirley-c6tfx?file=/nuxt.config.js 更新了 codeply。

【参考方案1】：

这对我有帮助：

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

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

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