Quasar v0.16 & CLI v0.16 are out!

Sweetyy

Hi !

I got an issue… When i run quasar dev it tells me to remove some section in the index.template.html that are no longer required by the new version of quasar-cli. I did it but it continues to ask me to remove this part and i already did it :

Your newer Quasar CLI requires a minor change to /src/index.template.html
   Please remove this section completely:

   <% if (htmlWebpackPlugin.options.ctx.mode.pwa) { %>
    <!-- Add to home screen for Android and modern mobile browsers -->
    .....
   <% } %>

Here is my index.template.html :

<!DOCTYPE html>
<html <% if (htmlWebpackPlugin.options.rtl) { %>dir="rtl" <% } %>lang="en">
  <head>
    <meta charset="utf-8">
    <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 (htmlWebpackPlugin.options.ctx.mode.cordova) { %>, viewport-fit=cover<% } %>">
    <title>MyApp</title>

    <link rel="apple-touch-icon" sizes="60x60" href="statics/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="statics/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="statics/favicon-16x16.png">
    <link rel="manifest" href="statics/manifest.json">
    <link rel="mask-icon" href="statics/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="theme-color" content="#ffffff">
    <style>
      /* Only for IE10 & IE11 if not running */
      @media all and (-ms-high-contrast:none)
      {
        .warning-ie {
          font-family: sans-serif;
          margin-top: 10vh;
          text-align: center; 
          color: green;
          display: block !important;
        } /* IE10 */
        *::-ms-backdrop, .warning-ie {
          font-family: sans-serif;
          margin-top: 10vh;
          text-align: center; 
          color: red;
          display: block !important;
        } /* IE11 */
      }
    </style>
  </head>
  <body>
    <% if (!htmlWebpackPlugin.options.ctx.mode.electron) { %>
      <noscript>
        This is your fallback content in case JavaScript fails to load.
      </noscript>
    <% } %>

    <!-- DO NOT touch the following <div> -->
    <div id="q-app"></div>

    <!-- built files will be auto injected here -->
  </body>
</html>

rstoenescu

@fuxic SSR is finally under works as we speak. Good progress too.

rstoenescu

@hawkeye64 said in Quasar v0.16 & CLI v0.16 are out!:

You shouldn’t be required to install babel transform plugins. And they should definitely not appear in your package.json. It’s already in the CLI. Other than the linting packages, you should not have any babel related packages there.
Remember CLI v0.16 uses Webpack 4, so make sure to use the latest version of any webpack plugins that you have added.
If the CLI detects the old babel 6 .babelrc syntax, then it replaces the file with an updated one. If you wanna change it, change the modified file AND make sure it’s babel 7 compliant.
If you got past the previous points and it still doesn’t works, delete node_modules and yarn.lock/package-lock.json and yarn/npm install again. But very important, don’t try to install babel stuff in your project (other than babel-eslint if you’re using the linter).

rstoenescu

@sweetyy Make sure you are editing the right src/index.template.html file. It is guaranteed that the CLI doesn’t complain for nothing.

rstoenescu

@jeffatef Remember that CLI v0.16 is using Webpack 4, so all your webpack plugins must be webpack 4 – usually all it takes it to upgrade to their latest version.
A common mistake when using a linter is to not update your package.json dev dependencies like babel-eslint.

The correct list of package versions (minimum versions to be correct):

"babel-eslint": "^8.2.2",
"eslint": "^4.15.0",
"eslint-config-standard": "^11.0.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^2.0.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^6.0.1",
"eslint-plugin-promise": "^3.7.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",

Hawkeye64

@rstoenescu Quick question for you. I noticed we have “quasar-cli”: “^0.15.20” in our package.json under “devDependencies”. Is this supposed to be there? I have a feeling not. I didn’t put it there. I suspect another team member did.

rstoenescu

@hawkeye64 it needs to be there. It’s added when quasar init-ing.

Hawkeye64

@rstoenescu Can you post what the .babelrc file should look like for quasar 0.16.1?

I removed babel-plugin-transform-runtime using npm from the package.json devDependencies.
I get this error on quasar dev:

 ERROR  Failed to compile with 1 errors                                                                                                                                                              07:34:09

 error  in ./.quasar/entry.js

Module build failed:   Error: Cannot find module '@babel/plugin-transform-runtime' from '/home/intelliview/git/projects/NewCode/System_Console/Sources/Client'

rstoenescu

@hawkeye64 Example of package.json > devDependencies for 0.16:

"devDependencies": {
    "babel-eslint": "^8.2.2",
    "eslint": "^4.15.0",
    "eslint-config-standard": "^11.0.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-promise": "^3.7.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    "quasar-cli": "^0.16.1"
  },

To be sure you’ve installed everything correctly (my feeling is that you missed something), delete node_modules and yarn.lock/package-json.lock then yarn/npm install again.

Hawkeye64

@rstoenescu Thank you so much for posting the devdependencies! I removed the node_modules and updated package.json with the versions you have, did npm install then quasar dev and it worked wonderfully! Thanks again!

antoniocdff

@Sweetyy try to remove manifest.json

Sweetyy

@antoniocdff thank you i tried but now i get that (after i removed all my node_modules with lock and npm install) :

Error: Error: Cannot find module 'webpack'

    - module.js:11 require
      internal/module.js:11:18

    - index.js:3 Object.<anonymous>
      [myproject]/[progress-bar-webpack-plugin]/index.js:3:15

I’m a bit annoyed because it’s the first time i get so many issues to update …

Thanks in advance for helps guys

antoniocdff

Hi @Sweetyy remove this part of yr template:

<link rel="manifest" href="statics/manifest.json">

Sweetyy

Hi @antoniocdff ! Thanks for the help ! But to fix my problem i had to reinstall npm install webpack -g and then remove the node_modules, package lock and finally npm install webpack and then npm install independently. It works now

rstoenescu

@sweetyy Why are you globally installing webpack? You should use the version embedded into Quasar CLI, otherwise things might break.

Sweetyy

@rstoenescu , that’s what i always do in general but when i simply ran npm install in my project to upgrade quasar-cli to 0.16.1 from 0.15.16, it gave me some errors about webpack… It was like it didn’t install it correctly perhaps due to a simple conflict coming from my computer … And because of that i had to reinstall it first globally and then locally but now it works in the last version of quasar. Nevertheless i agree that it was not necessary to install it globally … just wanted to be sure it was the last version for all my others projects.

nothingismagick

@Sweetyy - did you get a “peerDependency” type of error? Because that is really only a warning that the package needs to be resolved somewhere. FYI, webpack is actually packaged by quasar-cli.

Sweetyy

@nothingismagick - The error i got was

Error: Error: Cannot find module 'webpack'

    - module.js:11 require
      internal/module.js:11:18

    - index.js:3 Object.<anonymous>
      [myproject]/[progress-bar-webpack-plugin]/index.js:3:15

It was like npm install didn’t install/update webpack locally.

nothingismagick

@Sweetyy - I really don’t want to pass the buck here, but this is just strange and reminds me of a host of other issues I have been seeing with NPM lately. I wrote up a little comparison between npm & yarn here: https://forum.quasar-framework.org/topic/2357/yarn-or-npm

But you really should not install webpack globally. And unless you have a good reason not to, then I also must recommend moving to the latest node 10.*

Frosty-Z

Hello,
Same problem as @Sweetyy here.

Quasar CLI seems complaining about “ghost” lines of code concerning “Add to homescreen for Android…” which are not in my index.template.html file

Trying to narrow down the problem, the message occurs when in add this line in <head> section
<link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>statics/manifest.json"> (I’m migrating a project from quasar 0.14)

However, adding a line such as this one does not triggers the message :
<link rel="icon" type="image/png" sizes="16x16" href="<%= htmlWebpackPlugin.files.publicPath %>statics/icons/app-logo/favicon-16x16.png">

The “manifest” line looks useless in 0.16, as now manifest.json contents have to be declared in quasar.conf.js
https://quasar-framework.org/guide/pwa-configuring-pwa.html

=> I removed all “offending” lines in my index.template.html, however the error message is rather confusing :-s

No More Posting New Topics!

Quasar v0.16 & CLI v0.16 are out!