CODEWITHSUNDEEP
vue.jseslintvuejs3dynamic-importasync-components
Lord Bo
Lord Bo

Reputation: 3308

Vue.js 3 template- literals error Cannot read property 'range' of null

I'm trying to dynamically import an async component in Vue.js.

<template>
  <MyAsync></MyAsync>
</template>

<script>
import { defineAsyncComponent } from 'vue';

const component = 'lorem-ipsum-4';

export default {
  name: 'Article',
  components: {
    MyAsync: defineAsyncComponent(() => import(`@/articles/${component}.vue`)),
  },
};
</script>

This however does not work and produces the following error.

Failed to compile.

./src/views/Article.vue
Module build failed (from ./node_modules/eslint-loader/index.js):
TypeError: Cannot read property 'range' of null
Occurred while linting /project/src/views/Article.vue:13
    at SourceCode.getTokenBefore (/project/node_modules/eslint/lib/source-code/token-store/index.js:298:18)
    at checkSpacingBefore (/project/node_modules/eslint/lib/rules/template-curly-spacing.js:60:42)
    at TemplateElement (/project/node_modules/eslint/lib/rules/template-curly-spacing.js:119:17)
    at /project/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/project/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/project/node_modules/eslint/lib/linter/node-event-generator.js:254:26)
    at NodeEventGenerator.applySelectors (/project/node_modules/eslint/lib/linter/node-event-generator.js:283:22)
    at NodeEventGenerator.enterNode (/project/node_modules/eslint/lib/linter/node-event-generator.js:297:14)
    at CodePathAnalyzer.enterNode (/project/node_modules/eslint/lib/linter/code-path-analysis/code-path-analyzer.js:634:23)
    at /project/node_modules/eslint/lib/linter/linter.js:936:32
    at Array.forEach (<anonymous>)
    at runRules (/project/node_modules/eslint/lib/linter/linter.js:931:15)
    at Linter._verifyWithoutProcessors (/project/node_modules/eslint/lib/linter/linter.js:1157:31)
    at /project/node_modules/eslint/lib/linter/linter.js:1281:29
    at Array.map (<anonymous>)

Static import however works just fine:

<template>
  <MyAsync></MyAsync>
</template>

<script>
import { defineAsyncComponent } from 'vue';

export default {
  name: 'Article',
  components: {
    MyAsync: defineAsyncComponent(() => import('@/articles/lorem-ipsum-4.vue')),
  },
};
</script>

This is a Vue.js v3 project created using Vue CLI.

A (quite minimal) example can be found at github

Is there a way to make the dynamic import work?

Upvotes: 4

Views: 2712

Answers (3)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

After some debugging I found that it's an eslint issue template-curly-spacing, to solve it I added the file .eslintrc to the project root with following content :

{
    "plugins": [
        "vue"
      ],
    "rules" : {
        "template-curly-spacing": ["error", "never"]
      }
}

Upvotes: 1

Oleksii Zelenko
Oleksii Zelenko

Reputation: 2701

Replace @ on a path consisting of ./

export default {
  name: 'Article',
  components: {
    MyAsync: defineAsyncComponent(() => import(`./articles/${component}.vue`)),
  },
};

It worked for me

Upvotes: 0

Ian Cho
Ian Cho

Reputation: 107

export default {
  name: 'Article',
  components: {
    MyAsync: defineAsyncComponent(() => import('@/articles/'+ component +'.vue')),
  },
};

But, I don't think this is good.

Upvotes: 3

Related Questions