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
You’ll need to properly define the component context type. Create a shims-vue.d.ts file in your project root and add Vue component type declarations. Then, modify your component to use the correct type annotations by using Vue.extend() or class components with vue-property-decorator. For the specific $refs typing issue, you can create an interface that extends Vue with your refs definition.
To resolve the hard source caching error and Node.js compatibility, first clear your Nuxt cache by removing the .nuxt and node_modules/.cache directories. Then, update your nuxt.config.ts to disable hard source webpack plugin when using Node 18+. Additionally, ensure your TypeScript configuration in tsconfig.json includes the correct lib and types arrays for Vue 2 compatibility. Here’s the command to clear the cache:
rm -rf .nuxt
rm -rf node_modules/.cache
3
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 tin 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