CODEWITHSUNDEEP
node.jsvue.jswindows-10localhost
danefondo
danefondo

Reputation: 555

Vue app with Node backend doesn't render anything except the home page on Windows localhost, works in production and MacOS localhost

The app has been running successfully in production for a year, and works perfectly on MacOS localhost. Recently needed to set up the app to run on Windows 10 localhost, and after resolving all the errors, now the app boots up, requests seem to get through, however, only the '/' page actually renders, all the other routes don't render and stay at a blank page.

What could be a reason?

During initial setup, I ran into an issue with windows-build-tools and a missing Python, which I ended up eventually resolving by installing everything through Chocolatey. Could this be related?

Node version on Windows is newer than one specified in project, could this cause this?

I'm happy to provide more details and perform any experiments any of you recommend or suggest. My own guess is that it is either something related to setup on Windows or some issue with the packages on Windows.

The app is booted up through a package.json start script:

"scripts": {
  "dev": "run-p dev:server dev:client",
  "dev:server": "nodemon --ignore './client' app.js",
  "dev:client": "cd client && npm run serve",
  "postinstall": "npm install --only=dev --prefix client && npm install --prefix client && npm run build --prefix client",
  "start": "node app.js",
  "heroku-prebuild": "python cleanup_script.py"
},

The vue app contains the following script that will be executed as a result:

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "bundle-report": "webpack-bundle-analyzer --port 4200 dist/stats.json"
},

VueJS package.json dependencies and dev dependencies.

{
"version": "0.1.0",
"private": true,
"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "bundle-report": "webpack-bundle-analyzer --port 4200 dist/stats.json"
},
"dependencies": {
  "@ckeditor/ckeditor5-build-decoupled-document": "^18.0.0",
  "@ckeditor/ckeditor5-vue": "^1.0.3",
  "@johmun/vue-tags-input": "^2.1.0",
  "@vue/composition-api": "^1.0.0-rc.3",
  "autolinker": "^3.14.2",
  "axios": "^0.21.1",
  "core-js": "^3.8.2",
  "date-fns": "^2.16.1",
  "detectrtc": "^1.4.1",
  "gsap": "^3.6.0",
  "imagekitio-vue": "^1.0.9",
  "ismobilejs": "^1.1.1",
  "jwt-decode": "^2.2.0",
  "maxlength-contenteditable": "^1.0.1",
  "socket.io-client": "^3.1.2",
  "twilio-video": "^2.10.0",
  "v-hotkey": "^0.8.0",
  "vue": "^2.6.12",
  "vue-color": "^2.8.1",
  "vue-gtag": "^1.16.1",
  "vue-i18n": "^8.22.4",
  "vue-infinite-loading": "^2.4.5",
  "vue-router": "^3.4.9",
  "vue-select": "^3.11.2",
  "vue-smooth-dnd": "^0.8.1",
  "vue-vimeo-player": "^0.2.2",
  "vue-window-size": "^1.0.3",
  "vue-youtube": "^1.4.0",
  "vuejs-datepicker": "^1.6.2",
  "vuex": "^3.6.0",
  "webrtc-adapter-test": "^0.2.10"
},
"devDependencies": {
  "@vue/cli-plugin-babel": "~4.3.0",
  "@vue/cli-plugin-eslint": "~4.3.0",
  "@vue/cli-service": "~4.3.0",
  "babel-eslint": "^10.1.0",
  "dotenv-webpack": "^5.1.0",
  "eslint": "^6.7.2",
  "eslint-plugin-vue": "^6.2.2",
  "vue-template-compiler": "^2.6.12",
  "webpack-bundle-analyzer": "^4.4.0"
},
"eslintConfig": {
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/essential",
    "eslint:recommended"
  ],
  "parserOptions": {
    "parser": "babel-eslint"
  },
  "rules": {}
},
"browserslist": [
  "> 1%",
  "last 2 versions",
  "not dead"
]

Upvotes: 1

Views: 254

Answers (1)

Estus Flask
Estus Flask

Reputation: 222999

Node version could be a problem. That windows-build-tools is required for the installation indicates there's binary dependency that is potentially incompatible with current Node version. Binary NPM dependencies usually provide a subset of precompiled binaries for a specific package version, where a combination of platform and Node.js version that can be considered safe or supported. For any other combination, binary package needs to be compiled for current platform with build tools. This doesn't always mean that the package is incompatible but this is common.

For example, node-sass (doesn't seem to be used here) has different versions that correspond to specific Node.js versions and provides precompiled binaries for a supported subset; for unsupported Node.js version it falls back to compilation during installation process and most likely fails.

It's unknown which dependency causes this problem in this case, this needs to be reviewed in npm/yarn logs.

In order to avoid this situation, Node version could be matched with old one. Project dependencies need to be freshly installed because node_modules in use has been already tied to currently used Node version.

Upvotes: 1

Related Questions