Teamcity: vue_1.openblock is not a function

[SveinungTorresdal]

I upgraded to the latest vue-jest @ 5.0.0-alpha.2, and my tests were running fine locally. However, teamcity reported the following.

FAILED
TypeError: vue_1.openBlock is not a function
at Proxy.render (D:\TeamCity\BuildAgent2\work\d52f20290281b66c\src\components\[Component].vue:1944:16)
at VueComponent.Vue._render (D:\TeamCity\BuildAgent2\work\d52f20290281b66c\node_modules\vue\dist\vue.runtime.common.dev.js:3538:22)
at VueComponent.updateComponent (D:\TeamCity\BuildAgent2\work\d52f20290281b66c\node_modules\vue\dist\vue.runtime.common.dev.js:4054:21)
at Watcher.get (D:\TeamCity\BuildAgent2\work\d52f20290281b66c\node_modules\vue\dist\vue.runtime.common.dev.js:4465:25)
at new Watcher (D:\TeamCity\BuildAgent2\work\d52f20290281b66c\node_modules\vue\dist\vue.runtime.common.dev.js:4454:12)
at mountComponent (D:\TeamCity\BuildAgent2\work\d52f20290281b66c\node_modules\vue\dist\vue.runtime.common.dev.js:4061:3)
at VueComponent.Object.<anonymous>.Vue.$mount (D:\TeamCity\BuildAgent2\work\d52f20290281b66c\node_modules\vue\dist\vue.runtime.common.dev.js:8392:10)
at init (D:\TeamCity\BuildAgent2\work\d52f20290281b66c\node_modules\vue\dist\vue.runtime.common.dev.js:3112:13)
at createComponent (D:\TeamCity\BuildAgent2\work\d52f20290281b66c\node_modules\vue\dist\vue.runtime.common.dev.js:5958:9)
at createElm (D:\TeamCity\BuildAgent2\work\d52f20290281b66c\node_modules\vue\dist\vue.runtime.common.dev.js:5905:9)
at VueComponent.patch [as __patch__] (D:\TeamCity\BuildAgent2\work\d52f20290281b66c\node_modules\vue\dist\vue.runtime.common.dev.js:6455:7)
at VueComponent.Vue._update (D:\TeamCity\BuildAgent2\work\d52f20290281b66c\node_modules\vue\dist\vue.runtime.common.dev.js:3933:19)
at VueComponent.updateComponent (D:\TeamCity\BuildAgent2\work\d52f20290281b66c\node_modules\vue\dist\vue.runtime.common.dev.js:4054:10)
at Watcher.get (D:\TeamCity\BuildAgent2\work\d52f20290281b66c\node_modules\vue\dist\vue.runtime.common.dev.js:4465:25)
at new Watcher (D:\TeamCity\BuildAgent2\work\d52f20290281b66c\node_modules\vue\dist\vue.runtime.common.dev.js:4454:12)
at mountComponent (D:\TeamCity\BuildAgent2\work\d52f20290281b66c\node_modules\vue\dist\vue.runtime.common.dev.js:4061:3)
at VueComponent.Object.<anonymous>.Vue.$mount (D:\TeamCity\BuildAgent2\work\d52f20290281b66c\node_modules\vue\dist\vue.runtime.common.dev.js:8392:10)
at mount (D:\TeamCity\BuildAgent2\work\d52f20290281b66c\node_modules\@vue\test-utils\dist\vue-test-utils.js:13856:21)

I'm unfortunately not in a position to share much more from our repo and stuff, but here's our package.json with some pruning.

    "name": "--Removed--",
    "private": true,
    "version": "0.1.7",
    "description": "",
    "main": "main.js",
    "scripts": {
        "start": "webpack-dev-server --mode development --hot",
        "start:prod": "webpack-dev-server --mode production --hot",
        "dev": "webpack-dev-server --mode development --open --hot",
        "analyze:prod": "webpack --mode production --analyze",
        "build": "webpack --mode production --progress --hide-modules",
        "build:prod": "webpack --mode production --transform --progress --hide-modules",
        "test": "jest --colors",
        "test:watch": "jest --colors --watch --collectCoverage=false",
        "lint": "eslint ./**/*.{js,vue}",
        "lint:tc": "eslint --format ./node_modules/eslint-teamcity/index.js ./**/*.{js,vue}",
        "associate-commit": "cross-env-shell \"sentry-cli releases set-commits $VERSION --auto\""
    },
    "repository": {
        "type": "git",
        "url": "--Removed--"
    },
    "browsers": [
        "last 3 versions",
        "> 1%",
        "ie >= 11"
    ],
    "author": "--Removed--",
    "bugs": {
        "url": "--Removed--"
    },
    "homepage": "--Removed--",
    "dependencies": {
        "@babel/polyfill": "^7.10.4",
        "@sentry/integrations": "^5.20.1",
        "@sentry/browser": "^5.20.1",
        "axios": "^0.19.2",
        "dayjs": "^1.8.33",
        "i18n-iso-countries": "^6.0.0",
        --Removed--,
        --Removed--,
        "validator": "^13.1.1",
        "vue": "^2.6.11",
        "vue-analytics": "^5.22.1",
        "vue-content-loading": "^1.6.0",
        "vue-currency-filter": "^5.1.1",
        "vue-i18n": "^8.20.0",
        "vue-router": "^3.4.3",
        "vuex": "^3.5.1",
        "vuex-persistedstate": "^3.1.0"
    },
    "devDependencies": {
        "@babel/core": "^7.11.1",
        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
        "@babel/preset-env": "^7.11.0",
        "@sentry/cli": "^1.55.1",
        "@sentry/webpack-plugin": "^1.12.0",
        "@vue/compiler-sfc": "^3.0.0-rc.9",
        "@vue/test-utils": "^1.0.5",
        "app-manifest-webpack-plugin": "^1.2.0",
        "autoprefixer": "^9.8.6",
        "axios-mock-adapter": "^1.18.2",
        "babel-core": "^7.0.0-bridge.0",
        "babel-eslint": "^10.1.0",
        "babel-jest": "^26.3.0",
        "babel-loader": "^8.1.0",
        "babel-plugin-dynamic-import-node": "^2.3.3",
        "cross-env": "^7.0.2",
        "css-loader": "^4.2.1",
        "eslint": "^7.6.0",
        "eslint-plugin-babel": "^5.3.1",
        "eslint-plugin-import": "^2.22.0",
        "eslint-plugin-jest": "^23.20.0",
        "eslint-plugin-node": "^11.1.0",
        "eslint-plugin-security": "^1.4.0",
        "eslint-plugin-vue": "^6.2.2",
        "eslint-plugin-vue-a11y": "^0.0.31",
        "eslint-teamcity": "^3.0.1",
        "file-loader": "^6.0.0",
        "filemanager-webpack-plugin": "^2.0.5",
        "flush-promises": "^1.0.2",
        "html-webpack-plugin": "^4.3.0",
        "jest": "^24.9.0",
        "jest-teamcity-reporter": "^0.9.0",
        "jest-transform-stub": "^2.0.0",
        "mini-css-extract-plugin": "^0.10.0",
        "optimize-css-assets-webpack-plugin": "^5.0.3",
        "postcss-loader": "^3.0.0",
        "preload-webpack-plugin": "^3.0.0-beta.4",
        "resource-hints-webpack-plugin": "0.0.2",
        "terser-webpack-plugin": "^4.1.0",
        "typescript": "^4.0.2",
        "vue-eslint-parser": "^7.1.0",
        "vue-jest": "^5.0.0-alpha.2",
        "vue-loader": "^15.9.3",
        "vue-style-loader": "^4.1.2",
        "vue-template-compiler": "^2.6.11",
        "webpack": "^4.44.1",
        "webpack-bundle-analyzer": "^3.8.0",
        "webpack-cli": "^3.3.12",
        "webpack-dev-server": "^3.11.0"
    }
}

[lmiller1990]

Is that package.json correct? You seem to be using "vue": "^2.6.11"?

• vue-jest 5.0 is for Vue 3
• vue-jest 4.0 is for Vue 2

Very weird it is working locally and not on CI. Caching issue?

[SveinungTorresdal]

Yes, we're still on Vue 2. The release notes indicated support for Vue 3 was added, not that Vue 2 was out entirely, but I might've misunderstood then.

[lmiller1990]

Can you link me said release notes? I might have made a mistake - I can update them if needed. This repo's release notes are confusing, because we simultaneously support Vue 2 and Vue 3 in two different branches. I think I should make a new repo for Vue 3 support, maybe.

In any case:

master is 4.x which is Vue 2 next is 5.x which is Vue 3

So if you are using Vue 2 you need 4.x.

[lmiller1990]

Any luck? I think this is a version mismatch.

[SveinungTorresdal]

We downgraded vue-jest before submitting the issue. For some reason it prompted us to install is-obj even though we hadn't required it previously, but it worked again. 🤷‍♂️

As for the release note, dependabot was reporting the following:

Bumps vue-jest from 4.0.0-beta.5 to 5.0.0-alpha.1.

Release notes Sourced from vue-jest's releases.

v5.0.0-alpha.1

Features

Support for Vue 3! Some features are not supported yet, like JSX (that is still a WIP, even for Vue 3). You can try Vue 3 + Jest using this repository.

Commits

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

I understood Vue 3 support to mean alongside the existing support for Vue 2. If I've misunderstood that's my bad. :)

[lmiller1990]

Yep they are different codebases - we can't support them side by side.

I am not sure that dependabot recommendation is ideal. That said I don't know we can do anything on our end to stop it from prompting an incompatible version.