Uncaught TypeError on application loading after upgrading to v1.14

Massi

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+

metalsadman

@Massi update your @quasar/app too https://quasar.dev/quasar-cli/app-upgrade-guide

Massi

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

Massi

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

Massi

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

Massi

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

metalsadman

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

Massi

Thanks, I will ask there

No More Posting New Topics!

Uncaught TypeError on application loading after upgrading to v1.14