Error when lazy loading a Vue component in a TSX file
See original GitHub issueGood 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.
Issue Analytics
- State:
- Created 4 years ago
- Comments:11 (1 by maintainers)
Top Results From Across the Web
Module not found when trying to lazy load component file in Vue
I tested a solution for using dynamic component and lazy load them in Vue-js version 2. I'm not sure that it works for...
Read more >Lazy loading components and code splitting in Vue.js
Open it up at http://localhost:8080/ in your browser and open developer tools. Click on the network section and choose the JS tab.
Read more >How to Solve the Chunk Load Error in JavaScript - Rollbar
Whenever there's an error observed in dynamically fetching helper JavaScript files known as Chunks, a ChunkLoad Error is thrown.
Read more >Suspense | Vue.js
The <Suspense> component gives us the ability to display top-level loading / error states while we wait on these nested async dependencies to...
Read more >[Solved]-Vue.js lazy loading-Vue.js - appsloveworld.com
Following from the comments. You need to specify the publicPath. Here's a small version of a working webpack.mix.js file tested on laravel 5.5...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@petervmeijgaard your comment tells me everything.
But hey… Go on and fail. And then have a look at reactjs + tsx
@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.