search

quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.97k stars 3.53k forks source link

`quasar dev -m ssr` broken after upgrade @quasar/app from v1.9.6 to v2.0.1 #7351

Closed luozhihua closed 4 years ago

luozhihua commented 4 years ago

Describe the bug As title 

> npm install @quasar/app@latest
> quasar dev -m ssr

 Dev mode.......... ssr
 Pkg quasar........ v1.12.8
 Pkg @quasar/app... v2.0.1
 Debugging......... enabled

 Configured browser support (at least 92.96% of global marketshare):
 · Chrome for Android >= 81
 · Firefox for Android >= 68
 · And_qq >= 10.4
 · UC for Android >= 12.12
 · Android >= 81
 · Baidu >= 7.12
 · Bb >= 7
 · Chrome >= 78
 · Edge >= 18
 · Firefox >= 74
 · IE >= 7
 · IE Mobile >= 10
 · iOS >= 12.2-12.4
 · Kaios >= 2.5
 · Opera Mini >= all
 · Opera Mobile >= 11.1
 · Opera >= 64
 · Safari >= 11.1
 · Samsung >= 8.2

 App · Running "@quasar/dotenv" Quasar App Extension...
 App · Running "@quasar/typescript" Quasar App Extension...
 App · Validating src-ssr/extension.js
 App · Reading quasar.conf.js
 App · Checking listening address availability (local.isplash.app:8020)...
 App · Extension(@quasar/dotenv): Extending quasar.conf...
 App · Transpiling JS (Babel active) - includes IE11 support
 App · Extending Client Webpack config
 App · Extending Server Webpack config
 App · Generating Webpack entry point
 App · Booting up...
(node:54947) UnhandledPromiseRejectionWarning: ReferenceError: htmlWebpackPlugin is not defined
    at eval (eval at <anonymous> (/Users/colin/Works/Projects/isplash/code/isplash_app/node_modules/lodash.template/index.js:1550:12), <anonymous>:9:11)
    at module.exports.getIndexHtml (/Users/colin/Works/Projects/isplash/code/isplash_app/node_modules/@quasar/app/lib/ssr/html-template.js:54:14)
    at getTemplate (/Users/colin/Works/Projects/isplash/code/isplash_app/node_modules/@quasar/app/lib/dev-server.js:153:14)
    at DevServer.listenSSR (/Users/colin/Works/Projects/isplash/code/isplash_app/node_modules/@quasar/app/lib/dev-server.js:156:16)
    at /Users/colin/Works/Projects/isplash/code/isplash_app/node_modules/@quasar/app/lib/dev-server.js:22:16
    at new Promise (<anonymous>)
    at DevServer.listen (/Users/colin/Works/Projects/isplash/code/isplash_app/node_modules/@quasar/app/lib/dev-server.js:20:12)
    at /Users/colin/Works/Projects/isplash/code/isplash_app/node_modules/@quasar/app/bin/quasar-dev:263:29
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:54947) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:54947) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Codepen/jsFiddle/Codesandbox (required) no

To Reproduce Steps to reproduce the behavior:

  1. npm install @quasar/app@latest
  2. quasar dev -m ssr
  3. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Platform (please complete the following information):

➜ quasar info      

Operating System - Darwin(19.6.0) - darwin/x64
NodeJs - 14.4.0

Global packages
  NPM - 6.14.5
  yarn - Not installed
  @quasar/cli - 1.1.0
  cordova - You have been opted out of telemetry. To change this, run: cordova telemetry on.
9.0.0 (cordova-lib@9.0.1)

Important local packages
  quasar - 1.12.8 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 2.0.1 -- Quasar Framework local CLI
  @quasar/extras - 1.8.2 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - 1.0.0 -- Official ESLint plugin for Quasar
  vue - 2.6.11 -- Reactive, component-oriented view layer for modern web interfaces.
  vue-router - 3.2.0 -- Official router for Vue.js 2
  vuex - 3.4.0 -- state management for Vue.js
  electron - 9.0.5 -- Build cross platform desktop apps with JavaScript, HTML, and CSS
  electron-packager - Not installed
  electron-builder - Not installed
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed
  @babel/core - 7.10.4 -- Babel compiler core.
  webpack - 4.43.0 -- 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.11.0 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.1 -- Script for registering service worker, with hooks
  typescript - 3.9.6 -- TypeScript is a language for application scale JavaScript development

Quasar App Extensions
  @quasar/quasar-app-extension-dotenv - 1.0.3 -- Load .env variables into your quasar project
  @quasar/quasar-app-extension-typescript - 1.0.2 -- A Quasar CLI Extension

Additional context Add any other context about the problem here.

luozhihua commented 4 years ago

I have solved it, just delete the htmlWebpackPlugin variable reference in src/index.template.html;

my solution: modify src/index.template.html from:

<!DOCTYPE html>
<html>

<head>
  <title><%= htmlWebpackPlugin.options.productName %></title>
  <meta charset="utf-8">
  <meta name="description" content="<%= htmlWebpackPlugin.options.productDescription %>">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  ...

to:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  ...

This works for me because I can use quasar meta plugin to manage page titles and descriptions, but it is still a big problem for people who depend on htmlWebpackPlugin.

pdanpdan commented 4 years ago

It was one step in the upgrade docs.

dmitry commented 4 years ago

@pdanpdan do you have any idea how to solve this issue in the end? It happens when I want to use interpolation <%.

dmitry commented 4 years ago

I got it, htmlVariables now changed to:

htmlVariables: {
    ctx: {
      dev: true,
      prod: false,
      mode: [Object],
      modeName: 'ssr',
      target: {},
      targetName: undefined,
      emulator: undefined,
      arch: {},
      archName: undefined,
      bundler: {},
      bundlerName: undefined,
      debug: false,
      publish: undefined,
      vueDevtools: false
    },
    process: { env: [Object] },
    productName: '',
    productDescription: ''
  }

Means instead of htmlWebpackPlugin.options.ctx.mode.capacitor and similar, you have to remove prefix htmlWebpackPlugin.options., so in the end it should be ctx.mode.capacitor.

pdanpdan commented 4 years ago

Yes, it's in the upgrade guide.

dmitry commented 4 years ago

Just for the others: https://quasar.dev/quasar-cli/app-upgrade-guide

seanaye commented 4 years ago

I have read the upgrade guide and removed all references to htmlWebpackPlugin.options. within the template file.

Running yarn dev -m ssr gives UnhandledPromiseRejectionWarning: ReferenceError: productName is not defined

index.template.html

<!DOCTYPE html>
<html>
  <head>
    <title><%= productName %></title>

    <meta charset="utf-8">
    <meta name="description" content="<%= productDescription %>">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">

    <link rel="icon" type="image/png" sizes="128x128" href="favicon-128x128.png">
    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
    <link rel="icon" type="image/ico" href="favicon.ico">
  </head>
  <body>
    <!-- DO NOT touch the following DIV -->
    <div id="q-app"></div>
  </body>
</html>

Edit: I also have never configured webpack-html-plugin or copy-webpack-plugin

Edit Again:

I skipped the step where I acutally install v2.0 🤦🏻‍♂️ It's been a long day