CODEWITHSUNDEEP
javascriptnode.jsvue.jsnpmwebpack
Brandon Evans
Brandon Evans

Reputation: 59

How to fix blank web page after 'npm run build'

I'm currently working on a project using Vue and Firebase. The issue is that my dev server is no longer rendering new routes from my vue router after building and deploying to prod.

For ex: I have several vue components and they all render properly for their corresponding vue router routes, although now when I add new components(Test.vue)/new routes, nothing is rendered when loading the web page.

I've spent quite a while looking at just about every helpful article relevant to this issue but have had no luck. I have tried manually setting the webpack config in a vue.config.js file and setting the root path to './' as well as '/' and even ''. None work.

I'm really lost at this point.

package.json (in root folder of project):

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "@firebase/firestore": "^1.4.10",
    "@google-cloud/firestore": "^2.2.7",
    "core-js": "^2.6.5",
    "firebase": "^6.4.0",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.10.0",
    "@vue/cli-service": "^3.10.0",
    "vue-template-compiler": "^2.6.10",
    "webpack-cli": "^3.3.7"
  }
}

//

package.json (in node_modules/webpack-dev-server/schema-utils/src/package.json):

{
  "_args": [
    [
      "[email protected]",
      "/home/b-rad/Documents/AustinKratom/frontend"
    ]
  ],
  "_development": true,
  "_from": "[email protected]",
  "_id": "[email protected]",
  "_inBundle": false,
  "_integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
  "_location": "/webpack-dev-server/schema-utils",
  "_phantomChildren": {},
  "_requested": {
    "type": "version",
    "registry": true,
    "raw": "[email protected]",
    "name": "schema-utils",
    "escapedName": "schema-utils",
    "rawSpec": "1.0.0",
    "saveSpec": null,
    "fetchSpec": "1.0.0"
  },
  "_requiredBy": [
    "/webpack-dev-server"
  ],
  "_resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
  "_spec": "1.0.0",
  "_where": "/home/b-rad/Documents/AustinKratom/frontend",
  "author": {
    "name": "webpack Contrib",
    "url": "https://github.com/webpack-contrib"
  },
  "bugs": {
    "url": "https://github.com/webpack-contrib/schema-utils/issues"
  },
  "dependencies": {
    "ajv": "^6.1.0",
    "ajv-errors": "^1.0.0",
    "ajv-keywords": "^3.1.0"
  },
  "description": "webpack Validation Utils",
  "devDependencies": {
    "@commitlint/cli": "^7.0.0",
    "@commitlint/config-conventional": "^7.0.0",
    "@webpack-contrib/eslint-config-webpack": "^2.0.0",
    "del-cli": "^1.0.0",
    "eslint": "^5.0.0",
    "eslint-plugin-import": "^2.0.0",
    "eslint-plugin-prettier": "^2.0.0",
    "jest": "^21.0.0",
    "prettier": "^1.0.0",
    "standard-version": "^4.0.0"
  },
  "engines": {
    "node": ">= 4"
  },
  "files": [
    "src"
  ],
  "homepage": "https://github.com/webpack-contrib/schema-utils",
  "license": "MIT",
  "main": "src/index.js",
  "name": "schema-utils",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/webpack-contrib/schema-utils.git"
  },
  "scripts": {
    "clean": "del-cli coverage",
    "commits": "commitlint --from $(git rev-list --tags --max-count=1)",
    "lint": "eslint --cache src test",
    "release": "npm run commits && standard-version",
    "test": "jest --env node --verbose --coverage"
  },
  "version": "1.0.0"
}

Please let me know if I need to provide additional information or files. I also have this project up on Github here: https://github.com/austin-kratom/AustinKratom

There are no error messages in console when on localhost dev server. Simply just a blank web page and nothing else. All my previous vue components/routes work fine, but new ones do not.

Thank you!

Upvotes: 2

Views: 1889

Answers (1)

Mohsin Mehmood
Mohsin Mehmood

Reputation: 4236

When I moved the /test route above dynamic routes related to show and edit routes /test url is loading the Test.Vue.

{
      path: '/test',
      name: 'test',
      component: Test
    },
    {
      path: '/edit/:product_id',
      name: 'edit-product',
      component: EditProduct
    },
    {
      path: '/:product_id',
      name: 'show-product',
      component: ShowProduct
    }

Before making this change, /test url was matching the path: '/:product_id route pattern with product_id parameter value being set to value "test". So rule is to always define the specific routes before the dynamic routes.

Upvotes: 1

Related Questions