Vue2 run serve syntax error ... Unexpected token-CodePudding

I created a small test app using vue-diagram-editor from https://github.com/max-kut/vue-diagram-editor.

That worked no problem so wanted to install it into my main vue app, which was running fine beforehand.

$ npm install --save vue-diagram-editor ... ok installed.

$ npm run serve


 INFO  Starting development server...
98% after emitting CopyPlugin

 ERROR  Failed to compile with 2 errors                                                                     08:10:04

 error  in ./src/views/InstructorReadings.vue?vue&type=script&lang=js&

Syntax Error: Unexpected token (95:34)

  93 |       for (var i2 = 0; i2 < AllRTEvents[i].length; i2  ) {
  94 |         var obj = {
> 95 |         CreatedAt: AllRTEvents[i].[i2].createdAt,
     |                                   ^
  96 |         Comments: AllRTEvents[i].[i2].eventComments,
  97 |         PageNumber: AllRTEvents[i].[i2].eventPage.page_number,
  98 |         PageTitle: AllRTEvents[i].[i2].eventPage.page_title,


 @ ./src/views/InstructorReadings.vue?vue&type=script&lang=js& 1:0-287 1:303-306 1:308-592 1:308-592
 @ ./src/views/InstructorReadings.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.120:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./src/views/Reading.vue?vue&type=script&lang=js&

Syntax Error: Unexpected token (84:34)

  82 |       for (var i2 = 0; i2 < AllRTEvents[i].length; i2  ) {
  83 |         var obj = {
> 84 |         CreatedAt: AllRTEvents[i].[i2].createdAt,
     |                                   ^
  85 |         Comments: AllRTEvents[i].[i2].eventComments,
  86 |         PageNumber: AllRTEvents[i].[i2].eventPage.page_number,
  87 |         PageTitle: AllRTEvents[i].[i2].eventPage.page_title,


 @ ./src/views/Reading.vue?vue&type=script&lang=js& 1:0-276 1:292-295 1:297-570 1:297-570
 @ ./src/views/Reading.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.120:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

package.json

{
  "name": "blah",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@aws-amplify/ui-vue": "^1.0.13",
    "@tinymce/tinymce-vue": "^3.2.8",
    "aws-amplify": "^3.4.3",
    "core-js": "^3.6.5",
    "moment": "^2.29.1",
    "nanoid": "^3.1.23",
    "vue": "^2.6.11",
    "vue-diagram-editor": "^1.2.1",
    "vue-router": "^3.2.0",
    "vuetify": "^2.4.0",
    "vuex": "^3.4.0",
    "vuex-persistedstate": "^3.2.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "~1.32.0",
    "sass-loader": "^10.0.0",
    "vue-cli-plugin-vuetify": "~2.4.1",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.7.0"
  }
}

Tried npm update and npm update -g

After looking around I found it may be worth modifying vue.config.js but no didnt fix.

vue.config.js

module.exports = {
  transpileDependencies: ["vuetify", "vue-diagram-editor"],
};

Any ideas wha has happened and how to resolve? Thanks

CodePudding user response：

As mentioned in the comment the problem is that the access should not be done by path / dot syntax.

Changing

AllRTEvents[i].[i2].createdAt

AllRTEvents[i][i2].createdAt

Will fix the problem (if also done for all subsequent accesses).