Related
i work on a new project and my vscode look like this:
Unfortunately, nothing helped at the moment.
uninstall Volar (Vue 3)
add in jsconfig.json following lines:
"allowJs": false,
"checkJs": false
In this Project we use nuxt and vuetify.
"dependencies": {
"#nuxtjs/axios": "^5.13.6",
"#nuxtjs/proxy": "^2.1.0",
"core-js": "^3.15.1",
"json-server": "^0.17.0",
"nuxt": "^2.15.7",
"vue-beautiful-chat": "^2.5.0",
"vue-tree-list": "^1.5.0",
"vuelidate": "^0.7.7",
"vuetify": "^2.5.5"
},
"devDependencies": {
"#nuxt/postcss8": "^1.1.3",
"#nuxtjs/vuetify": "^1.12.1",
"autoprefixer": "^10.4.7",
"postcss": "^8.4.14",
"prettier": "2.5.1",
"tailwindcss": "^3.1.2"
}
This is the error message:
Hello I'm new to vue and jest. I added jest to already existing vue project.
And I want get test coverage result from .js and .vue file.
But. It dosen't go well.
When I try run
vue-cli-service test:unit
Return below Error
Failed to collect coverage from D:\work\project\src\components\service\sidebar\partials\menu.vue
ERROR: Falsy value found in plugins
Here is my config files
.babelrc
{
"presets": [
["env"], "stage-2"
],
"plugins": ["dynamic-import-node"],
"comments": true
}
jset.config.js
module.exports = {
preset: '#vue/cli-plugin-unit-jest/presets/no-babel',
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1'
},
collectCoverage :true,
moduleFileExtensions: [
'js',
'json',
'vue'
],
transform: {
// process `*.vue` files with `vue-jest`
".*\\.(vue)$": "vue-jest",
// process js with `babel-jest`
"^.+\\.js$": "<rootDir>/node_modules/babel-jest"
},
collectCoverageFrom: [
'**/*.{js,vue}',
'!**/plugins/**',
'!src/main.js',
'!src/router/index.js',
'!**/node_modules/**'
]
}
package.json
{
"name": "web-application",
"version": "1.0.0",
"private": true,
"description": "web-application",
"author": "John",
"scripts": {
...
"test:unit": "vue-cli-service test:unit",
},
"dependencies": {
...
"copy-webpack-plugin": "^4.6.0",
"dotenv": "^8.1.0",
"element-ui": "^2.10.0",
"eslint-plugin-vue": "^5.2.3",
"fs": "0.0.1-security",
"log4js": "^5.0.0",
"lottie-web": "^5.5.5",
"pm2": "^3.5.1",
"recordrtc": "^5.5.8",
"request": "^2.88.0",
"sweetalert2": "^8.13.0",
"vue": "^2.6.10",
"vue-croppie": "^1.3.13",
"vue-drag-select": "^0.1.5",
"vue-izitoast": "^1.2.1",
"vue-moment": "^4.0.0",
"vue-raven": "^1.0.3",
"vue-router": "^3.1.3",
"vue-tilt.js": "^1.0.2",
"vue-toasted": "^1.1.27",
"vue2-scrollbar": "0.0.3",
"vuex": "^3.1.1"
},
"devDependencies": {
"#babel/preset-env": "^7.4.5",
"#vue/cli-plugin-unit-jest": "^4.2.3",
"#vue/cli-service": "^4.2.3",
"#vue/test-utils": "^1.0.0-beta.31",
"babel-core": "^6.25.0",
"babel-eslint": "^8.2.2",
"babel-jest": "^25.2.3",
"babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-node": "^2.3.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-2": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"crypto-js": "^3.1.9-1",
"css-hot-loader": "^1.4.4",
"css-loader": "^1.0.1",
"es6-promise": "^4.2.8",
"eslint": "^4.19.1",
"eslint-config-prettier": "^6.5.0",
"eslint-config-vue": "^2.0.2",
"eslint-plugin-html": "^4.0.6",
"eslint-plugin-prettier": "^3.1.1",
"file-loader": "^1.1.11",
"file-saver": "^1.3.8",
"glob": "^7.1.4",
"html-loader": "^0.5.0",
"html-webpack-plugin": "^3.2.0",
"jest": "^24.9.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"pkg": "^4.4.0",
"postcss-loader": "^2.0.6",
"sass-loader": "^7.1.0",
"secure-web-storage": "^1.0.2",
"style-loader": "^0.18.2",
"url-loader": "^1.1.2",
"vue-awesome-swiper": "^3.1.3",
"vue-axios": "^2.1.4",
"vue-i18n": "^8.11.2",
"vue-jest": "^3.0.5",
"vue-loader": "^14.2.2",
"webpack": "^4.39.3",
"webpack-bundle-analyzer": "^3.6.0",
"webpack-cli": "^3.3.5",
"webpack-dev-server": "^3.7.2",
"webpack-merge": "^4.2.1"
},
"bin": {
"app": "./server.js"
},
"lint": "eslint --ext .js,.vue src",
"pkg": {
"assets": [
"dist/**/*"
]
}
}
Please tell me if you need more information. I'll add it.
Thank you for read this question.
This is self answer. Well it was silly problem.
There are three problem
preset: '#vue/cli-plugin-unit-jest/presets/no-babel' in jest.config.js make transform option useless
removed
Jest 24 dosen't support babel 6.
it should be
babel-jest": "^23.6.0"
transform's location was wrong
it should be like
transform: {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
}
Now i fixed three problem. and working good.
I leave this answer because I want my shameful behavior to help others.
I try to use async/await on a js script (class method) in a webpack config but i have got this error :
search.js:33 Uncaught ReferenceError: regeneratorRuntime is not defined
I have maybe an error in the babelrc file but i tried all things found on the web :/
Stack : WSL1 node 10.16.3 npm 6.11.1 in Visual Studio Code.
Previously, i had polyfill config with a similar problem.
I tried to use new Babel recommandations with #babel/plugin-transform-runtime and #babel/runtime but the issue persists.
I tried to remove /node_modules/ directory and lock package files to generate it again with npm i but nothing changes.
I have no problem with an async function declaration (outside a class).
File with generated error
class Search {
constructor() {...}
async run() {
await this.xxxx();
}
xxxx() {...}
}
.babelrc
{
"presets": [
["#babel/preset-env"],
[
"#babel/env",
{
"modules": false,
"useBuiltIns": "usage",
"corejs": 3
}
]
],
"plugins": [
[ "#babel/plugin-transform-runtime", {"regenerator": true, "corejs": 3} ],
[ "#babel/plugin-transform-async-to-generator" ]
]
}
package.json
{
...
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/plugin-transform-async-to-generator": "^7.5.0",
"#babel/plugin-transform-runtime": "^7.6.2",
"#babel/preset-env": "^7.6.3",
"autoprefixer": "^9.6.1",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^2.0.2",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"fontmin-webpack": "^2.0.4",
"imagemin-gifsicle": "^6.0.1",
"imagemin-jpegtran": "^6.0.0",
"imagemin-optipng": "^7.0.0",
"imagemin-svgo": "^7.0.0",
"imagemin-webpack": "^5.1.0",
"jquery": "^3.4.1",
"loader": "^2.1.1",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-cli": "^6.1.2",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"sass-loader": "^7.3.1",
"style": "0.0.3",
"style-loader": "^0.23.1",
"sugarss": "^2.0.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7",
"webpack-manifest-plugin": "^2.0.4"
},
"dependencies": {
"#babel/runtime": "^7.6.3",
"core-js": "^3.3.2",
"detect-it": "^3.0.5",
"gifsicle": "^4.0.1",
"slick-carousel": "^1.8.1"
},
"browserslist": [
"last 2 versions"
]
}
I found the solution.
In the main js file
import "regenerator-runtime/runtime";
Add regenerator-runtime
npm i regenerator-runtime
Thanks.
There is some problem with my babel config, not sure what it is..
Error I am seeing:
ERROR Failed to compile with 1 errors friendly-errors 21:27:50
ERROR in ./.nuxt/client.js friendly-errors 21:27:50
Module build failed (from ./node_modules/#nuxt/webpack/node_modules/babel-loader/lib/index.js): friendly-errors 21:27:50
TypeError: this.setDynamic is not a function
my .babelrc looks like this:
{
"presets": [
[
"vue-app",
{
"useBuiltIns": true
}
],
"flow"
],
"plugins": ["#babel/plugin-proposal-decorators", "#babel/plugin-proposal-class-properties"],
"env": {
"test": {
"plugins": ["babel-jest-assertions", "transform-runtime"]
}
}
}
Package-lock, installed plugins:
"#babel/core": "^7.4.5",
"#babel/preset-env": "^7.4.5",
"#nuxtjs/google-analytics": "^2.2.0",
"acorn": "^6.1.1",
"axios": "^0.18.1",
"babel-jest-assertions": "^0.1.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-preset-flow": "^6.23.0",
What needs to be changed for this config to work? Have visited various stackoverflow answers, and have not found a working fix yet.
UPDATED CONFIG AFTER COMMENTS:
"#babel/plugin-transform-runtime": "^7.4.4",
"#babel/polyfill": "^7.4.4",
"#vue/babel-preset-app": "^3.0.0-rc.2",
"autoprefixer": "^7.1.2",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^21.0.2",
"babel-loader": "^8.0.0-beta.0",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-imports": "^1.5.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
The answer to this problem is this. Be aware of your babel configuration, ie like mentioned in the comments. Babel 6 will not work correctly with Babel 7 plugins and etc. Thank you for all the provided help in the comments.
I use the latest versions of vue-cli3 webpack4 and vue-loader v15.
I want to configure vue-loader, but there is an error:
Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.
vue.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
module.exports = {
productionSourceMap: false,
baseUrl: "./",
configureWebpack: {
module: {
rules: [{
test: /\.vue$/,
loader: "vue-loader"
}]
},
plugins: [
new VueLoaderPlugin()
]
}
}
package.js
"dependencies": {
"awe-dnd": "^0.3.1",
"axios": "^0.18.0",
"iview": "^3.1.5",
"lodash": "^4.17.11",
"vue": "^2.5.17",
"vue-router": "^3.0.2"
},
"devDependencies": {
"#babel/cli": "^7.1.5",
"#babel/core": "^7.1.6",
"#babel/polyfill": "^7.0.0",
"#babel/preset-env": "^7.1.6",
"#vue/cli-plugin-babel": "^3.2.0",
"#vue/cli-plugin-eslint": "^3.2.1",
"#vue/cli-service": "^3.2.0",
"css-loader": "^1.0.1",
"eslint": "^5.9.0",
"eslint-plugin-vue": "^4.7.1",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^2.0.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"iview-loader": "^1.2.2",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"vue-cli-plugin-iview": "^1.0.6",
"vue-hot-reload-api": "^2.3.1",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.26.1",
"webpack-chain": "^5.0.1",
"webpack-dev-server": "^3.1.10",
"webpack-merge": "^4.1.4"
},
I called console.log on vue-loader/plugin.js.
rawRules (line-number 27)
There are 20+ rules.
/\.vue$/ matched the second rule.
But the second rule is url-loader?
What do I do?
I think you should put vue-loader on dependencies. Recently i updated my project: vue, vue-loader, webpack...
this is my package.json
{
"name": "pack",
"private": true,
"version": "0.0.0",
"scripts": {
"build": "webpack --env.prod --config webpack.config.js"
},
"devDependencies": {
"#babel/preset-env": "^7.0.0-rc.2",
"#types/webpack-env": "^1.13.5",
"aspnet-webpack": "^2.0.3",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"css-loader": "^0.25.0",
"event-source-polyfill": "^0.0.7",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^2.0.0",
"isomorphic-fetch": "^2.2.1",
"jquery": "^3.3.1",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^4.23.1",
"webpack-hot-middleware": "^2.24.3"
},
"dependencies": {
"axios": "^0.18.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-3": "^6.24.1",
"chart.js": "^2.7.3",
"downloadjs": "^1.4.7",
"idle-vue": "^2.0.5",
"jwt-decode": "^2.2.0",
"material-design-icons-iconfont": "^3.0.3",
"v-offline": "^1.0.10",
"vue": "^2.5.21",
"vue-analytics": "^5.12.2",
"vue-chartjs": "^3.4.0",
"vue-chartkick": "^0.5.0",
"vue-config": "^1.0.0",
"vue-embed": "^1.0.0",
"vue-google-charts": "^0.3.2",
"vue-json-excel": "^0.2.5",
"vue-loader": "^15.4.2",
"vue-moment": "^4.0.0",
"vue-popperjs": "^1.6.1",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.21",
"vuetify": "^1.3.14"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Your webpack.config it seems fine... but just in case, this is my code:
var path = require('path')
var webpack = require('webpack')
const bundleOutputDir = './wwwroot/dist';
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
mode: 'development',
context: __dirname,
entry: {
main: ['babel-polyfill', './App/index.js']
},
plugins:[
new VueLoaderPlugin()
],
module: {
rules: [{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
}
},
...
I was having this same problem and found this thread solved my problem.
Essentially, you do not need to specify the module rules or the loader for vue-loader when using vue-cli to build your app because vue-cli provides vue-loader out of the box.
I do not know why we get the error when we try to specify the module rules, and it is unfortunate that it gives this unhelpful error, but regardless, I hope this helps!