So this question was aseked and was deleted by bot because of my inaction to reply the comments, also I updated my new findings.
01/12/2024
So when I run yarn dev or build in nuxt 2.15, node 18.20.5 I have this error in most of .vue file
TS2304: Cannot find name 'this'.
369 | }
370 |
>371 | handleKeyDownEnter(refsItem: keyof typeof this.$refs) {
| ^^^^
372 | return () => {
373 | this.$refs[refsItem]?.handleFocus()
374 | }
And ofcouse another error for the next this.
The visual code I'm using doen't show any error when I go to code. (type version 5.7.2)
This code run fine in node 16.13.0 but i'm trying to move up to node 20.9.0 The index page loaded but it's style break. I'm stumped with this code quite a while days now and don't know what to do any lead would be a great help. Thanks, here my package.json file
"dependencies": {
"@nuxt/typescript-build": "^2.1.0",
"@nuxtjs/axios": "^5.13.6",
"@nuxtjs/style-resources": "^1.2.1",
"@nuxtjs/vuetify": "^1.12.3",
"@types/c3": "^0.7.8",
"@types/quill": "^2.0.9",
"@types/uuid": "^8.3.4",
"@types/vue-color": "^2.4.8",
"c3": "^0.7.20",
"core-js": "^3.20.2",
"dayjs": "^1.10.7",
"firebase": "^9.23.0",
"firebase-admin": "^11.10.1",
"konva": "^8.3.2",
"nuxt": "~2.17.0",
"portal-vue": "^2.1.7",
"quill-delta": "^4.2.2",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"uuid": "^8.3.2",
"vue-class-component": "^7.2.6",
"vue-color": "^2.8.1",
"vue-html-to-paper": "git+https://github.com/909173/vue-html-to-paper.git#master",
"vue-js-toggle-button": "^1.3.3",
"vue-property-decorator": "^9.1.2",
"vue2-editor": "git+https://github.com/909173/vue2-editor.git#master",
"vuedraggable": "^2.24.3",
"vuex": "^3.6.2",
"vuex-module-decorators": "1.2.0"
},
"devDependencies": {
"@babel/plugin-transform-private-property-in-object": "^7.25.9",
"@mdi/js": "^7.4.47",
"@nuxt/devtools": "^1.6.0",
"@nuxt/types": "^2.18.1",
"@nuxtjs/eslint-config-typescript": "^11.0.0",
"@nuxtjs/eslint-module": "^3.1.0",
"@nuxtjs/stylelint-module": "^4.2.2",
"@types/jest": "^27.4.0",
"@types/vue2-editor": "^2.6.1",
"@vue/test-utils": "^1.3.0",
"babel-jest": "^27.4.6",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-nuxt": "^4.0.0",
"firebase-tools": "^12.4.3",
"husky": "^8.0.1",
"install-peers": "^1.0.4",
"jest": "^27.4.7",
"lint-staged": "^13.0.3",
"npm-run-all": "^4.1.5",
"nuxt-single-html": "^0.0.1",
"prettier": "^2.7.1",
"redoc-cli": "^0.13.17",
"stylelint": "^16.10.0",
"ts-jest": "^27.1.2",
"vue-jest": "^3.0.7"
},
"lint-staged": {
"*.ts": [
"eslint --fix",
"git add"
],
"*.vue": [
"eslint --fix",
"git add"
]
}
12/12/2024
So I was move to deal with another project and couldn't track this, found new bug log after squating the project down and remove part of it to reduce the number of this.$ref bug
[3:40:18 PM] ERROR [hardsource:b05122e8] Could not freeze ./.nuxt/components/plugin.js: Cannot read properties of undefined (reading 'hash')
[3:40:18 PM] ERROR [hardsource:b05122e8] Could not freeze ./.nuxt/router.js: Cannot read properties of undefined (reading 'hash')
About why there is no a type script version in package of json, this depend on the @nuxt/typescript-build, this package have a bug if you fixating the version of typescript onto the package.json, the 2 will conflict and not run in some ocasion. Sr for the late update and thanks for the support
So I found the solution. it was to upgrade the "@nuxt/typescript-build" to ^3.0.1 . The page is still broken like the css is not working properly, but atleast it undestand the this.$ref now and can catch click/keydown event normally.
Voted up for @int since it the 1st thing you should check if something is wrong with building any thing that touch on typescript projects (.d.ts ts.config file and install of modules). I personally just manually yeet the .nuxt + .node_module folder rather than let some command check it for me though