Dynamic/Lazy Loading component not working

[Manieck]

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.

[metalsadman]

@Manieck check https://github.com/babel/babel-eslint/issues/799#issuecomment-570790316.

[rstoenescu]

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"
  }

[Manieck]

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.