Updating Quasar to 0.17.6 solved the issue.

@s-molinari Bit of a stale post but I looked at your code and it works because you use the “disable” directive, not “disabled” like the OP. Where does the “disable” directive come from? I’ve looked in the Quasar and Vue docs and don’t see it anywhere. It works, just curious where it’s coming from!

Jason

Updating Quasar to 0.17.6 solved the issue.

I am using Crosswalk and I’m aware of the size it adds but I’m wondering about the size of the Javascript bundles produced by Webpack in the Cordova build. The bundles are way larger in the Cordova build than the non-Cordova one. I just tried a build without Crosswalk and it didn’t change javascript size at all.

Hi there,
I have a Quasar (CLI version 0.15.14) Cordova app that when I build it’s generating a massive (220MB uncompressed including .map files) js folder. As an experiment I build it as non-Cordova and the js folder is way smaller (2.1MB with no .map files). The number of files in the folder is also way higher in Cordova. Here’s the build commands I’m using.

Cordova
quasar build -m cordova -T android -t mat

Non-Cordova
quasar build -t mat

Here’s my quasar.conf.js

const webpack = require('webpack');

// Configuration for your app

module.exports = function (ctx) {
    return {
        // app plugins (/src/plugins)
        plugins: [
            // 3rd Party
            'axios',
            'vuelidate',
            'vue2GoogleMaps',

            // Ours
            'appOptions',
            'filters'
        ],
        css: [
            'app.styl',
            'overrides.styl',
            'forms.styl',
            'navigation.styl'
        ],
        extras: [
            ctx.theme.mat ? 'roboto-font' : null,
            'material-icons',
            'ionicons'
            // 'mdi',
            // 'fontawesome'
        ],
        supportIE: false,
        vendor: {
            add: [],
            remove: []
        },
        build: {
            scopeHoisting: true,
            vueRouterMode: 'history',
            env: {
                BUILD_MODE: JSON.stringify(process.env.BUILD_MODE)
            },
            analyze: {
                generateStatsFile: true
            },
            // gzip: true,
            // extractCSS: false,
            // useNotifier: false,
            extendWebpack(cfg) {
                cfg.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))  // Don't import the locale information for moment or it will bloat the package
            }
        },
        devServer: {
            // https: true,
            // port: 8080,
            open: true // opens browser window automatically
        },
        // framework: 'all' --- includes everything; for dev only!
        framework: {
            components: [
                'QLayout',
                'QLayoutHeader',
                'QLayoutFooter',
                'QPageContainer',
                'QPage',
                'QTabs',
                'QTab',
                'QTabPane',
                'QRouteTab',
                'QCarousel',
                'QCarouselSlide',
                'QCarouselControl',
                'QField',
                'QInput',
                'QToggle',
                'QBtn',
                'QBtnToggle',
                'QModal',
                'QSpinner',
                'QScrollArea',
                'QItem',
                'QItemMain',
                'QItemSide',
                'QItemSeparator',
                'QItemTile',
                'QDialog',
                'QSearch',
                'QInnerLoading',
                'Ripple',
                'Loading',

                'QLayoutDrawer',
                'QToolbar',
                'QToolbarTitle',
                'QIcon',
                'QList',
                'QListHeader',
            ],
            directives: [
                'Ripple'
            ],
            // Quasar plugins
            plugins: [
                'Notify',
                'Dialog',
                'Loading'
            ]
        },
        // animations: 'all' --- includes all animations
        animations: [
        ],
        pwa: {
            cacheExt: 'js,html,css,ttf,eot,otf,woff,woff2,json,svg,gif,jpg,jpeg,png,wav,ogg,webm,flac,aac,mp4,mp3',
            manifest: {
                // name: 'Quasar App',
                // short_name: 'Quasar-PWA',
                // description: 'Best PWA App in town!',
                display: 'standalone',
                orientation: 'portrait',
                background_color: '#ffffff',
                theme_color: '#027be3',
                icons: [
                    {
                        'src': 'statics/icons/icon-128x128.png',
                        'sizes': '128x128',
                        'type': 'image/png'
                    },
                    {
                        'src': 'statics/icons/icon-192x192.png',
                        'sizes': '192x192',
                        'type': 'image/png'
                    },
                    {
                        'src': 'statics/icons/icon-256x256.png',
                        'sizes': '256x256',
                        'type': 'image/png'
                    },
                    {
                        'src': 'statics/icons/icon-384x384.png',
                        'sizes': '384x384',
                        'type': 'image/png'
                    },
                    {
                        'src': 'statics/icons/icon-512x512.png',
                        'sizes': '512x512',
                        'type': 'image/png'
                    }
                ]
            }
        },
        cordova: {
            id: 'com.myapp.mobile',
            version: '0.0.5.1'
        },
        electron: {
            extendWebpack(cfg) {
                // do something with cfg
            },
            packager: {
                // OS X / Mac App Store
                // appBundleId: '',
                // appCategoryType: '',
                // osxSign: '',
                // protocol: 'myapp://path',

                // Window only
                // win32metadata: { ... }
            }
        },

        // leave this here for Quasar CLI
        starterKit: '1.0.2'
    }
}

I’m probably misunderstanding something. Any thoughts? I’m trying to determine why my Cordova builds are so big.

Jason

Okay, any suggestions on how to add the babel-polyfill? Am I on the right track with the plugin syntax I quoted?

Hi there,
I have a Quasar (v16) Cordova app that runs fine on my Android phone unless I install the Crosswalk plugin to support older Android versions. The Crosswalk plugin is no longer supported so isn’t as up-to-date as the new Chrome version on my phone. When I run it with the Crosswalk plugin, I get the following error in the console and the app just shows a white screen.

Uncaught TypeError: Object.entries is not a function

Since Object.entries is a newer feature of javascript I’m not surprised Crosswalk doesn’t support it. What I’m confused about is that I thought Quasar used Babel to compile newer Javascript down to ES5 syntax so I wouldn’t expect to see this error at all since Object.entries should have been transpiled to ES5 code. Everything seems to be setup properly in my project. Here’s by .babelrc file:

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

I also tried adding babel-polyfill using a Quasar plugin which still didn’t work. I’m not sure if this is the correct approach but here’s my plugin code:

import 'babel-polyfill';

export default () => {
}

Any thoughts would be appreciated. Here’s my “quasar info” if it’s helpful:

Operating System                Darwin(17.5.0) - darwin/x64
NodeJs                          8.11.1

Global packages
  NPM                           6.1.0
  yarn                          Not available
  quasar-cli                    0.15.14
  vue-cli                       2.9.6
  cordova                       8.0.0

Important local packages
  quasar-cli                    0.15.14 (Quasar Framework CLI)
  quasar-framework              0.16.0  (Build responsive websites, PWAs, hybrid mobile apps and Electron apps, all simultaneously using same codebase)
  quasar-extras                 1.0.2   (Quasar Framework fonts, icons and i18n.)
  vue                           2.5.16  (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 available
  babel-core                    6.26.0  (Babel compiler core.)
  webpack                       3.11.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            2.11.1  (Serves a webpack app. Updates the browser on changes.)

Thanks,
Jason

Hi there,
Please be patient, I’m just getting started with Quasar and may be missing something obvious. I’m trying to setup a full height carousel on a Quasar page but it won’t go full height. I copied my carousel code directly from the full page example in the docs (minus the modal stuff). Here’s my page code:

<template>
  <q-page>
      <q-carousel
        color="white"
        arrows
        quick-nav
        class="text-white full-height"
      >
        <q-carousel-slide
          v-for="n in 7" :key="`full-${n}`"
          class="flex flex-center"
        >
          <div class="q-display-3">Step {{ n }}</div>
        </q-carousel-slide>

        <q-carousel-control
          slot="control-full"
          slot-scope="carousel"
          position="bottom-right"
          :offset="[18, 22]"
        >
          <q-btn
            rounded push
            color="amber"
            icon="close"
            label="Close me"
            @click="modal = false"
          />
        </q-carousel-control>
      </q-carousel>
  </q-page>
</template>

<script>
export default {
  name: 'PageLogin',
}
</script>

<style>
</style>

Here’s my version info:

Operating System                Darwin(17.5.0) - darwin/x64
NodeJs                          8.11.1

Global packages
  NPM                           5.8.0
  yarn                          Not available
  quasar-cli                    0.15.14
  vue-cli                       2.9.3
  cordova                       7.0.1

Important local packages
  quasar-cli                    0.15.14 (Quasar Framework CLI)
  quasar-framework              0.15.10 (Build responsive websites, PWAs, hybrid mobile apps and Electron apps, all simultaneously using same codebase)
  quasar-extras                 1.0.2   (Quasar Framework fonts, icons and i18n.)
  vue                           2.5.16  (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 available
  babel-core                    6.26.0  (Babel compiler core.)
  webpack                       3.11.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            2.11.1  (Serves a webpack app. Updates the browser on changes.)

Networking
  Host                          MacBook-Pro.local
  en0                           192.168.0.172

Is the modal stuff required for some reason?

Update: I think this may be a bug. Adding a height style to match the min-height style on the q-page element seems to fix the issue. This implies that height needs to be defined on the q-page element in order for items it contains to be able to fill 100% height (which matches what I know about CSS). I’ve reported it in GibHub ticket: GitHub 1902.

Thanks in advance,
Jason