SOLVED "quasar init" appears to work, "quasar dev" subsequently results in a blank page but "quasar build" works as expected (macOS, details inside, tia)



  • Hello,

    We have been using Quasar for a few days and today resolved to ensure we are using the latest packages.

    The difficulty that has arisen is that, beginning with an updated macOS High Sierra install on a macbook pro, and what we assume to be the latest packages, we end up with a project where running quasar build results in expected behavior (a dist/ directory where we can run python -m SimpleHTTPServer and subsequently see things work locally), while running quasar dev or quasar dev --mode electron in contrast, always appears to compile fine and start the development web server or launch electron app, only to effectively serve a blank page with no error in the console or the window wherein we ran quasar dev:

    λ ./osxinfo

    Model : MacBookPro11,5
    Processor : Intel® Core™ i7-4870HQ CPU @ 2.50GHz
    OS : Darwin
    Release : 17.7.0
    Disk : 3.21% of 958.81 GB
    Memory : 13440 MB of 17180 MB
    Shell : /bin/bash
    Terminal : screen
    Memory : 13440 MB of 17180 MB
    Graphics : AMD Radeon R9 M370X @ 2048 MB
    Graphics : Intel Iris Pro @ 1536 MB
    Packages : no packages found
    Uptime : 1 day 06:41

    λ vue --version
    3.0.3

    λ quasar init we-are-testing-create-project
    Running command: vue init ‘quasarframework/quasar-starter-kit’ we-are-testing-create-project

    ? Project name (internal usage for dev) we-are-testing-create-project
    ? Project product name (official name) Quasar App
    ? Project description A Quasar Framework app
    ? Author Pete Thomas pete@xminusone.net
    ? Check the features needed for your project: ESLint
    ? Pick an ESLint preset Standard
    ? Cordova id (disregard if not building mobile apps) org.cordova.quasar.app
    ? Should we run npm install for you after the project has been created? (recommended)
    Yes, use Yarn (recommended)
    ❯ Yes, use NPM

    vue-cli · Generated “we-are-testing-create-project”.

    [] Installing project dependencies …

    npm WARN deprecated @babel/preset-stage-2@7.0.0-beta.54: � We’ve deprecated any official stage presets in favor of users explicitly opt-ing into the proposals they want to use versus any perceived convenience. You can also check https://github.com/babel/babel/issues/7770 for more information.
    npm WARN deprecated @babel/preset-stage-3@7.0.0-beta.54: � We’ve deprecated any official stage presets in favor of users explicitly opt-ing into the proposals they want to use versus any perceived convenience. You can also check https://github.com/babel/babel/issues/7770 for more information.

    [fsevents] Success: “/Users/c2fo/projects/osxinfo/we-are-testing-create-project/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node” already installed
    Pass --update-binary to reinstall or --build-from-source to recompile
    npm notice created a lockfile as package-lock.json. You should commit this file.
    added 1412 packages from 607 contributors and audited 15939 packages in 23.935s
    found 0 vulnerabilities

    [
    ] Running eslint --fix to comply with chosen preset rules…

    we-are-testing-create-project@1.0.0 lint /Users/c2fo/projects/osxinfo/we-are-testing-create-project
    eslint --ext .js,.vue src “–fix”

    [*] Quasar Project initialization finished!

    To get started:

    cd we-are-testing-create-project
    quasar dev

    Documentation can be found at: https://quasar-framework.org

    Quasar is relying on donations to evolve. We’d be very grateful if you can
    take a look at: https://www.patreon.com/quasarframework
    Any amount is very welcomed.
    If invoices are required, please first contact razvan.stoenescu@gmail.com

    Please give us a star on Github if you appreciate our work:
    https://github.com/quasarframework/quasar

    Enjoy! - Quasar Team

    λ quasar dev

    Dev mode… spa
    Quasar theme… mat
    Quasar CLI… v0.17.19
    Quasar Framework… v0.17.16
    Debugging… enabled

    app:quasar-conf Reading quasar.conf.js +0ms
    app:dev Checking listening address availability (0.0.0.0:8080)… +4ms
    app:webpack Extending SPA Webpack config +287ms
    app:generator Generating Webpack entry point +6ms
    app:dev-server Booting up… +2ms

    SPA ██████████ building modules [39%] 247/252 modules 5 active

    N App URL… http://localhost:8080/
    Dev mode… spa
    Quasar theme… mat
    Quasar CLI… v0.17.19
    Quasar Framework… v0.17.16

    ↑ at this point, visiting Firefox in firefox 62.0.2 with a default about:config results in a blank page with nothing in the developer console and nothing in the terminal window managing quasar dev, while, repeating myself quasar build works OK.

    Vue ff addon does not recognize the final result:

    vue ff addon does not recognize result

    Any guidance greatly appreciated and thanks in advance.

    -pete



  • Adding results of quasar info:

    λ quasar info

    Operating System Darwin(17.7.0) - darwin/x64
    NodeJs 10.11.0

    Global packages
    NPM 6.4.1
    yarn Not installed
    quasar-cli 0.17.19
    vue-cli 3.0.3
    cordova Not installed

    Important local packages
    quasar-cli 0.17.19 (Quasar Framework CLI)
    quasar-framework 0.17.16 (Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase)
    quasar-extras 2.0.6 (Quasar Framework fonts, icons and animations)
    vue 2.5.17 (Reactive, component-oriented view layer for modern web interfaces.)
    vue-router 3.0.1 (Official router for Vue.js 2)
    vuex 3.0.1 (state management for Vue.js)
    electron Not installed
    electron-packager Not installed
    electron-builder Not installed
    @babel/core 7.0.0-beta.54 (Babel compiler core.)
    webpack 4.19.1 (Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, … and your custom stuff.)
    webpack-dev-server 3.1.8 (Serves a webpack app. Updates the browser on changes.)
    workbox-webpack-plugin 3.5.0 (A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.)
    register-service-worker 1.5.2 (Script for registering service worker, with hooks)

    Networking
    Host c2fos-MacBook-Pro.local
    en0 xxx.xxx.xxx.xxx



  • Hi,

    You said “at this point, visiting Firefox”. Did Firefox (or any browser) open up on its own? Was there any other message in the browser? Was any HTML sent to the browser at all?

    Scott



  • Scott, Thanks for the reply.

    Safari behaves similar to Firefox. I get a blank page with no info. I believe no HTML is delivered, based on the view:

    https://i.postimg.cc/2SVK5Bm6/firefox-dev-window.png

    For Chrome, I downloaded it and it would not seem to connect to localhost so I unchecked Safe Browsing in advanced options, but still get this:

    https://i.postimg.cc/tgmP4YqX/Screen_Shot_2018-09-24_at_6.55.42_AM.png



  • Scott, thanks again. I think I had a very broken node install and have addressed this issue through a clean install process, so thought I would just note it here with the details:

    • Uninstalled node via https://github.com/brock/node-reinstall // but stopped the script before it began to “reinstall”, it prompts at various stages and allows one to exit after a certain point

    • Installed nvm and selected v10.11.0 so that I end up with:

    λ node --version
    v10.11.0
    λ npm --version
    6.4.1
    λ vue --version
    3.0.3
    λ quasar --version
    0.17.19
    λ nvm --version
    0.33.11

    And now I just tested quasar init with defaults + npm, and quasar dev worked fine.

    No more issue!