I am setting up eslint for vue in vscode. I am getting this notification when ever I format my code.
ESLint stack trace:
[Error - 2:20:56 AM] Error: Failed to load config "eslint-plugin-vue" to extend from.
Referenced from: C:\Users\dell\Desktop\Web current Projects\Vue.Js\vue-eslint-truth\package.json
at configMissingError (c:\Users\dell\Desktop\Web current Projects\Vue.Js\vue-eslint-truth\node_modules\eslint\lib\cli-engine\config-array-factory.js:265:9)
at ConfigArrayFactory._loadExtendedShareableConfig (c:\Users\dell\Desktop\Web current Projects\Vue.Js\vue-eslint-truth\node_modules\eslint\lib\cli-engine\config-array-factory.js:826:23)
at ConfigArrayFactory._loadExtends (c:\Users\dell\Desktop\Web current Projects\Vue.Js\vue-eslint-truth\node_modules\eslint\lib\cli-engine\config-array-factory.js:731:25)
at ConfigArrayFactory._normalizeObjectConfigDataBody (c:\Users\dell\Desktop\Web current Projects\Vue.Js\vue-eslint-truth\node_modules\eslint\lib\cli-engine\config-array-factory.js:660:25)
at _normalizeObjectConfigDataBody.next (<anonymous>)
at ConfigArrayFactory._normalizeObjectConfigData (c:\Users\dell\Desktop\Web current Projects\Vue.Js\vue-eslint-truth\node_modules\eslint\lib\cli-engine\config-array-factory.js:596:20)
at _normalizeObjectConfigData.next (<anonymous>)
at createConfigArray (c:\Users\dell\Desktop\Web current Projects\Vue.Js\vue-eslint-truth\node_modules\eslint\lib\cli-engine\config-array-factory.js:340:25)
at ConfigArrayFactory.loadInDirectory (c:\Users\dell\Desktop\Web current Projects\Vue.Js\vue-eslint-truth\node_modules\eslint\lib\cli-engine\config-array-factory.js:433:16)
at CascadingConfigArrayFactory._loadConfigInAncestors (c:\Users\dell\Desktop\Web current Projects\Vue.Js\vue-eslint-truth\node_modules\eslint\lib\cli-engine\cascading-config-array-factory.js:328:46)
my package.json file :-
{
"name": "vue-eslint-truth",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-config-prettier": "^8.2.0",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/recommended",
"eslint:recommended",
"prettier",
"eslint-plugin-vue"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
I am new to vue js and I don't know what to do to make the eslint work correctly. When I try to run the vue app using npm run serve, the development server just don't start and gives me this error that
Syntax Error: Error: Failed to load config "eslint-plugin-vue" to extend from.
Referenced from: C:\Users\dell\Desktop\Web current Projects\Vue.Js\vue-eslint-truth\package.json
at _normalizeObjectConfigDataBody.next (<anonymous>)
at _normalizeObjectConfigData.next (<anonymous>)
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
You don't need to extend eslint-plugin-vue on your eslintConfig of you packages.json. As you can see on documentation.
Related
I created a single button vue library and built it via vue-cli-service build --target lib.
And this option works fine in nuxtjs, but when I include vuetify in my package and try to use it in nuxtjs, the app throws an error
In nuxtjs I include vuetify via #nuxtjs/vuetify
Please help because I don't understand what is the problem.
My package.json in library
{
"name": "uikit",
"version": "0.1.0",
"private": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --target lib --name uikit src/index.js",
"lint": "vue-cli-service lint"
},
"module": "./dist/uikit.common.js",
"main": "./dist/uikit.umd.js",
"files": [
"./dist"
],
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14",
"vuetify": "^2.6.0"
},
"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-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"sass": "~1.32.0",
"sass-loader": "^10.0.0",
"vue-cli-plugin-vuetify": "~2.5.8",
"vue-template-compiler": "^2.6.14",
"vuetify-loader": "^1.7.0"
},
"peerDependencies": {
"vue": "^2.7.10",
"vuetify": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
With <button> in the library it works fine and even #click works
enter image description here
What do I see when I use v-btn in my library
enter image description here
As you can see, when using v-btn in my application, apart from an error in the console, vuetify does not work completely except for styles
In nuxt.config.js
set build
transpile: \['#nuxtjs/vuetify'\] or transpile: \['vuetify'\]
also plugins: \[new VuetifyLoaderPlugin()\] didn't help
Have you updated nuxt.config.js the way it says in the Vuetify documentation and the nuxtjs/vuetify plugin page?
// nuxt.config.js
{
buildModules: [
// Simple usage
'#nuxtjs/vuetify',
// With options
['#nuxtjs/vuetify', { /* module options */ }]
]
}
Tell me, I understand that there is a problem in the versions, but how to solve it?
I have tried:
npm cache clean --force commands
npm install -g npm-install-peers
npm install --legacy-peer-deps
Install with npm install --save-dev vuex#next gives me this error
My package.json file:
"name": "",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"serve:standalone": "vue-cli-service serve --mode standalone"
},
"dependencies": {
"core-js": "^3.6.5",
"devextreme": "21.2.5",
"devextreme-vue": "21.2.5",
"single-spa-vue": "^2.1.0",
"vue": "^2.6.11"
},
"devDependencies": {
"#storybook/vue": "^6.4.14",
"#vue/cli": "^4.5.15",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"node-sass": "^6.0.1",
"sass-loader": "^10",
"eslint-plugin-vue": "^6.2.2",
"vue-cli-plugin-single-spa": "~3.1.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
That is because you're trying to install Vuex#4, which is only compatible with Vue#3. However, your project is using Vue#2 instead.
You will need to decide which Vue version you want to use. Since you mentioned that you only want to use Vue2, you need to install the Vuex#3 instead:
npm install vuex#3
I am trying to import one of my local vue library component in vue project. Created library components and installed in project using npm install dialogue-box-0.1.0.tgz, its a local vue library not published to npm.
Below is library package.json
{
"name": "dialogue-box",
"version": "0.1.0",
"private": false,
"main": "dist/dialogue-box.common.js",
"files": ["dist/*", "types/*"],
"types": "./types/index.d.ts",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build-lib": "vue-cli-service build --target lib --name dialogue-box './src/index.js' && npm pack",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
Below is the index.js file of my library
import App from './App.vue'
import AlertComponent from './components/AlertComponent.vue';
import HelloWorld from './components/HelloWorld.vue';
export default {
App,
AlertComponent,
HelloWorld
}
Created index.d.ts stating as below
declare module "dialogue-box";
When i imported the HelloWorld Component in my actual project template and ran server getting below error.
enter image description here
Issue with not properly configured to a library.
Please use below link, have configured properly and able to integrate the local build vue library to any other vue project.Follow the Readme in git to configure in any project.
https://github.com/MohanaDevarasetty/dialogue-box.git
I have created a Vue app with vue-cli 3. It was working fine in all browsers until I installed a npm package "microsoft-cognitiveservices-speech-sdk". To my knowledge, I guess, this particular package is not getting transpiled by babel. Below is my babel.config.js and package.json
//babel.config.js
module.exports = {
presets: [
'#vue/app'
]
}
//package.json
{
"name": "vueApp",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.0",
"core-js": "^2.6.5",
"microsoft-cognitiveservices-speech-sdk": "^1.7.0",
"vue": "^2.6.10",
"vue-good-table": "^2.18.0",
"vue-i18n": "^8.14.0",
"vue-router": "^3.1.2",
"vue-uuid": "^1.1.1",
"vuex": "^3.1.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.10.0",
"#vue/cli-plugin-eslint": "^3.10.0",
"#vue/cli-service": "^3.10.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"http-proxy-middleware": "^0.20.0",
"less": "^3.10.2",
"less-loader": "^5.0.0",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
Once I installed the package, my application is not loading in IE (version 11) browser. But works like a charm in Google Chrome.
Can anyone help me out to solve this problem? Thanks in advance!
After a huge research and tried out the suggestions in the web, I have fixed the issue. So apparently, you need to create a configuration file for the app to transpile your troubling packages.
Create a vue.config.js in your root directory and add a property transplieDependencies, an array to contain your troubled libraries for es5 conversion.
//vue.config.js
module.exports = {
transplieDependencies: [
"your trouble library name"
]
}
Once you implemented the above changes, restart your server to get it working in IE.
I want to use variables within my code, but the issue is that I cannot use variables in each component without importing the .scss file into each component.
Someone mentioned that using Webpack may help, and would allow me to use the variables project-wide without individual imports.
The problem is, I have never messed with Webpack before and am not even sure where to import the scss file.
In Vue, I have my files "bundled" into one file (which I believe is the package.json).
My package.json file looks like this -
{
"name": "freelance",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^2.5.21",
"vue-router": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.3.0",
"#vue/cli-plugin-eslint": "^3.3.0",
"#vue/cli-service": "^3.3.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
"vue-template-compiler": "^2.5.21"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Obviously, I cannot see any webpack there, so imagine I would need to add it? (or maybe somewhere else?) maybe someone can help? where would I import my "variables.scss" file.)
As I imagine you are using vue cli. You can create a file in your project folder called vue.config.js. Inside of that file you can define the following to load a scss file for each component (where your file is located in /styles/variables.scss):
module.exports = {
css: {
loaderOptions: {
sass: {
data: '#import "#/styles/variables.scss";'
}
}
}
};
You can read more about the vue.config.js file here: https://cli.vuejs.org/config/#css-loaderoptions