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.

There was an issue with certificates on Mac with older versions of webpack-dev-server (which vue-cli runs under the hood). See [this issue](https://github.com/webpack/webpack-dev-server/issues/2273). Not sure if this applies to Linux but can you try updating vue-cli to the latest version, where this issue was fixed? — stellr42, Dec 02 '19 at 17:17
I updated to the latest vue-cli version, but, still getting the same error. — Ankit Kante, Dec 03 '19 at 07:09

score 8 · Accepted Answer · answered Dec 05 '19 at 10:14

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

score 3 · Answer 2 · answered Dec 12 '19 at 08:58

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 )

NET::ERR_CERT_INVALID error when running VueJS project

2 Answers2