Uncaught TypeError on application loading after upgrading to v1.14



  • I’ve recently upgraded Quasar from v1.11.x to v1.14.0 using the Quasar CLI procedure.
    Once I tried to restart the application (using quasar dev) the build goes fine but I get an error when the app is loaded:

    vue.runtime.esm.js:5106 Uncaught TypeError: Cannot read property 'install' of undefined
        at Function.Vue.use (vue.runtime.esm.js:5106)
        at Object../.quasar/import-quasar.js (import-quasar.js:20)
        at __webpack_require__ (bootstrap:848)
        at fn (bootstrap:150)
        at Object../.quasar/app.js (app.js:18)
        at __webpack_require__ (bootstrap:848)
        at fn (bootstrap:150)
        at Object../.quasar/client-entry.js (client-entry.js:25)
        at __webpack_require__ (bootstrap:848)
        at fn (bootstrap:150)
    

    The problem seems to reside in my generated .quasar/import-quasar.js, which looks as follows:

    "use strict";
    
    var _interopRequireDefault = require("/Users/massi/Projects/oerc/datascriptor/packages/ui/node_modules/@babel/runtime/helpers/interopRequireDefault");
    
    var _vue = _interopRequireDefault(require("vue"));
    
    var _quasar = require("quasar");
    
    /**
     * THIS FILE IS GENERATED AUTOMATICALLY.
     * DO NOT EDIT.
     *
     * You are probably looking on adding startup/initialization code.
     * Use "quasar new boot <name>" and add it there.
     * One boot file per concern. Then reference the file(s) in quasar.conf.js > boot:
     * boot: ['file', ...] // do not add ".js" extension to it.
     *
     * Boot files are your "main.js"
     **/
    _vue.default.use(_quasar.Quasar, {
      config: {},
      plugins: {
        Loading: _quasar.Loading
      }
    });
    

    In particular, the _quasar.Quasar variable seems to be undefined. Any ideas on what could be causing this error? Thanks for any feedback

    I am currently using this setup:

    Dev mode.......... spa
    Pkg quasar........ v1.14.0
    Pkg @quasar/app... v1.9.6
    Modern build...... no (legacy ES5); use "--modern" param for ES6+




  • Thanks a lot, @metalsadman, I’m going to try that.



  • Even after I upgraded to @quasar/app v2.1.0 I am still running into the same error. What could be wrong/missing?
    This is my quasar configuration:

    Operating System - Darwin(18.7.0) - darwin/x64
    NodeJs - 12.7.0
    
    Global packages
      NPM - 6.13.1
      yarn - 1.22.4
      @quasar/cli - 1.0.2
      @quasar/icongenie - Not installed
      cordova - Not installed
    
    Important local packages
      quasar - 1.14.0 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
      @quasar/app - 2.1.0 -- Quasar Framework local CLI
      @quasar/extras - 1.9.5 -- Quasar Framework fonts, icons and animations
      eslint-plugin-quasar - Not installed
      vue - 2.6.12 -- Reactive, component-oriented view layer for modern web interfaces.
      vue-router - 3.2.0 -- Official router for Vue.js 2
      vuex - 3.5.1 -- state management for Vue.js
      electron - Not installed
      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.11.6 -- Babel compiler core.
      webpack - 4.44.1 -- 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 - 5.1.4 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
      register-service-worker - 1.7.1 -- Script for registering service worker, with hooks
      typescript - 3.9.5 -- TypeScript is a language for application scale JavaScript development
    
    Quasar App Extensions
      @quasar/quasar-app-extension-testing - 1.0.0 -- A Quasar App Extension for managing Test Harnesses
      @quasar/quasar-app-extension-testing-unit-jest - 1.1.0-beta.7 -- A Quasar App Extension for running Jest tests
      @quasar/quasar-app-extension-testing-quality - 1.0.0-beta.8 -- A Quasar App Extension for Code Quality
    


  • Thanks, I’ve sorted it out in the end. The issue was in my “presets” within babel.config.js.



  • @metalsadman apologies, I’ve run into some more issues.

    My babel.config.js was beforehand as such:

    const fs = require('fs-extra');
    let extend = null;
    
    /**
     * The .babelrc file has been created to assist Jest for transpiling.
     * You should keep your application's babel rules in this file.
     */
    
    if (fs.existsSync('./.babelrc')) {
        extend = './.babelrc';
    }
    
    module.exports = {
        presets: [
            [
                '@babel/preset-env',
                {
                    'modules': 'commonjs',
                    'targets': {
                        'node': 'current'
                    },
                    'useBuiltIns': 'entry',
                    'corejs': {
                        'version': 2
                    }
                }
            ],
            '@quasar/babel-preset-app'
        ],
        extends: extend,
        ignore: ['node_modules']
    };
    

    It contained a bit needed to make the Jest tests work.
    I’ve amended to look like this to fix the Uncaught TypeError on application loading mentioned above:

    const fs = require('fs-extra');
    let extend = null;
    
    /**
     * The .babelrc file has been created to assist Jest for transpiling.
     * You should keep your application's babel rules in this file.
     */
    
    if (fs.existsSync('./.babelrc')) {
        extend = './.babelrc';
    }
    
    module.exports = {
        presets: [
            '@quasar/babel-preset-app'
        ],
        extends: extend,
        ignore: ['node_modules']
    };
    

    However, now Jest does not play nice any more while running unit tests, and I get errors such as this:

    Cannot find module 'core-js/modules/es7.object.get-own-property-descriptors' from 'src/components/CrossoverDesign.vue'
    

    or

    Cannot find module 'core-js/modules/es6.array.find' from 'src/components/StudyArmsPicker.vue'
    

    Trying to use the following presets:

    presets: [
            [
                '@quasar/babel-preset-app',
                {
                    useBuiltIns: 'entry',
                    corejs: {
                        version: 3
                    }
                }
            ]
        ]
    

    did not help at all. How should properly configure this?



  • @Massi I don’t know the config for those, maybe ask this in the testing discord channel.



  • Thanks, I will ask there


Log in to reply