missing sass-loader, css-loader dependecies quasar/vue - vue.js

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.

Related

Upgrading to Vuetify 2.6.12

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.

Vue 2 based , vue-cli, vue-property-decorator, vue-class-component, Vuetify, project migration to Vue 3

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

Tailwind error during build with vue project

My Vue2 Tailwind CSS project is running well in dev. But for production I still have an issue :
cross-env NODE_ENV=production && npx tailwindcss -i ./src/assets/styles/index.css -o ./dist/tailwind.css --minify && vue-cli-service build
(node:19240) UnhandledPromiseRejectionWarning: Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
I tryed to use PostCSS8 and also the Compat 7 Version that are mentionned in many stackoverflow posts, but this absolutely does nothing.
Any way to make it works under Vue 2 ?
Here is my package.json :
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build:local": "SET NODE_ENV=production && npx tailwindcss -i ./src/assets/styles/index.css -o ./dist/tailwind.css --minify && vue-cli-service build",
"build": "cross-env NODE_ENV=production && npx tailwindcss -i ./src/assets/styles/index.css -o ./dist/tailwind.css --minify && vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.21.1",
"bootstrap": "^5.0.1",
"bootstrap-vue": "^2.21.2",
"core-js": "^3.6.5",
"register-service-worker": "^1.7.1",
"tldts": "^5.7.38",
"vue": "^2.6.14",
"vue-cookies": "^1.7.4",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"#tailwindcss/postcss7-compat": "^2.2.7",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-pwa": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"autoprefixer": "^9.8.6",
"babel-eslint": "^10.1.0",
"cross-env": "^7.0.3",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"postcss": "^7.0.36",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.8",
"vue-template-compiler": "^2.6.11"
}
}
i'm having the same issue.
If you install tailwind compat version at 2.1.4 it will work, but i need some fixes and functionalities added later.
For you to try this fix, change on your package.json
- "#tailwindcss/postcss7-compat": "^2.2.7"
+ "#tailwindcss/postcss7-compat": "2.1.4",
If someone can get it to work above 2.1.4 please respond here.

npm ERR! missing script: start Vue.js Error

When I install Vuetable. ( npm install vuetable-2#next --save ) I get the following error:
npm ERR! missing script: start
npm ERR! A complete log of this run can be found in:
npm ERR! x\AppData\Roaming\npm-cache\_logs\2021-08-23T08_51_20_971Z-debug.log
PS x\Desktop\dd\frontend> npm start serve
npm ERR! missing script: start
npm ERR! A complete log of this run can be found in:
npm ERR! x\AppData\Roaming\npm-cache\_logs\2021-08-23T08_52_32_164Z-debug.log
I tried to remove the node_modules folder and install it again. Also I tried, npm clean cache --force but still get the same error. How can I fix it?
This is my package.json file :
{
"name": "architectui-vue-pro",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#ckeditor/ckeditor5-build-classic": "^11.2.0",
"#ckeditor/ckeditor5-vue": "^1.0.1",
"#fancyapps/fancybox": "^3.5.7",
"#fortawesome/fontawesome-svg-core": "^1.2.17",
"#fortawesome/free-solid-svg-icons": "^5.8.1",
"#fortawesome/vue-fontawesome": "^0.1.6",
"animate-sass": "^0.8.2",
"apexcharts": "^3.6.7",
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.0.0-rc.18",
"chart.js": "^2.8.0",
"countup.js": "^1.9.3",
"css-file-icons": "0.0.7",
"es6-promise": "^4.2.6",
"increase-memory-limit": "^1.0.6",
"leaflet": "^1.4.0",
"linearicons": "^1.0.1",
"material-design-icons-iconfont": "^4.0.5",
"mockjs": "^1.0.1-beta3",
"moment": "^2.24.0",
"moment-timezone": "^0.5.31",
"node-sass": "^4.11.0",
"pdfjs": "^2.3.8",
"pe7-icon": "^1.0.4",
"perfect-scrollbar": "^1.4.0",
"popper.js": "^1.15.0",
"quill": "^1.3.6",
"sass-loader": "^7.1.0",
"sweetalert": "^2.1.2",
"toastr": "^2.1.4",
"v-mask": "^1.3.3",
"vee-validate": "^2.2.3",
"vue": "^2.6.10",
"vue-apexcharts": "^1.3.4",
"vue-chartjs": "^3.4.2",
"vue-clipboards": "^1.2.4",
"vue-color": "^2.7.0",
"vue-country-flag": "^1.1.0",
"vue-countup-v2": "^2.0.0",
"vue-cropperjs": "^3.0.0",
"vue-element-loading": "^1.1.1",
"vue-fancybox": "^1.0.3",
"vue-form-wizard": "^0.8.4",
"vue-full-calendar": "^2.7.0",
"vue-js-toggle-button": "^1.3.2",
"vue-ladda": "0.0.15",
"vue-multiselect": "^2.1.4",
"vue-notifications": "^0.9.0",
"vue-pdf": "^4.0.8",
"vue-perfect-scrollbar": "^0.1.0",
"vue-quill-editor": "^3.0.6",
"vue-rate": "^2.2.0",
"vue-router": "^3.0.5",
"vue-select": "^2.6.4",
"vue-session": "^1.0.0",
"vue-sidebar-menu": "^3.7.0",
"vue-slick": "^1.1.15",
"vue-slider-component": "^2.8.16",
"vue-sparklines": "^0.1.9",
"vue-spinkit": "^1.7.12",
"vue-spinner": "^1.0.4",
"vue-sticky-directive": "0.0.8",
"vue-tabs-with-active-line": "^1.1.4",
"vue-textarea-autosize": "^1.0.4",
"vue-toastr": "^2.0.16",
"vue2-animate": "^2.1.0",
"vue2-circle-progress": "^1.2.3",
"vue2-datepicker": "^2.11.0",
"vue2-dropzone": "^3.5.8",
"vue2-google-maps": "^0.10.6",
"vue2-leaflet": "^1.2.3",
"vuelidate": "^0.7.4",
"vuetable-2": "^2.0.0-beta.4",
"vuetify": "^1.5.5",
"vuetrend": "^0.3.2",
"vuex": "^3.1.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.6.0",
"#vue/cli-plugin-eslint": "^3.6.0",
"#vue/cli-service": "^3.6.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.2.2",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"vue-cli-plugin-vuetify": "^0.5.0",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.0.5"
},
"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"
]
}
You are missing the start script. Add this to your package.json
"scripts": {
"start": "vue-cli-service start",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},

NET::ERR_CERT_INVALID error when running VueJS project

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 )