[0.17 beta] Weird behavior with `quasar dev -m ssr` command

Software version

Quasar:0.17.0-beta.16 OS: Windows 10 Node:10.2.1 NPM:6.1.0 Browsers:Google Chrome Version 67.0.3396.99 (Official Build) (64-bit) iOS: Android: Any other software related to your bug: Quasar-cli:0.17.0-beta.22

JsFiddle (for Quasar v0.15+ only)

What did you get as the error?

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

What were you expecting?

I dont expect this error.

What steps did you take, to get the error?

Wen I build using quasar build -m ssr -t mat then using “View page source” in chrome the page seems to be fine and everything is rendered on the server but when I run quasar dev -m ssr I got that error twice and the page doesn’t seems to be rendered on the server and I have the following route:

  {
    path: '*',
    name: '404',
    component: () => import('components/Error404')
  } 

As a last route, however under quasar dev -m ssr it always render this route then navigate to the correct route!

If my description is not enough I can record a video for the issue.

[rstoenescu]

@MohammedAl-Mahdawi No side effects. It’s good.

I’d go with:

if (ctx.mode.ssr) {
  config.devServer.....
}

… but this is just syntax 😃

[MohammedAl-Mahdawi]

I use tokens in a lot of URLs for example:

http://localhost:8080/email-confirmation/eyJhbGciOiJIasd5465diIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1Yj3we2r1wr5465werWU4YmRlZTJiMThmZDAxZTEiLCJhY2Nlc3MiOiJlbWFpbENvbmZpcm1hdGlvbiIsImlhdCI6MTUzMjQ2MDgyMCwiZXhwIjoxNTMyNjMzNjIwfQ.FYgbdvMrDqzRDjRv4G69vA5qwt21dS4DHGBMMH1PpRhKLHvE5tC37RA

This URL doesn’t work with SPA mode but it does work with SSR mode so here is my solution for anyone faced a similar issue, I modified the default code structure in quasar.conf.js a little bit, so here is a code snippet that shows how my quasar.conf.js currently structured:

// Configuration for your app
module.exports = function (ctx) {
  
  var config = {
    // app plugins (/src/plugins)
    plugins: [
        'axios',
    ],
    css: [
      'app.styl'
    ],

    // Some more code here...

    devServer: {
      // https: true,
      // port: 8080,
      open: true // opens browser window automatically
    },

    // Maybe a lot of code here as well...

    // leave this here for Quasar CLI
    starterKit: '1.0.0',
    ssr: {
      pwa: true, // should a PWA take over (default: false), or just a SPA?
      componentCache: {} // lru-cache package options
    },
    preFetch: true
  }

  !ctx.mode.ssr ? config.devServer['historyApiFallback'] = {
    rewrites: [
      {
        from: /^\/reset-password\/.*$/,
        to: '/'
      },
      {
        from: /^\/email-confirmation\/.*$/,
        to: '/'
      },
      {
        from: /^\/login\/.*$/,
        to: '/'
      },
    ]
  } : ''
  
  return config
}

@rstoenescu I hope this doesn’t have any side effects?