Questions tagged [react-lazy-load]
95 questions
2
votes
1 answer
What is the point of single page large applications if you have to split your code to improve performance?
I've been reading about lazily loading code in react.
With lazy loading, only the needed code will be loaded and doing so,
your initial loading will be faster (because you will load much less
code) and your overall speed will be much faster being…
Rhea Sanjan
- 33
- 5
2
votes
0 answers
React.lazy returning 404 error when attempting to lazy load components
I'm attempting to convert my React application to lazy load components dynamically to increase the Lighthouse performance score and have been following the React Code Splitting Documentation in order to do so.
Following the documentation, I…
Sean Moody
- 320
- 1
- 2
- 14
1
vote
1 answer
NX and react router lazy doesn't split bundle
I am trying to use react router with lazy loading. I still see the bundle being downloaded as one main.js. The router resides in an nx application and the routes that should be lazy loaded are in nx libraries.
The app has something like this:
const…
Danny
- 11
- 1
1
vote
0 answers
react lazy with async dynamic imports causes wrong orders in deployment
I'm using react, typescript. This is part of my code using react lazy.
import {lazy} from 'react';
const LAZY_PANELS = {};
const PANELS = {
'home': () => import('./home'),
'settings': () => import('./settings'),
'profile': () =>…
SeyDal
- 23
- 4
1
vote
0 answers
React.lazy used in the Functional Component create a strange effect of keep loading
the page I want to navigate to .
const MobileHome = () => {
//these are the sub.components i want to display in this component
const ChatHome = React.lazy(() => import("./ChatHome"));
const MeHome = React.lazy(() => import("./MeHome"));
…
Prolewin Batholomew
- 11
- 2
1
vote
1 answer
TS2349 when import lazy-loading in React
I am trying to refactor a React 18 app to use lazy loading as described in the docs:
The best way to introduce code-splitting into your app is through the
dynamic import() syntax.
My original code (working):
import addMobileAppStartupListeners…
Patrick Kenny
- 4,515
- 7
- 47
- 76
1
vote
1 answer
How to Lazy load webView in react native?
I have Implemented using React.lazy and Suspense in react-native but it seems it does not working with react-native.
I had followed This Youtube Video
Basicaly I want to embed Youtube Player in react native app using react-native-youtube-iframe…
Udbhav Vikram Singh
- 41
- 5
1
vote
0 answers
Reduce page chunk size by loading the component only that is required
I have a NAV header component called GlobalHeaderV2.tsx which has a Search component. Currently on page load both the components are being rendered increasing the page size.
Search Component renders the icon (Pic 1) and on click the auto complete…
Yeshwanth Kumar
- 81
- 1
- 1
- 8
1
vote
1 answer
react-lazy-load-image-component Getting Error "TypeError: Cannot read properties of undefined (reading 'prototype')"
I'm using the React Testing Library, and when the component I'm rendering contains a LazyLoadImage from "react-lazy-load-image-component" I get the error "TypeError: Cannot read properties of undefined (reading 'prototype')".
Here's a picture of the…
Wisnu
- 337
- 4
- 16
1
vote
0 answers
How to override maxSize/priority for chunk named in dynamic import
I have a chunk I'm naming in a dynamic import as follows:
const FileAttachments = React.lazy(() => import(
/* webpackPrefetch: true */
/* webpackMode: "lazy" */
/* webpackChunkName: "file-icons" */
"Widgets/FileAttachments"));
This…
Peter Gerdes
- 2,288
- 1
- 20
- 28
1
vote
1 answer
Lazy chunk Failed: Restore/Reload failed split chunk with react lazy and suspense in react 18.2.0
I have migrated my code in react 18.2.0. I am using
Code splitting using suspense and lazy.
Single page application
Split chunk loaded perfetly and Happy flow is working. Below is the code
let LoginPageM = React.lazy(() => import('./LoginPageM'…
Himanshu Gupta
- 382
- 4
- 15
1
vote
1 answer
Issue loading dynamic chunk in React application using webpack
I am facing one issue where my react app is not able to load the lazily loaded chunk(Error: loading chunk 0 failed). Upon checking, I found the chunk is being requested from the relative url that is localhost.com:8000/chunk.js, instead of requesting…
Aman Pandey
- 336
- 1
- 3
- 12
1
vote
0 answers
React Functional component lazy loading implementation
We have a simple React application where the parent component (ShopItem) renders multiple child components (CommentCard) in a loop.
const ShopItem = ({ item }) => {
const [comments, setComments] = useState(item.comments)
return (
…
Alex
- 1,406
- 2
- 18
- 33
1
vote
1 answer
How can I import multiple functions or components from a package using react lazy
I have to replace the usage of loadable with react.lazy
This is how it was with loadable:
const loadReactIntl = () => import('react-intl');
export const intlProvider = () => Loadable({
loader: () => loadReactIntl(),
render(loaded, props) {
…
adabuyaman
- 107
- 1
- 10
1
vote
1 answer
React router with lazy and Suspense always falls back on wildcard route on page refresh
I implemented lazy loading routes with lazy and suspense in order to reduce the main bundle size.
However, I run into the issue that, when refreshing the page, the app always end up in the wildcard route instead of reloading at the current location…
Pierre Burton
- 1,954
- 2
- 13
- 27