I’m trying to upgrade Vuetify package to version 2.6.12 in my project Vuejs. Therefore, I’ve gotten error message when I run “npm run serve”
Error:
Syntax Error: SassError: expected selector.
╷
2 │ /deep/ #btn-acoes-t button:nth-child(3){ display: none !important;}
│ ^
╵
src\views\PerfilAnoLetivo.vue 2:1 root stylesheet
# ./node_modules/vue-style-loader??ref–8-oneOf-1-0!./node_modules/css-loader??ref–8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref–8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref–8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref–0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/PerfilAnoLetivo.vue?vue&type=style&index=0&id=33337f33&lang=scss&scoped=true& 4:14-467 15:3-20:5 16:22-475
# ./src/views/PerfilAnoLetivo.vue?vue&type=style&index=0&id=33337f33&lang=scss&scoped=true&
# ./src/views/PerfilAnoLetivo.vue
# ./src/routes/gerencial.js
# ./src/routes/layout.js
# ./src/routes/index.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://localhost:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
package.json
{
"name": "educacaoapp",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"lint-fix": "vue-cli-service lint --fix"
},
"dependencies": {
"animate.css": "^4.1.1",
"axios": "^1.1.3",
"babel-polyfill": "^6.26.0",
"chart.js": "^2.7.3",
"eslint-config-standard": "^12.0.0",
"material-design-icons-iconfont": "^6.7.0",
"moment": "^2.29.4",
"pdfmake": "^0.2.6",
"vue": "^2.6.6",
"vue-chartjs": "^3.4.0",
"vue-debounce": "^4.0.0",
"vue-gravatar": "^1.4.1",
"vue-progressbar": "^0.7.5",
"vue-router": "^3.0.2",
"vue-the-mask": "^0.11.1",
"vue-tour": "^2.0.0",
"vuelidate": "^0.7.7",
"vuetify": "^2.6.12",
"vuex": "^3.1.0",
"vuex-persistedstate": "^2.5.4"
},
"devDependencies": {
"#babel/preset-env": "^7.19.4",
"#mdi/font": "^7.0.96",
"#vue/cli-plugin-babel": "^3.4.0",
"#vue/cli-plugin-eslint": "^3.4.0",
"#vue/cli-service": "^3.4.0",
"#vue/eslint-config-airbnb": "^4.0.0",
"#vue/eslint-config-standard": "^3.0.5",
"babel-eslint": "^10.0.1",
"eslint": "^5.13.0",
"eslint-plugin-vue": "^5.2.1",
"vue-template-compiler": "^2.7.13",
"sass": "^1.56.0",
"sass-loader": "^10.1.1"
}
}
node version v14.20.1
npm version: 6.14.17
I tried remove node_modules && npm install
I tried remove node-sass package
I installed package sass-loader
Your selector should be written like this when using SASS
::v-deep #btn-acoes-t button:nth-child(3)
as explained here.
Related
I am trying to add bootstrap Vue to a new project and after installation, it shows this error is there any fix to that?
Failed to compile with 1 error
11:44:32 error in
./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss
Syntax Error: SassError: Undefined variable. ╷ 29 │
-webkit-tap-highlight-color: rgba($black, 0); // 5 │ ^^^^^^ ╵ node_modules\bootstrap\scss_reboot.scss 29:37
#import src\assets\scss\vendors\bootstrap-vue\index.scss 4:9
#import src\App.vue 3:9 root
stylesheet
#
./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader-v16/dist/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss
4:14-419 15:3-20:5 16:22-427 #
./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss #
./src/App.vue # ./src/main.js # multi
(webpack)-dev-server/client?http://192.168.1.4:8080&sockPath=/sockjs-node
(webpack)/hot/dev-server.js ./src/main.js
My build looks like that
{
"name": "bootstrap-test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#babel/polyfill": "^7.11.5",
"bootstrap": "^4.5.2",
"bootstrap-vue": "^2.17.3",
"core-js": "^3.6.5",
"mutationobserver-shim": "^0.3.7",
"popper.js": "^1.16.1",
"portal-vue": "^2.1.7",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0-0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0",
"sass": "^1.32.8",
"sass-loader": "^10.1.1",
"vue-cli-plugin-bootstrap-vue": "~0.8.1"
}
}
bootstrap-vue currently does not support vue 3.0
See https://github.com/bootstrap-vue/bootstrap-vue/issues/5196
In your App.vue, you need to import _custom.scss before bootstrap style sheet as it contains the referenced variables.
<style lang="scss">
#import "~#/assets/scss/vendors/bootstrap-vue/_custom";
#import "~#/assets/scss/vendors/bootstrap-vue/index";
</style>
Note this error is not due to the use of Vuejs 3
I recently begun to work on a ongoing project. I cloned the repo, runned "npm install", everything worked fine, but when I tried to run the server I got this:
missing dependecies
trying to run the sugested code didn't work. I also tried installing and reinstalling: css-loader, vue-loader, sass, node-sass and sass-loader.
The error text:
98% after emitting SizeLimitsPlugin
ERROR Failed to compile with 2 errors 10:31:48
These dependencies were not found:
* -!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../styles/sass-framework/colors.scss in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/vue-cli-plugin-quasar/lib/loader.auto-import.js?kebab!./node_modules/cache-loader/dist/cjs.js??ref--0-1!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Login.vue?vue&type=style&index=0&id=26084dc2&lang=scss&scoped=true&
* -!../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!./styles/sass-framework/colors.scss in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/vue-cli-plugin-quasar/lib/loader.auto-import.js?kebab!./node_modules/cache-loader/dist/cjs.js??ref--0-1!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&
To install them, you can run: npm install --save -!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../styles/sass-framework/colors.scss -!../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!./styles/sass-framework/colors.scss
my package.json:
{
"name": "scale-frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#babel/traverse": "^7.10.1",
"#babel/types": "^7.10.2",
"#quasar/extras": "^1.0.0",
"axios": "^0.19.2",
"core-js": "^3.6.4",
"quasar": "^1.0.0",
"vue": "^2.6.11",
"vue-router": "^3.1.6",
"vuex": "^3.1.3"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.3.0",
"#vue/cli-plugin-eslint": "~4.3.0",
"#vue/cli-plugin-router": "~4.3.0",
"#vue/cli-plugin-vuex": "~4.3.0",
"#vue/cli-service": "~4.3.0",
"#vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"babel-plugin-transform-imports": "1.5.0",
"css-loader": "^3.6.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.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",
"node-sass": "^4.13.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^8.0.2",
"vue-cli-plugin-quasar": "~2.0.2",
"vue-loader": "^15.9.3",
"vue-svg-loader": "^0.16.0",
"vue-template-compiler": "^2.6.11"
}
}
Any ideas? Thanks in advance.
It was actually a custom dependency that was missing:
./styles/sass-framework/colors.scss
sass-framework is a repo itself and had to be added manually inside the project.
In vue/cli 4 app using cypress for testing I want to use my mixing and for this in my
tests/e2e/specs/fileupload_tests.js I added declaration:
import faker from 'faker'
import 'cypress-file-upload'
import appMixin from '../../../src/appMixin' // Full path is src/appMixin.js
describe('Admin category fileupload functionality', () => {
it('category fileupload', () => {
...
But I see error in my browser :
/mnt/_work_sdb8/wwwroot/lar/VApps/vtasks/node_modules/#babel/runtime/helpers/esm/typeof.js:1
export default function _typeof(obj) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
That is not error of invalid mixing path - in this case I got different error.
Which way is valid ?
"axios": "^0.19.0",
"core-js": "^3.3.2",
"cypress-file-upload": "^3.5.3",
"vue": "^2.6.10",
MODIFIED :
I commented import in my fileupload_tests.js file
and I added 1 line in tests/e2e/support/index.js :
import appMixin from '../../../src/appMixin' // src/appMixin.js
// Import commands.js using ES2015 syntax:
import './commands'
But running the test have error anyway:
/mnt/_work_sdb8/wwwroot/lar/VApps/vtasks/node_modules/#babel/runtime/helpers/esm/typeof.js:1
export default function _typeof(obj) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
In my project I have some config files, like cypress.json or babel.config.js
Can it be that I have to add mixing declarations in one of these files?
If Yes, in which format?
MODIFIED # 2:
I successfully run command
npm install babel-preset-es2015 --save-dev
and after that running tests I always got error :
/node_modules/#babel/runtime/helpers/esm/typeof.js:1
export default function _typeof(obj) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
Even if in my tests.js I commented all “import ” lines
My package.json :
{
"name": "ctasks",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#voerro/vue-tagsinput": "^2.2.0",
"axios": "^0.19.0",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"core-js": "^3.3.2",
"cypress-file-upload": "^3.5.3",
"file-saver": "^2.0.2",
"font-awesome": "^4.7.0",
"moment": "^2.24.0",
"moment-timezone": "^0.5.27",
"v-money": "^0.8.1",
"vee-validate": "^3.1.0",
"vue": "^2.6.10",
"vue-avatar": "^2.1.8",
"vue-context-menu": "^2.0.6",
"vue-focus": "^2.1.0",
"vue-head": "^2.2.0",
"vue-js-modal": "^1.3.31",
"vue-nav-tabs": "^0.5.7",
"vue-notification": "^1.3.20",
"vue-router": "^3.1.3",
"vue-select": "^3.2.0",
"vue-simple-calendar": "^4.3.2",
"vue-simple-suggest": "^1.10.1",
"vue-slider-component": "^3.1.1",
"vue-the-mask": "^0.11.1",
"vue-upload-component": "^2.8.20",
"vue-wysiwyg": "^1.7.2",
"vue2-datepicker": "^3.3.0",
"vue2-filters": "^0.8.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.0.0",
"#vue/cli-plugin-e2e-cypress": "~4.2.0",
"#vue/cli-plugin-eslint": "~4.2.0",
"#vue/cli-plugin-router": "^4.0.0",
"#vue/cli-plugin-vuex": "^4.0.0",
"#vue/cli-service": "^4.0.0",
"babel-eslint": "^10.0.3",
"bootstrap": "^4.3.1",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.1.2",
"faker": "^4.1.0",
"jquery": "^3.4.1",
"node-sass": "^4.12.0",
"popper.js": "^1.16.0",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"semi": [
2,
"never"
]
}
}
}
Was it wrong version of babel ?
Which is Correct ?
Thanks!
#babel/runtime/helpers/esm/typeof.js
Can you try with older version of babel, just do npm install babel-preset-es2015 --save-dev
It turns out that earlier Babel was shipping with all the required plugin, including one that translates ES6 to ES5. But since Babel 6.0, you have to explicitly include plugins or presets (which include certain predefined plugins). So we will install Babel preset es2015 .
Source
I have an year old VueJS project that runs on v3.9.2 of #vue/cli-service. I have been running it on https://localhost:8000 using the --https flag of vue-cli-service command.
Now, I updated my #vue/cli-service package to v3.12.1. When I run npm run serve, I get the following error in Chrome. There is no button to proceed to localhost.
Can anyone tell me what has changed in Vue cli service that this error is showing up and how can I fix this error?
Here's my package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"generate": "babel-node --config-file ./generator/babel.config.js -- ./generator",
"prod-serve": "npm run generate && vue-cli-service --mode production --https --port 8000 serve",
"build": "npm run generate && vue-cli-service build",
"lint": "vue-cli-service lint",
"lint-check": "vue-cli-service lint --no-fix",
"serve": "vue-cli-service --https --port 8000 serve --host localhost",
"postinstall": "postinstall",
"test": "jest --changedSince=master --coverage",
"test-ci": "jest --ci",
"test-watch": "npm run generate && jest --watch --no-coverage",
"test-e2e": "cypress run --browser chrome",
"test-e2e-headless": "cypress run",
"test-e2e-dev": "cypress open"
},
"dependencies": {
"#babel/polyfill": "^7.0.0-rc.1",
"can-ndjson-stream": "^1.0.0",
"color-convert": "^2.0.0",
"filesize": "^4.1.2",
"intro.js": "^2.9.3",
"jsonpath": "^1.0.1",
"lodash": "^4.17.11",
"luxon": "^1.11.4",
"papaparse": "^4.6.3",
"sass-loader": "^8.0.0",
"search-query-parser": "^1.5.2",
"vue": "^2.5.21",
"vue-i18n": "^8.8.1",
"vue-introjs": "^1.3.2",
"vue-router": "^3.0.1",
"vue2-dropzone": "^3.5.2",
"vuelidate": "^0.7.4",
"vuetify": "^2.1.12",
"vuex": "^3.0.1",
"vuex-i18n": "^1.11.0",
"vuex-router-sync": "^5.0.0"
},
"devDependencies": {
"#babel/cli": "^7.4.4",
"#babel/core": "^7.4.5",
"#babel/node": "^7.4.5",
"#babel/preset-env": "^7.4.5",
"#vue/cli-plugin-babel": "3.12.1",
"#vue/cli-plugin-eslint": "3.12.1",
"#vue/cli-service": "3.12.1",
"#vue/eslint-config-prettier": "^4.0.1",
"#vue/test-utils": "^1.0.0-beta.29",
"babel-core": "^7.0.0-bridge",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.8.0",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-module-resolver": "^3.2.0",
"css-loader": "^2.1.1",
"cypress": "^3.4.1",
"eslint": "^5.8.0",
"eslint-config-prettier": "^4.3.0",
"eslint-plugin-cypress": "^2.2.1",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-vue": "^5.0.0",
"fs-extra": "^8.0.1",
"jest": "^24.8.0",
"jest-junit": "^6.4.0",
"postinstall": "^0.4.2",
"regenerator-runtime": "^0.13.1",
"sass": "^1.23.7",
"style-loader": "^0.23.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-vuetify": "^2.0.2",
"vue-jest": "^3.0.4",
"vue-template-compiler": "^2.5.21",
"webpack-bundle-analyzer": "^3.3.2",
"worker-loader": "^2.0.0"
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 10"
],
"postinstall": {
"generator/acl_actions.csv": "link public/acl_actions.csv",
"generator/acl_fields.csv": "link public/acl_fields.csv"
}
}
OS: Ubuntu 18.04
Same thing happens if I create a fresh project as well. Both new and old projects work in Firefox.
The bug was introduced in webpack-dev-server version 3.9: https://github.com/webpack/webpack-dev-server/issues/2313
I managed to use the older version without the bug by adding to dependencies:
"webpack-dev-server": "3.8.2"
And changing the version of #vue/cli-service in devDependencies (note the tilde)
"#vue/cli-service": "~4.0.0",
Then removed node_modules, package-lock before doing npm install and npm run serve
Hope this helps you
IF certification error is triggered from browser not reaching a valid signature in that machine, try generate a new one:
How to create a self-signed certificate with OpenSSL
other possibility is to make Chrome ignore absence of certifications:
in Chrome address bar :
chrome://flags/#allow-insecure-localhost
(answer from: technipages )
When doing a vue-cli build through npm I get this error:
Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist`
This was working until recently and I'm not sure what would cause this to start failing. Seems like some timeframe hit that made it start reporting as 'outdated' but I don't know what to update to fix it.
I have tried running the suggested command but it doesn't do the trick. I am doing this through npm and am not using Visual Studio, so I am not using WebCompiler (and that directory doesn't exist in my user folder) so the solution in Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist` doesn't apply.
This also happens on our build system running through VSO, so it isn't just my box.
Here is my package.json file:
{
"name": "productName.portal",
"version": "1.0.0",
"description": "productName.portal static content",
"main": "gulpfile.js",
"keywords": [
"gulp",
"task"
],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/preset-react": "^7.0.0",
"#types/jest": "^23.1.4",
"#types/jquery": "^3.3.4",
"#types/underscore": "^1.8.8",
"#voerro/vue-tagsinput": "^1.8.0",
"#vue/cli-plugin-babel": "^3.0.0-rc.4",
"#vue/cli-plugin-typescript": "^3.0.0-rc.4",
"#vue/cli-plugin-unit-jest": "^3.0.1",
"#vue/cli-service": "3.0.0-rc.4",
"#vue/test-utils": "^1.0.0-beta.20",
"axios": "^0.18.0",
"babel-core": "7.0.0-bridge.0",
"babel-polyfill": "^6.26.0",
"copy-webpack-plugin": "^4.5.2",
"gulp": "^3.9.0",
"gulp-clean-css": "latest",
"gulp-concat": "latest",
"gulp-sourcemaps": "latest",
"gulp-uglify": "latest",
"jquery": "^3.3.1",
"moment": "^2.22.2",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
"script-loader": "^0.7.2",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"ts-jest": "^23.0.0",
"underscore": "^1.9.1",
"vue-i18n": "^8.0.0",
"vue-js-modal": "^1.3.16",
"vue-loading-overlay": "^2.1.0",
"vue-simple-spinner": "^1.2.8",
"vue-template-compiler": "^2.5.16",
"vue-toasted": "^1.1.24",
"vuejs-datepicker": "^1.5.2"
},
"dependencies": {
"node": "^9.9.0",
"typescript": "^3.0.1",
"trie-search": "^1.2.8",
"vue": "^2.5.16",
"vue-class-component": "^6.0.0",
"vue-property-decorator": "^7.0.0",
"vuex": "^3.0.1"
},
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"unittest": "vue-cli-service test:unit"
}
}
This is all down to the dependencies of #babel/preset-env
├─┬ #babel/preset-env
│ ├─┬ browserslist
│ │ ├── caniuse-lite
You can rectify this by updating that package
npm update #babel/preset-env
Just realised that Vue uses a few more levels of dependency
├─┬ #vue/cli-plugin-babel
│ ├─┬ #vue/babel-preset-app
│ │ ├─┬ #babel/preset-env
so you'll want to update the #vue/cli-plugin-babel package.