Vue2 run serve syntax error ... Unexpected token - vue.js

Question

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

Answer 1

As mentioned in the comment the problem is that the access should not be done by path / dot syntax.
Changing
AllRTEvents[i].[i2].createdAt
To
AllRTEvents[i][i2].createdAt
Will fix the problem (if also done for all subsequent accesses).