NET::ERR_CERT_INVALID error when running VueJS project

Question

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.

Answer 1

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

Answer 2

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 )