Error when lazy loading a Vue component in a TSX file

Good day!

I’m trying to lazy load a custom Vue component in another component that’s using a TSX Class syntax, but I keep getting an error stating:

ERROR in /Development/vue-lazy-load-tsx-error/src/App.tsx
18:9 JSX element type 'Promise<typeof import("/Development/vue-lazy-load-tsx-error/src/components/hello-world")>' is not a constructor function for JSX elements.
  Type 'Promise<typeof import("/Development/vue-lazy-load-tsx-error/src/components/hello-world")>' is missing the following properties from type 'Element': isRootInsert, isComment
    16 |       <div id="app">
    17 |         /* This will cause a TypeScript error */
  > 18 |         <HelloWorld />
       |         ^
    19 |       </div>
    20 |     );
    21 |   }

To reproduce this error, I’ve created a new repository at petervmeijgaard/vue-lazy-load-tsx-error. The most important file to look at is the src/App.tsx-file.

I’ve searched the forums, StackOverflow and GitHub for a possible solution, but without any success. It would be awesome if someone could help me out with this somewhat annoying issue.

[vertic4l]

@petervmeijgaard your comment tells me everything.

1. You never build a large enterprise platform.
2. You didnt touched the pain points of vue right now.
3. And you seem to be junior or lazy programmer. Otherwise you wouldnt say that Typescript is Overhead.

But hey… Go on and fail. And then have a look at reactjs + tsx

[petervmeijgaard]

@mathewcst I wasn’t able to fix the problem, unfortunately. I actually dropped the TypeScript support from my application 🙃

If you find the solution, I would be happy to know how to fix it.