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



  • Looks like running quasar dev changes your .babelrc file.
    I previously had this:

    { 
      "presets": [ 
        [ "env", {"modules": false} ], 
        "stage-2" 
      ], 
      "plugins": ["transform-runtime"], 
      "comments": false 
    } 
    

    Running quasar dev changes it to this:

    {
      "presets": [
        [
          "@babel/preset-env", {
            "modules": false,
            "loose": false,
            "useBuiltIns": "usage"
          }
        ],
        [
          "@babel/preset-stage-2", {
            "modules": false,
            "loose": false,
            "useBuiltIns": true,
            "decoratorsLegacy": true
          }
        ]
      ],
      "plugins": [
        [
          "@babel/transform-runtime", {
            "polyfill": false,
            "regenerator": false
          }
        ]
      ],
      "comments": false
    }
    

    The recomended way to use these, from the site itself (https://www.npmjs.com/package/babel-plugin-transform-runtime):

    Usage
    Via .babelrc (Recommended)
    Add the following line to your .babelrc file:
    
    // without options
    {
      "plugins": ["transform-runtime"]
    }
     
    // with options
    {
      "plugins": [
        ["transform-runtime", {
          "helpers": false, // defaults to true
          "polyfill": false, // defaults to true
          "regenerator": true, // defaults to true
          "moduleName": "babel-runtime" // defaults to "babel-runtime"
        }]
      ]
    }
    

    The name of the plugin is transform-runtime' as it is under thepluginssection, theplugin-transform-runtimeis not needed, as it is implied. I've tried to fix this, but when you runquasar devit puts it back. Same withpreset-envandpreset-stage-2` the preset is implied and not needed. Babel works it out.



  • There’s a deprecation warning when building:

    (node:16087) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead



  • 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>
    

  • Admin

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


  • Admin

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

    1. 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.
    2. Remember CLI v0.16 uses Webpack 4, so make sure to use the latest version of any webpack plugins that you have added.
    3. 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.
    4. 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).

  • Admin

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


  • Admin

    @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",
    


  • @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.


  • Admin

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



  • @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'
    

  • Admin

    @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.



  • @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!



  • @Sweetyy try to remove manifest.json 🙂



  • @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 🙂



  • Hi @Sweetyy remove this part of yr template:

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


  • 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 🙂


  • Admin

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



  • @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.



  • @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.



  • @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.


Log in to reply