[SOLVED] SyntaxError: Unexpected token *
digitalit opened this issue · 15 comments
Any idea how to solve this:
[vue-router] Failed to resolve async component default: SyntaxError: Unexpected token *
[vue-router] uncaught error during route navigation:
/Users/peter/node/server-client/q-hyreshuset/admin-hyreshuset/node_modules/vue-echarts-v3/src/full.js:1
import * as ECharts from 'echarts';
^
SyntaxError: Unexpected token *
at Module._compile (internal/modules/cjs/loader.js:720:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)Have you installed echarts using npm? Actually vue-echarts-v3 wraps ECharts.js so it needs to be installed as dependency.
Command -
$ npm install --save echarts vue-echarts-v3
Try this - import ECharts from 'echarts';
Yes install done.
Ok, so now i have this in vue-echarts-v3/src/full.js:
import ECharts from 'echarts';
import Wrapper from './wrapper.js';
const IEcharts = Wrapper(ECharts);
IEcharts.__echarts__ = ECharts;
export default IEcharts;it works untill i reload page then i get:
(node:9227) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'options' of undefined
at server-bundle.js:543:28
at Array.map (<anonymous>)
at server-bundle.js:542:71
at /Users/peter/node/server-client/q-hyreshuset/admin-hyreshuset/node_modules/vue-router/dist/vue-router.common.js:2047:11
at Array.forEach (<anonymous>)
at /Users/peter/node/server-client/q-hyreshuset/admin-hyreshuset/node_modules/vue-router/dist/vue-router.common.js:2046:25
at /Users/peter/node/server-client/q-hyreshuset/admin-hyreshuset/node_modules/vue-router/dist/vue-router.common.js:2161:7
at step (/Users/peter/node/server-client/q-hyreshuset/admin-hyreshuset/node_modules/vue-router/dist/vue-router.common.js:1845:7)
at step (/Users/peter/node/server-client/q-hyreshuset/admin-hyreshuset/node_modules/vue-router/dist/vue-router.common.js:1852:9)
at step (/Users/peter/node/server-client/q-hyreshuset/admin-hyreshuset/node_modules/vue-router/dist/vue-router.common.js:1852:9)
at runQueue (/Users/peter/node/server-client/q-hyreshuset/admin-hyreshuset/node_modules/vue-router/dist/vue-router.common.js:1856:3)
at /Users/peter/node/server-client/q-hyreshuset/admin-hyreshuset/node_modules/vue-router/dist/vue-router.common.js:2156:5
at step (/Users/peter/node/server-client/q-hyreshuset/admin-hyreshuset/node_modules/vue-router/dist/vue-router.common.js:1845:7)
at /Users/peter/node/server-client/q-hyreshuset/admin-hyreshuset/node_modules/vue-router/dist/vue-router.common.js:1849:11
at /Users/peter/node/server-client/q-hyreshuset/admin-hyreshuset/node_modules/vue-router/dist/vue-router.common.js:2141:11
at /Users/peter/node/server-client/q-hyreshuset/admin-hyreshuset/node_modules/vue-router/dist/vue-router.common.js:1888:13
(node:9227) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)For IEchart component you can directly import from full.js. You don't need to wrap it manually.
import IEcharts from 'vue-echarts-v3/src/full.js';
register component.
components: {
IEcharts
},
for more detail visit
Article - https://medium.com/@pratikpatel_60309/adding-charts-in-quasar-4ffecaf33933
Used the first code from medium and exactly the same result
My code:
<template>
<q-card class="q-pa-sm" style="background:#eeeeee" >
<q-card-section class="q-pa-none q-pt-md">
<IEcharts
style="height: 250px;"
:option="getLineChartOptions"
:resizable="true"
></IEcharts>
</q-card-section>
</q-card>
</template>
<script>
import IEcharts from 'vue-echarts-v3/src/full.js'
export default {
name: 'LineChart',
components: {
IEcharts
},
computed: {
getLineChartOptions () {
return {
tooltip: {
trigger: 'axis'
},
legend: {
data: [
'Nyhetsinlägg'
],
textStyle: {
color: '#000000'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [
'Jan',
'Feb',
'Mar',
'Apr',
'Maj',
'Jun',
'Jul',
'Aug',
'Sep',
'Nov',
'Dec'
],
axisLabel: {
textStyle: {
color: '#000000'
}
}
},
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
color: '#000000'
}
}
},
series: [
{
name: 'Nyhetsinlägg',
type: 'line',
stack: 'Total',
data: [6, 2, 12, 6, 3, 8, 4, 7, 15, 1, 2, 4],
color: '#f9982d'
}
]
}
}
}
}
</script>Waiting after reload this pop up in the console:
import ECharts from 'echarts';
^^^^^^^
SyntaxError: Unexpected identifier
at Module._compile (internal/modules/cjs/loader.js:720:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:643:32)
at Function.Module._load (internal/modules/cjs/loader.js:556:12)
at Module.require (internal/modules/cjs/loader.js:683:19)
at require (internal/modules/cjs/helpers.js:16:16)
at r (/Users/peter/node/server-client/q-hyreshuset/admin-hyreshuset/node_modules/vue-server-renderer/build.dev.js:9310:16)
at Object.vue-echarts-v3/src/full.js (webpack:/external "vue-echarts-v3/src/full.js":1:0)
at __webpack_require__ (webpack/bootstrap:25:0)
at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./src/components/di-functions/di-charts/LineChart.vue?vue&type=script&lang=js& (js/13.js:13:84)
at __webpack_require__ (webpack/bootstrap:25:0)
at Module../src/components/di-functions/di-charts/LineChart.vue?vue&type=script&lang=js& (src/components/di-functions/di-charts/LineChart.vue?692f:1:0)
at __webpack_require__ (webpack/bootstrap:25:0)
at Module../src/components/di-functions/di-charts/LineChart.vue (src/components/di-functions/di-charts/LineChart.vue:1:0)
at __webpack_require__ (webpack/bootstrap:25:0)
at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./src/pages/Index.vue?vue&type=script&lang=js& (src/pages/Index.vue:56:0)
(node:9227) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 9)I have tried your code and it works perfectly on my machine.If you are using IEcharts then you don't need to import the ECharts.
can you provide me any repo so I can work on that? It's late-night here so I can try it out tomorrow.
You need a Adonis backend with Postgres to run this. Quite time consuming to set up.
I think it would be best to let you into my computer with TeamViewer.
I have to run now but maybe we can try this tomorrow?
Ok let's try it tomorrow.
Got it working like this.
quasar.conf.js:
boot: [
'auth',
'i18n',
'axios',
{
server: false,
path: 'echarts'
}
],boot file:
// https://github.com/xlsdg/vue-echarts-v3
import * as ECharts from 'echarts/lib/echarts'
import Wrapper from 'vue-echarts-v3/src/wrapper.js'
const DIEcharts = Wrapper(ECharts)
DIEcharts.__echarts__ = ECharts
export default ({ Vue }) => {
// register component to use
Vue.component('di-echart', DIEcharts)
}somponent:
<template>
<q-card class="q-pa-sm" style="background:#eeeeee">
<q-card-section class="q-pa-none q-pt-md">
<q-no-ssr>
<di-echart
v-if="getLineChartOptions"
style="height: 250px;"
:option="getLineChartOptions"
:resizable="true"
></di-echart>
</q-no-ssr>
</q-card-section>
</q-card>
</template>
<script>
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
export default {
.......Please confirm if this is a solid solution?
Yes it will work. But in my quasar project I have not used any boot file for this. I have directly imported IEchart and it works.
Repo - https://github.com/pratik227/echarts-quasar
https://github.com/pratik227/echarts-quasar/blob/master/src/pages/Index.vue
Do you run Quasar as SPA or SSR?
Yes as SPA
That's why i get problem with SSR. So i must use boot file so i can prevent server load.
Ohh Ok Got it. I have never worked on SSR yet.