0

I have a project I've been working on upgrading from Vue 2.6 to 2.7, and have ironed out most of the kinks. However, there are a couple files that are written with cased props, which vue tries to generate a Vue Tip for, which looks like this: Vue Tip Image

While generating this tip, there is a section of code that should evaluate to 'undefined' in a method called getComponentName(), as shown below with chrome's devtools: Successful run

That is what is supposed to happen, however when I am running the project I am updating, that method instead evaluates to a function, which causes an error later on and eventually breaks the entire app. Unsuccessful run

Here is the contents of the function, it is pretty straightforward:

function getComponentName(options) {
    return options.name || options.__name || options._componentTag;
}

My guess is somewhere my versioning is off, so here is my package.json file. Any help is greatly appreciated!

{
  "name": "foo",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --watch",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "watch": "vue-cli-service build --watch",
    "watchprod": "vue-cli-service build --mode production --watch"
  },
  "dependencies": {
    "axios": "~0.21.4",
    "axios-cache-adapter": "~2.7.3",
    "bootstrap": "~5.1.3",
    "bootstrap-vue": "~2.21.2",
    "core-js": "^3.27.2",
    "localforage": "~1.9.0",
    "localforage-memoryStorageDriver": "~0.9.2",
    "lodash": "~4.17.20",
    "moment": "~2.24.0",
    "postcss-prefix-selector": "~1.16.0",
    "v-calendar": "^1.0.8",
    "v-jsoneditor": "~1.4.2",
    "vue": "~2.7.14",
    "vue-class-component": "~7.2.6",
    "vue-cookies": "~1.8.2",
    "vue-mdi-icon-picker": "1.1.0",
    "vue-multiselect": "~2.1.7",
    "vue-property-decorator": "~9.1.2",
    "vue-router": "~3.5.4",
    "vue-swatches": "~2.1.1",
    "vue-toastr": "~2.1.2",
    "vue2-editor": "~2.10.3",
    "vuedraggable": "~2.24.3",
    "vuetify": "~2.3.23",
    "vuetify-datetime-picker": "~2.1.1",
    "vuex": "~3.6.2"
  },
  "devDependencies": {
    "@babel/core": "7.0.0",
    "@popperjs/core": ">=2.10.2 <3.0.0",
    "@types/node": "^18.14.5",
    "@types/webpack-env": "^1.18.0",
    "@typescript-eslint/eslint-plugin": "~5.4.0",
    "@typescript-eslint/parser": "~5.4.0",
    "@vue/cli-plugin-babel": "~5.0.8",
    "@vue/cli-plugin-eslint": "~5.0.8",
    "@vue/cli-plugin-typescript": "~5.0.8",
    "@vue/cli-service": "~5.0.8",
    "@vue/eslint-config-typescript": "~11.0.2",
    "eslint": "~8.35.0",
    "eslint-config-prettier": "~8.3.0",
    "eslint-plugin-prettier": "~4.0.0",
    "eslint-plugin-vue": "~9.9.0",
    "jquery": "1.9.1 - 3",
    "postcss": ">4 <9",
    "prettier": "~2.4.1",
    "sass": "~1.32.13",
    "sass-loader": "~13.2.0",
    "tslib": "^2.4.1",
    "typescript": "~4.5.5",
    "vue-cli-plugin-vuetify": "^2.5.8",
    "vue-template-compiler": "~2.7.14",
    "vuetify-loader": "^1.9.2",
    "webpack": "^5.75.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

1 Answer 1

0

This doesn't answer the f() vs undefined question, but how about adding || false to have either key (name, __name, _componentTag) or false?

function getComponentName(options) {
    return options.name || options.__name || options._componentTag || false;
}
1
  • I think if nobody gives me a good answer for what I did wrong I'll open an issue with the vue repo and try and get a fix similar to what you suggest here in, since it is such a breaking issue. I wanted to make sure I wasn't missing something stupid first!
    – joel
    Commented Mar 7, 2023 at 19:32

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.