title: Vue.js 3 template- literals error Cannot read property 'range' of null
body: <p>I'm trying to dynamically import an async component in Vue.js.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;MyAsync&gt;&lt;/MyAsync&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { defineAsyncComponent } from 'vue';
  
  const component = 'lorem-ipsum-4';
  
  export default {
    name: 'Article',
    components: {
      MyAsync: defineAsyncComponent(() =&gt; import(`@/articles/${component}.vue`)),
    },
  };
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This however does not work and produces the following error.</p>
  <pre><code>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 (&lt;anonymous&gt;)
      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 (&lt;anonymous&gt;)
      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 (&lt;anonymous&gt;)
  </code></pre>
  <p>Static import however works just fine:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;MyAsync&gt;&lt;/MyAsync&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { defineAsyncComponent } from 'vue';
  
  export default {
    name: 'Article',
    components: {
      MyAsync: defineAsyncComponent(() =&gt; import('@/articles/lorem-ipsum-4.vue')),
    },
  };
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This is a Vue.js v3 project created using Vue CLI.</p>
  <p>A (quite minimal) example can be found at <a href="https://github.com/bschnitz/vue-template-literals" rel="nofollow noreferrer">github</a></p>
  <p><em>Is there a way to make the dynamic import work?</em></p>