VueJs: TypeError: Object(...) is not a function, "withScopeId"

We've been pushing updates successfully to our Vue applications in recent weeks and after some very minimal changes yesterday (property name changes and removing some purely semantic characters) we are experiencing the following error:

Uncaught TypeError: Object(...) is not a function
    at Module.fae3 (XCustomerServiceOptionsLibrary.umd.js:53612)
    at n (XCustomerServiceOptionsLibrary.umd.js:30)
    at 0012 (XCustomerServiceOptionsLibrary.umd.js:94)
    at XCustomerServiceOptionsLibrary.umd.js:11
    at XCustomerServiceOptionsLibrary.umd.js:3
    at Object.e977 (XCustomerServiceOptionsLibrary.umd.js:1)
    at o (app.2df3392d.js:formatted:39)
    at CustomerServiceManagement.umd.js:3
    at Object.7091 (CustomerServiceManagement.umd.js:1)
    at o (app.2df3392d.js:formatted:39)

We debugged the code and found the error occurring on this line:

const _withId = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withScopeId"])("data-v-569a422e")

We build Vue components into libraries, push them to a Verdaccio repo, and then add them as dependencies into a larger project. The library in questions (XCustomerServiceOptionsLibrary) and the larger Vue application build fine, but produce the above error when serving.

I am starting to think there were a version change to one of our Vue dependencies that is causing issues. Here are our package.json files:

Library

"devDependencies": {
    "apollo-boost": "^0.4.4",
    "autoprefixer": "^9.6.1",
    "graphql": "^14.2.1",
    "material-design-icons-iconfont": "^5.0.1",
    "moment": "^2.24.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue": "^2.6.11",
    "vue-apollo": "^3.0.0-beta.28",
    "vuetify": "^1.5.16",
    "vuex": "^3.0.1",
    "webpack": "^4.36.1",
    "@vue/cli": "^4.1.2",
    "@vue/cli-service": "^4.1.2",
    "vue-template-compiler": "^2.6.11"
  },

App

"apollo-boost": "^0.3.1",
    "autoprefixer": "^9.6.1",
    "graphql": "^14.2.1",
    "material-design-icons-iconfont": "^5.0.1",
    "moment": "^2.24.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue": "^2.6.10",
    "vue-apollo": "^3.0.0-beta.28",
    "vuetify": "^1.5.16",
    "vuex": "^3.0.1",
    "webpack": "^4.36.1",
    "@vue/cli": "^4.1.2",
    "@vue/cli-service": "^4.1.2",
    "vue-template-compiler": "^2.6.11"

Answers (1)

AnswerDeveloper

Dec 26, 2022

It looks like the error is occurring when the withScopeId function is being called. This function is a helper function that is part of the Vue library, and it looks like it is being imported from the vue package.

One possible cause of the error could be that there is a version mismatch between the version of Vue that is being used in the library and the version that is being used in the main app. It looks like the library is using Vue 2.6.11 and the app is using Vue 2.6.10. It's possible that there could be compatibility issues between these two versions, which could be causing the error.

One solution could be to update the version of Vue that is being used in the library to match the version that is being used in the app. Alternatively, you could try updating the version of Vue in the app to match the version that is being used in the library.

It's also possible that there could be other issues causing the error, such as a problem with how the library is being imported or a conflict with other packages. It might be helpful to try debugging the code further to see if you can identify the root cause of the issue.