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

Question

Update - fixed, see my comment for link to resolution.

I am unable to work around the error "SyntaxError Unexpected token 'export'. I am using vue-echarts 6.0.0-beta.5 echarts 5.0.2, and nuxt 2.15.4. I have echarts v4 working fine within nuxt already and I'm trying to get echarts 5 working so I can upgrade since some features that are really nice.

If I am on a separate webpage already where I can navigate to this it works. If I do a page refresh or go to the page direct with a chart I get this error.

A working example of the problem can be found here. Alternately if going to an invalid link and selecting the link to navigate to the home page the chart will come up until the page is refreshed.

Everything I can find on error states to make sure I have the following code in my nuxt.config.js which does not resolve the problem.

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

I am using the vue-charts example.

<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

This helped me:

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

Specially this line in nuxt.config.js file:

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