Utilizing dynamic imports with Vue files in TypeScript in a recursive manner

Question

Utilizing dynamic imports with Vue files in TypeScript in a recursive manner

I ran into an issue while trying to dynamically import a single file vue component within itself in TypeScript. The error message I received was:

/Users/lilei/Desktop/designer-web/node_modules/fork-ts-checker-webpack-plugin/lib/service.js:22
        throw error;
        ^

RangeError: Maximum call stack size exceeded
    at getSymbolLinks (/Users/lilei/Desktop/designer-web/node_modules/typescript/lib/typescript.js:31794:32)
    at getDeclaredTypeOfTypeAlias (/Users/lilei/Desktop/designer-web/node_modules/typescript/lib/typescript.js:36457:25)

...

The file in question is named myComp.vue

<template>
  <div>
    <my-comp v-if="someCondition"></my-comp>
  </div>
</template>
<script lang="ts">
export default Vue.extend({
  data(){
    return{};
  },
  components:{
    myComp:()=>import('./myComp.vue')//Which is the name of current file, this is a official usage for dynamic loading vue component, and every thing is right in native JavaScript(not in TypeScript)
  }
})
</script>

It seems that there are recursive tasks being executed during TypeScript compilation, leading to the error. However, I have ensured that the component does not infinitely nest itself by controlling the someCondition in my logic. How can I dynamically import a .vue file recursively in TypeScript?

vue doc

typescript vue.js vue-component

Answer 1

Answer №1

When you include myComp within itself, it leads to an endless recursion resulting in a StackOverflow error.

To resolve this issue, you can assign a name to your component and refer to it by that name without the need for importing the component again. Here is an example:

 <template>
  <div>
   <my-comp v-if="someCondition"></my-comp>
  </div>
 </template>


<script lang="ts">
 export default Vue.extend({
   name: 'my-comp',
   data(){
    return{};
   },
   components:{
   }
 })
</script>

Additionally, consider changing Vue.extend to Vue.component.

Answer 2

When you include myComp within itself, it leads to an endless recursion resulting in a StackOverflow error.

To resolve this issue, you can assign a name to your component and refer to it by that name without the need for importing the component again. Here is an example:

 <template>
  <div>
   <my-comp v-if="someCondition"></my-comp>
  </div>
 </template>


<script lang="ts">
 export default Vue.extend({
   name: 'my-comp',
   data(){
    return{};
   },
   components:{
   }
 })
</script>

Additionally, consider changing Vue.extend to Vue.component.

Answer 3

Answer №2

Global registration of the component is essential in order to use it by its assigned name.

Answer 4

Global registration of the component is essential in order to use it by its assigned name.

Answer 5

Answer №3

It seems that the problem was related to TypeScript, but it has since been resolved.

If you are facing this issue, I recommend updating your system.

Answer 6

It seems that the problem was related to TypeScript, but it has since been resolved.

If you are facing this issue, I recommend updating your system.

Utilizing dynamic imports with Vue files in TypeScript in a recursive manner

Answer №1

Answer №2

Answer №3

Similar questions

Add a unique class to an element within a main component

I encountered a TypeError [ERR_UNKNOWN_FILE_EXTENSION] while trying to run the express server. It seems to be caused by an unfamiliar file extension ".ts"

Error message indicating that `vue-loader` could not be located when attempting to run `npm run

Troubleshooting a Vue.js formatting problem in Visual Studio 2019

In my Vue application, I've noticed that when I implement a select tag, the drop-down icon mysteriously vanishes in Chrome

Encountered difficulties when trying to incorporate SCSS into my rollup build

When attempting to access a specific video, the link redirects to a different URL where the video automatically begins playing. However, the server does not return the expected "disposable content type."

Determine the appropriate data type for an object property using its key

Ensuring Data Consistency: Using TypeScript to Strongly Type Arrays with Mixed Variable Types

What is the best approach for developing an npm package containing multiple Vue directives? Should each directive have its own separate package, or should they

Working with Yarn and Webpack: Incorporating a TypeScript .ts file from an external Node directory not controlled by Yarn/Webpack

The use of '-' in v-bind:style within Vue.js

Extracting decimal numbers from JSON data

Exploring Angular and Typescript - attempting to adjust cursor position for multiple child elements within a contenteditable div despite researching numerous articles on the topic

Is there a way to customize the text color highlight for a specific react component only?

The Element type does no feature a Typescript property

What could be the reason behind the Vue property being globally undefined in the component at the time of mounting?

What circumstances allow @Inject to be optional in Angular?

The element is implicitly assigned an 'any' type as the expression of type 'any' cannot be used to index a type with createStyles

The styles from bootstrap.css are not displaying in the browser