Dynamic/Lazy Loading component not working



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

    Hi,
    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`);
        }
      }
    

    Error

    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

    Hi,

    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.

    First.
    Change inline declarations

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

    for

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

    It works with @babel/parser@7.8.4

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