Related
I've got a bunch of errors after the update from Vue 2.6(2.6.11) to Vue 2.7 (2.7.13):
Error in
./src/views/pages/SupportPage.vue?vue&type=style&index=0&id=43fb95c5&lang=scss&scoped=true&
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷ 1 │ #import "#/assets/styles/variables.scss";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
[path to the project]\src\views\pages\SupportPage.vue 1:9 root stylesheet
Folders structure:
tests/unit/setup.js:
import '#/components/global-components'
import sinon from 'sinon'
import localStorage from './test-helpers/local-storage'
global.sinon = sinon
global.localStorage = localStorage
window.HTMLElement.prototype.scrollIntoView = () => {}
window.matchMedia = window.matchMedia || function matchMedia () {
return {
matches: false,
addListener () {},
removeListener () {}
}
}
Pre-Processor Loader in vue.config.js:
css: {
loaderOptions: {
sass: {
prependData: '#import "#/assets/styles/variables.scss";'
}
}
}
package.json:
{
"name": "app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit --include tests/unit/setup.js --timeout 5000",
"lint": "vue-cli-service lint --no-fix",
"deploy": "vue-cli-service s3-deploy",
"lint:fix": "vue-cli-service lint --fix",
"test": "yarn test:unit",
"cy:open": "cypress open",
"cy:run": "cypress run",
"cy:test": "start-server-and-test serve http://localhost:8080 'yarn cy:run --record --headless --browser chrome'",
"recache": "node ./public/scripts/recache.js"
},
"dependencies": {
"#appsignal/javascript": "^1.0.0",
"#appsignal/vue": "^1.0.0",
"#contentful/rich-text-from-markdown": "^13.4.0",
"#contentful/rich-text-html-renderer": "^13.0.0",
"#contentful/rich-text-types": "^15.7.0",
"#popperjs/core": "^2.4.0",
"actioncable": "^5.2.2",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"apollo-link": "^1.2.14",
"apollo-link-error": "^1.1.13",
"apollo-link-http": "^1.5.17",
"apollo-utilities": "^1.3.4",
"axios": "^0.18.0",
"body-scroll-lock": "^3.1.3",
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.22.0",
"contentful": "^7.3.0",
"contentful-rich-text-vue-renderer": "^2.1.0",
"core-js": "^3.6.4",
"countries-list": "^2.4.2",
"graphql": "^15.0.0",
"graphql-ruby-client": "1.7.4",
"graphql-tag": "^2.9.2",
"gsap": "./gsap-bonus.tgz",
"jquery": "^3.3.1",
"logrocket": "^2.1.3",
"mobile-detect": "^1.4.4",
"moment": "^2.22.2",
"moment-timezone": "^0.5.33",
"node-sass": "^4.9.3",
"paymentiq-cashier-bootstrapper": "^1.3.2",
"qrcode": "^1.3.4",
"smoothscroll-polyfill": "^0.4.4",
"sourcebuster": "^1.1.0",
"style-loader": "^0.23.1",
"text-mask-addons": "^3.8.0",
"throttle-debounce": "^3.0.1",
"unfetch": "^3.1.1",
"vue": "^2.7.13",
"vue-apollo": "^3.0.0-beta.19",
"vue-clipboard2": "^0.3.0",
"vue-i18n": "^8.10.0",
"vue-lazyload": "^1.3.3",
"vue-meta": "^2.0.4",
"vue-mq": "^1.0.1",
"vue-observe-visibility": "^0.4.6",
"vue-radial-progress": "^0.3.2",
"vue-recaptcha": "^1.1.1",
"vue-router": "^3.0.1",
"vue-text-mask": "^6.1.2",
"vue-visibility-change": "^1.2.1",
"vuejs-datepicker": "^1.6.2",
"vuejs-logger": "^1.5.3",
"vuelidate": "^0.7.5",
"vuex": "^3.0.1"
},
"devDependencies": {
"#babel/plugin-syntax-optional-chaining": "^7.8.3",
"#vue/cli": "^4.5.19",
"#vue/cli-plugin-babel": "^4.5.19",
"#vue/cli-plugin-eslint": "^4.5.19",
"#vue/cli-plugin-unit-mocha": "^4.5.19",
"#vue/cli-service": "^4.5.19",
"#vue/eslint-config-airbnb": "^5.0.2",
"#vue/test-utils": "^1.0.3",
"babel-eslint": "^10.1.0",
"chai": "^4.1.2",
"compression-webpack-plugin": "^3.0.0",
"cypress": "^5.0.0",
"eslint": "7.2.0",
"eslint-config-airbnb-base": "14.2.1",
"eslint-loader": "^2.1.0",
"eslint-plugin-cypress": "^2.11.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-vue": "^9.7.0",
"html-webpack-plugin": "^4.3.0",
"moment-locales-webpack-plugin": "^1.2.0",
"preload-webpack-plugin": "^3.0.0-beta.4",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"sinon": "^6.1.4",
"sinon-chai": "^3.2.0",
"standard": "^12.0.1",
"start-server-and-test": "^1.11.3",
"vue-cli-plugin-s3-deploy": "~4.0.0-rc3",
"vue-template-compiler": "^2.7.14",
"webfonts-loader": "^7.0.0",
"webpack": "^4.0.0",
"webpack-bundle-analyzer": "^3.8.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"resolutions": {
"#babel/parser": "7.20.2"
}
}
Changes after the update (package.json):
I am trying to use bootstrap-vue b-carousel component adding dynamic images to the carousel does not update the carousel content. Here is my test:
<b-carousel v-model="active" fade :interval="1000" :id="'carousel' + items.length" indicators controls clajss="picture-viewer-carousbel">
<b-carousel-slide v-for="(item,index) in items" :id="'slideId'+index" :key="'slideId'+index" :img-src="item" img-width="100%">
</b-carousel-slide>
</b-carousel>
And here is the code part
export default {
name: 'App',
data: function () {
return {
active: 0,
items: ['https://picsum.photos/1024/480/?image=10']
}
},
mounted () {
this.items.push('https://picsum.photos/1024/480/?image=12')
}
}
I am expecting the carousel to display 2 images but it isn't it only displays one image, even though the reactivity is working correctly because the id of the carousel which takes into account the number of slides is correct (:id="'carousel' + items.length") is 'carousel2'. It would be 'carousel1' if the reactivity would not be working.
Not sure what and if I am doing something wrong but any help is welcome
Thanks
Pat
package.json
{
"name": "bootstrapvue",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/pro-light-svg-icons": "^6.0.0-beta2",
"#fortawesome/pro-regular-svg-icons": "^6.0.0-beta2",
"#fortawesome/pro-solid-svg-icons": "^6.0.0-beta2",
"#fortawesome/vue-fontawesome": "^2.0.2",
"#progress/kendo-data-query": "^1.5.5",
"#progress/kendo-drawing": "^1.14.0",
"#progress/kendo-licensing": "^1.2.0",
"#progress/kendo-theme-bootstrap": "^4.41.2",
"#progress/kendo-vue-animation": "^2.5.0",
"#progress/kendo-vue-data-tools": "^2.5.0",
"#progress/kendo-vue-dateinputs": "^2.5.0",
"#progress/kendo-vue-dropdowns": "^2.5.0",
"#progress/kendo-vue-grid": "^2.5.0",
"#progress/kendo-vue-inputs": "^2.5.0",
"#progress/kendo-vue-intl": "^2.5.0",
"axios": "^0.21.4",
"bootstrap-icons": "^1.5.0",
"core-js": "^3.18.1",
"interactjs": "^1.10.11",
"lodash": "^4.17.21",
"moment": "^2.29.4",
"normalizr": "^3.6.1",
"portal-vue": "^2.1.7",
"sortablejs": "^1.14.0",
"vue": "^2.6.14",
"vue-fontawesome": "0.0.2",
"vue-resizable": "^2.0.5",
"vue-router": "^3.5.2",
"vuedraggable": "^2.24.3",
"vuetify": "^2.5.9",
"vuex": "^3.4.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-unit-jest": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/eslint-config-standard": "^5.1.2",
"#vue/test-utils": "^1.2.2",
"babel-eslint": "^10.1.0",
"bootstrap": "4.5.3",
"bootstrap-vue": "2.21.2",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.42.1",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.14"
}
}
I have setup unit testing using installation instructions from https://v1.test-utils.vuejs.org/
Tests are running properly. But the coverage is coming incorrectly.
It's not showing coverage for all the lines. It shows coverage in the first line and doesn't show coverage anywhere else. Don't know what's the issue is here.
This is not working with Vue 2. But with Vue 3 its working.
Package:
{
"name": "vue_three_without_ts",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^3.2.13"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-plugin-unit-jest": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"#vue/test-utils": "^2.0.0-0",
"#vue/vue3-jest": "^27.0.0-alpha.1",
"babel-jest": "^27.0.6",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"jest": "^27.0.5"
}
}
Vue3
package:
{
"name": "vue_two_without_ts",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-plugin-unit-jest": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"#vue/test-utils": "^1.1.3",
"#vue/vue2-jest": "^27.0.0-alpha.2",
"babel-jest": "^27.0.6",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"jest": "^27.0.5",
"vue-template-compiler": "^2.6.14"
}
}
Vue2
I am working on project upgrade from Vue 2 to Vue 3. The code base changed according to Vue migration documents: https://v3-migration.vuejs.org/breaking-changes/introduction.html#overview. I have mismatch of above mentioned libraries. Does somebody has a running project and would share their working library versions
Current mismatch error is :
TypeError: Cannot read property 'NormalModule' of undefined
at VueLoaderPlugin.apply (C:[credentials]\app\node_modules\vue-loader-v16\dist\pluginWebpack5.js:44:47)
at webpack (C:[credentials]app\node_modules\#vue\cli-service\node_modules\webpack\lib\webpack.js:51:13)
at serve (C:[credentials]app\node_modules\#vue\cli-service\lib\commands\serve.js:163:22)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
Package.json:
"scripts": {
"serve": "vue-cli-service serve",
"build": "npm run build:dashboard",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"build-storybook": "build-storybook",
"build:dashboard": "vue-cli-service build --dest $npm_package_config_dashboard src/main.ts",
"compile-typescript": "tsc",
"start": "node app.js",
"storybook": "start-storybook -p 6006",
"watch:tsc": "npx tsc --watch"
},
"dependencies": {
"#juggle/resize-observer": "^3.2.0",
"#popperjs/core": "2.4.4",
"#sentry/browser": "^5.28.0",
"#sentry/integrations": "^5.28.0",
"#sentry/tracing": "^5.28.0",
"#stripe/stripe-js": "^1.9.0",
"#types/lodash": "^4.14.161",
"#types/lodash-es": "^4.17.3",
"#vue/cli-service-global": "^4.5.15",
"bootstrap": "^4.6.1",
"chart.js": "3.0.0-beta.6",
"core-js": "^3.6.5",
"dayjs": "^1.8.36",
"jquery": "^3.5.1",
"lodash-es": "4.17.15",
"nouislider": "14.6.2",
"odometer": "0.4.8",
"patternomaly": "^1.3.2",
"posthog-js": "^1.7.0",
"register-service-worker": "^1.7.1",
"tippy.js": "^6.2.6",
"vue": "^3.2.20",
"vue-class-component": "^8.0.0-rc.1",
"vue-property-decorator": "^10.0.0-rc.3",
"vue-router": "^4.0.0-alpha.6",
"vue-shepherd": "0.2.1",
"vuetify": "^3.0.0-alpha.12",
"vuex": "^4.0.0-alpha.1",
"vuex-persist": "^2.3.0"
},
"devDependencies": {
"#storybook/addon-actions": "^6.2.9",
"#storybook/addon-essentials": "^6.2.9",
"#storybook/addon-knobs": "^6.2.9",
"#storybook/addon-links": "^6.2.9",
"#storybook/vue": "^6.2.9",
"#types/jest": "^26.0.23",
"#types/jquery": "^3.5.5",
"#types/node": "^12.12.62",
"#types/nouislider": "^9.0.5",
"#types/wnumb": "^1.2.0",
"#typescript-eslint/eslint-plugin": "^3.10.1",
"#typescript-eslint/parser": "^3.10.1",
"#vue/cli": "^4.5.13",
"#vue/cli-plugin-babel": "^4.5.12",
"#vue/cli-plugin-eslint": "^4.5.12",
"#vue/cli-plugin-pwa": "^4.5.12",
"#vue/cli-plugin-router": "^4.5.12",
"#vue/cli-plugin-typescript": "^4.5.12",
"#vue/cli-plugin-unit-jest": "^4.5.12",
"#vue/cli-plugin-vuex": "^4.5.15",
"#vue/cli-service": "^4.5.13",
"#vue/compiler-sfc": "^3.2.27",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/eslint-config-typescript": "^5.1.0",
"#vue/test-utils": "^2.0.0-alpha.1",
"css-loader": "^4.3.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-vue": "^7.0.0-alpha.0",
"eslint-watch": "^7.0.0",
"faker": "^5.1.0",
"fibers": "^5.0.0",
"husky": "^4.3.0",
"jest": "^26.4.2",
"lint-staged": "^10.4.0",
"node-sass": "^5.0.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.1.2",
"prettier-eslint": "^11.0.0",
"react-is": "^16.13.1",
"sass": "^1.48.0",
"sass-loader": "^10.2.0",
"style-loader": "^1.2.1",
"stylelint": "^13.13.1",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-standard": "^20.0.0",
"stylelint-scss": "^3.18.0",
"ts-jest": "^26.3.0",
"typescript": "^4.4.4",
"vue-cli-plugin-sass-resources-loader": "^1.0.0",
"vue-cli-plugin-vue-next": "~0.1.4",
"vue-cli-plugin-webpack-bundle-analyzer": "^2.0.0",
"vue-eslint-parser": "^7.1.0",
"vue-loader": "^15.9.1",
"vue-style-loader": "^4.1.3",
"watch": "^1.0.2",
"wnumb": "^1.2.0",
"babel-eslint": "^10.1.0"
},
"config": {
"dashboardprod": "../../wwwroot/dashboard",
"dashboard": "./dist"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,jsx,vue,ts,tsx}": [
"vue-cli-service lint",
"git add"
],
"*.{scss,vue}": "stylelint"
}
}
Any and all advises are appreciated
My colleague solved it by moving to Vite. My suggestion would be to drop webpack and use Vite instead.
Migration guide for Vue 2 to 3 here: https://v3-migration.vuejs.org/
Vuetify migration guide: https://next.vuetifyjs.com/en/getting-started/upgrade-guide
ERROR: Jest: a transform must export a process function. STACK: TypeError: Jest: a transform must export a process function In VUE Project
I am trying to run Unit-test my test is passing but it's failing while collecting coverages. I have added jest-config file and all unit-test related packages. Please help, Did i missed any package here??
Package.json
{
"name": "#ava-t2/questionnaire-ui",
"version": "1.0.0",
"private": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:ci": "npm run test:unit --reporters=default --reporters=jest-junit",
"test:e2e": "vue-cli-service test:e2e",
"build:lib": "vue-cli-service build --target lib --name questionnaire-ui src/plugin.ts --mode production",
"pretty-quick": "pretty-quick",
"serve:standalone": "vue-cli-service serve --mode standalone"
},
"main": "dist/questionnaire-ui.umd.js",
"browser": "dist/questionnaire-ui.common.js",
"unpkg": "dist/questionnaire-ui.umd.min.js",
"dependencies": {
"#ava-ui/tailwind-plugin": "^1.1.3",
"#azure/abort-controller": "^1.0.1",
"#azure/storage-blob": "^12.2.0-preview.1",
"#babel/core": "^7.12.10",
"#popperjs/core": "^2.5.4",
"#types/jest": "^24.9.1",
"#types/jspdf": "^1.3.3",
"#vue/cli-plugin-unit-jest": "^4.5.13",
"apisauce": "^2.0.1",
"autoprefixer": "^9.8.6",
"axios": "^0.21.1",
"axios-retry": "^3.1.9",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^27.0.6",
"bootstrap": "^4.4.1",
"bootstrap-vue": "^2.5.0",
"core-js": "^3.6.4",
"file-saver": "^2.0.5",
"html2pdf.js": "^0.9.2",
"jest-junit": "^12.2.0",
"jspdf": "^2.3.1",
"lodash": "^4.17.21",
"marked": "^2.0.1",
"node-sass": "^5.0.0",
"postcss": "^7.0.35",
"postcss-prefix-selector": "^1.7.2",
"postcss-preset-env": "^6.7.0",
"sass-loader": "^10.1.0",
"single-spa-vue": "^2.1.0",
"ts-jest": "^26.5.0",
"v-click-outside": "^3.1.2",
"vee-validate": "^3.4.5",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-html-secure": "^1.0.9",
"vue-loader": "^15.9.6",
"vue-property-decorator": "^8.4.1",
"vue-svg-loader": "^0.16.0",
"vuex": "^3.1.3",
"vuex-class": "^0.3.2"
},
"devDependencies": {
"#types/lodash": "^4.14.168",
"#types/marked": "^1.2.1",
"#vue/cli-plugin-babel": "^4.5.0",
"#vue/cli-plugin-router": "~4.3.0",
"#vue/cli-plugin-typescript": "^4.5.0",
"#vue/cli-plugin-vuex": "~4.3.0",
"#vue/cli-service": "^4.5.0",
"#vue/test-utils": "^1.0.3",
"husky": "^4.2.5",
"postcss-prefix-selector": "^1.7.2",
"postcss-preset-env": "^6.7.0",
"prettier": "^1.19.1",
"pretty-quick": "^2.0.1",
"single-spa": "^5.8.2",
"svg-url-loader": "^6.0.0",
"systemjs-webpack-interop": "^2.3.3",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.0.2",
"tslint": "^6.1.2",
"typescript": "^3.9.3",
"vue": "^2.6.12",
"vue-cli-plugin-single-spa": "^2.1.0",
"vue-router": "^3.4.9",
"vue-template-compiler": "^2.6.12"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
],
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged tslint . --fix"
}
},
"jest-junit": {
"suiteNameTemplate": "{filepath}",
"outputDirectory": ".",
"outputName": "junit.xml"
}
}
Jest-config file
module.exports = {
preset: "#vue/cli-plugin-unit-jest/presets/typescript-and-babel",
moduleFileExtensions: ["js", "ts", "json", "vue"],
modulePaths: ["./src"],
transform: {
".*\\.(vue)$": "vue-jest",
"^.+\\.tsx?$": "#vue/cli-plugin-unit-jest/node_modules/ts-jest",
"^.+\\.svg$": "<rootDir>/src/svgTransform.js",
"^.+\\.js$": "<rootDir>/node_modules/babel-jest"
},
collectCoverage: true,
collectCoverageFrom: [
"**/*.{ts,vue}",
"**/*.{js,jsx}",
"!**/node_modules/**",
"!**/coverage/**",
"!**/index.js"
],
coverageReporters: ["text", "cobertura"],
reporters: ["default", "jest-junit"]
};
According to this discussion, you need jest and ts-jest to be the same versions.