Dynamic/Lazy Loading component not working

  • Re: dynamic/lazy component import with runtime generated path not working with v1

    I’m in the process of migrating from Nuxt project to Quasar. Many things already work, but I have a problem with it.

    My code

    computed: {
        componentFile() {
          return () => this.componentName === ''
            ? import('./AppComponents/emptyComponent.vue')
            : import(`./AppComponents/${this.componentName}.vue`);


    Module build failed (from ./node_modules/eslint-loader/index.js):
      TypeError: Cannot read property 'range' of null
      Occurred while linting D:\Workspace\p1\qfrontend\src\components\PreviewComponent.vue:23

    In Nuxt this is working properly.

  • Admin


    This problem has nothing to do with Quasar.
    Are you using ESLint v6 by any chance? Cause the solution to the babel issue (babel issue, not Quasar issue), is to pin @babel/parser to a specific version in your app (through yarn instead of npm):

    // package.json
    "resolutions": {
        "@babel/parser": "7.7.5"

  • Hi

    The reason is @babel/parser@7.8.4 which is installed as we generate a new quasar project.

    There are two solutions.

    Change inline declarations

    : import(`./AppComponents/${this.componentName}.vue`);


    : import('./AppComponents/' + this.componentName + '.vue');

    It works with @babel/parser@7.8.4

    Delete folder ./node_modules/babel/parser
    Install @babel/parser@7.7.5:
    Add in package.json “@babel/parser”: “7.7.5”

    "devDependencies": {
        "@babel/core": "^7.6.2",
        "@quasar/app": "^1.0.0",
        "@babel/parser": "7.7.5",
        "@vue/eslint-config-standard": "^4.0.0",
        "babel-eslint": "^10.0.1",
        "eslint": "^5.10.0",
        "eslint-loader": "^2.1.1",
        "eslint-plugin-vue": "^5.2.2",
        "sass": "^1.25.0",
        "sass-loader": "^8.0.2"
    npm install

    or directly

    npm install @babel/parser@7.7.5

    Works with inline declarations.

    Thank you for helping me find the reason.

Log in to reply