79 questions
0
votes
1
answer
2k
views
I'm getting following error "Cannot read properties of undefined (reading 'then') at lazyInitializer at resolveLazy " while using React Lazy [closed]
This is the Error I'm getting
//This is my code where I used the react lazy in React functional component.
import React,{Suspense, lazy} from "react";
import { BrowserRouter, Routes, Route } ...
- 21
2
votes
1
answer
461
views
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 (...
- 6,885
4
votes
1
answer
2k
views
Is it possible to dynamically import/lazy load a component from an URL that wasn't in the original build?
So I have a setup where I want to allow custom components to be created and referenced via an API fetch call made by my react client site.
I know using dynamic imports and React.lazy these can be ...
0
votes
0
answers
249
views
Failed to fetch dynamically imported module from portal component
I create a portal component(InboxModal). and I want to show it when I click a button with lazy import.
but when I call that I got this error:
Failed to fetch dynamically imported module: http://127.0....
- 1,001
3
votes
1
answer
940
views
Debugging webpack code splitting with React.lazy
I am using React.lazy to try to split off some code from my main application, but it's not working the way I expect and I'm having trouble figuring out how to debug.
My code looks something like:
// ...
- 507
2
votes
0
answers
977
views
React Three Fiber, Three.js and Drei: lazy import models using components gets re-rendered to infinity
I'm trying to lazy import JSX models in React Three Fiber.
I have a couple of JSX models which incorporate useGLTF() from drei, to load the actual .gltf/.glb model, as nodes and materials, like in the ...
- 21
1
vote
1
answer
827
views
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 ...
14
votes
1
answer
5k
views
How does react suspense determine if a component is ready to render
I am using <React.Suspense> for data fetching like in this blog post.
From the react docs
Suspense lets your components wait for something before they can render.
And even better explained in ...
- 900
2
votes
1
answer
178
views
React load only one scss based on variable
UPDATE: I figured out what was happening and there was no way for anyone to answer because a lot of missing information - like where were the light and dark variable files being exported to. Answer, ...
- 325
1
vote
0
answers
395
views
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 ...
- 121
3
votes
0
answers
3k
views
Chunk js file failing (404 Not found) for initial load only
I'm trying to implement code splitting using react JS + Next JS to reduce Initial load time of the page. But when I start my UI Service and try to run the webpage, a chunk file is created successfully ...
- 31
1
vote
2
answers
692
views
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 ...
- 347
3
votes
0
answers
2k
views
React Lazy Import does not include CSS files
I have a react app setup with CRA.
In my App.js I would load my css files, components and define my routes.
import 'semantic-ui-css/semantic.min.css';
import './css/global.css';
import './index.css';
...
- 5,597
1
vote
0
answers
299
views
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" */
/* ...
- 3,113
0
votes
1
answer
3k
views
Next/React lazy load not working as expected for components
Hi all I am new in Next/react I am trying to lazy load one component. What my expectation is that component must loads when it is visible in user view port or once a page is fully rendered.
Its html ...
- 646
1
vote
1
answer
1k
views
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 ...
- 366
1
vote
0
answers
473
views
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]...
- 1,496
4
votes
1
answer
3k
views
Webpack and React.lazy not splitting out dynamic import. Why?
I'm obviously quite confused about this but, I have a module FileAttachments which imports (and no one else does) a fair number of other sizeable modules. I'd expect that when I changed that import ...
- 3,113
3
votes
2
answers
2k
views
Styles don't apply when using React.lazy
The problem is that when I start using React.lazy, input styles are not rendering correctly. With lazy I get default Antd input styles, not mine. What's the problem and how I can fix it? You can see ...
user18762523
1
vote
1
answer
885
views
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:...
- 107
3
votes
0
answers
544
views
How to code split Map component in react-map-gl?
I'm trying to codesplit a react-map-gl Map component into its own chunk using Lazy,Suspense.
This is my component.
import 'mapbox-gl/dist/mapbox-gl.css'
import React, {lazy, Suspense} from 'react'
...
1
vote
1
answer
2k
views
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 ...
- 2,094
0
votes
1
answer
2k
views
React.lazy and custom protectedRoute with router-react-dom, how do I get it to work?
I'm new to react and is trying out the React.lazy and Suspense imports, and I just have to say, I love them!!! My website went from 45% in performance up to 50-60% and that is without optimizing ...
- 1
1
vote
1
answer
598
views
Tweaking react lazy loading webpack output to combine two webapps
We have a React Webapp where every route is lazy loaded:
const HomeScreen = React.lazy(() => import('../components/HomeScreen/HomeScreen'));
This, as expected, generates various JS files during a ...
- 13.4k
4
votes
2
answers
4k
views
Implement lazy loading in nested routes
I'm trying to add implement lazy loading in react app which works well in top-level routes. But I also want the <Suspense></Suspense> and provide a fallback for nested routes. According to ...
- 151
3
votes
2
answers
2k
views
Is it possible to inject a variable value into a javascript comment?
TL;DR: is it possible to inject constant variables (that won't change during runtime) in comments
I've come across a very unique situation where I need my comments to have a specific value in them.
I'...
- 10.8k
2
votes
2
answers
3k
views
Differentiate component error vs React.lazy error in error boundary
I have a question regarding the React.lazy() feature. I developing a feature and i am stuck at a point.
My scenario
I have a set up where i am
Loading bunch of components lazily using React.lazy()
...
- 3,212
3
votes
0
answers
717
views
React Version Upgrade Throw Error on React Lazy or Suspense
So I am working on an ReactJs App which was using [email protected] in the Start. But Recently we have to update our App to the latest version of React. By Upgrading I am facing issue with React Lazy and ...
- 123
1
vote
0
answers
410
views
How to code split multiple React routes into one file?
I currently have the following lazy component imports:
const LazyDashboard = React.lazy(() => import('./pages/app/Dashboard'));
const LazyProfile = React.lazy(() => import('./pages/app/Profile'))...
- 1,965
1
vote
1
answer
1k
views
When importing a module from node_modules that uses route based lazy loading in create-react-app, should code splitting work in the same way?
I used create-react-app (react ^17.0.2, react-scripts 4.0.3) to knock up a simple application which uses route based lazy loading to perform code splitting. When I build this application I see ...
- 21
1
vote
1
answer
2k
views
Lazy-loading React components under SSR
I have a ReactJS app built with react-lazy-load-image-component in order to improve performance.
My code wraps components that take time to initialize with something like:
<h2 className={styles....
- 2,238
1
vote
2
answers
2k
views
Testing lazily initialized components with Jest
I am trying to test my lazy initialized component, made with react-lazy-load-image-component using JestJS. Below are my tests:
const viewModel = new VehicleViewModel(vehicleData, {});
const ...
- 2,238
0
votes
1
answer
530
views
React lazy loading and server set up
From what I understand, React lazy will split your bundle into multiple files. Let's say I use lazy loading with React.router. If our server is set up to send the whole bundle through a GET request, ...
- 104
1
vote
3
answers
2k
views
Testing react-lazyload in React testing library
I am unit testing a component that makes use of react-lazyload to lazyload stuff. While rendering in my unit test, I noticed that the Lazyload is not rendering the content and its placeholder is being ...
- 11k
2
votes
2
answers
9k
views
Property 'default' is missing in type 'typeof import("...")' but required in type '{ default: ComponentType<any>; }'
TypeScript error when I'm trying to import one React component into another using React.lazy
templates/BugReport/index.tsx
import { useEffect, useContext } from 'react';
import BugReportStatic from '@...
- 256
0
votes
0
answers
731
views
lazysizes is not lazy loading image
lazysizes seems to simple to use, but I can't get it to actually lazy load an image with react... it loads the bottom image thats out of the viewport before it's scrolled into view, as you can see in ...
- 2,353
0
votes
1
answer
713
views
How to add react-spring animation component to React lazy loading?
I try use React lazy and Suspense loading. I have simple login page and animation page for lazy loading. But if I refresh or open this page I cant see animation. But when write fallback = <p> ...
3
votes
0
answers
854
views
React.lazy + Suspense or alternative?
in my app, I have two large components which include a lot of panels, and every panel has a few or more other components. Which takes a long time to render. I guess 1-2sec.
A simple example of how ...
- 41
0
votes
1
answer
361
views
React loadable issues
So the problem I am facing is this. When I load the page, the stylings of the Header component are not being rendered, but when I remove the load Logic they are. The problem might lie in Header ...
- 482
3
votes
5
answers
3k
views
React lazy recursive import
I have requirement where I need to load component from dynamic folders. For example I have following folders inside components
components
-default
-component-one
-component-two
...
- 3,212
2
votes
2
answers
727
views
React Code Splitting in React.createElement()
I have pages or large components that need to be rendered after the main page loads. I have them lazily loaded but am getting an error when I use in createElement():
LazyExoticComponent | ...
user15528054
0
votes
1
answer
520
views
How do I set the target location for a React Lazy chunk using Laravel Mix?
So my React Lazy setup works great, I use Laravel Mix instead of the normale Webpack config. But after running, the (named) chunks are all put in the public folder, instead of the public/js folder. ...
- 1
5
votes
0
answers
1k
views
react lazy uncaught undefined Error occured
I'm trying to adopt react-lazy in my source. But I don't know what is wrong..
I Checked Two Things.
Check export way of homeContainer Component. It's default export So It doesn't effect about
using ...
- 169
1
vote
1
answer
530
views
Does React.lazy() works with Create React App?
I have created one React App using npx create-react-app my-app cmd (React 17 version). Now
Well, I just tried to replace a classic
import Component from './Component'
to
const Component = React.lazy(...
- 488
3
votes
2
answers
2k
views
Lazy load a module using React lazy?
Is it possible to load a heavy module using React.lazy?
I have a very heavy raw file parsed as string (around 10 mb) and I would like to lazy load it.
After trying:
const Module = React.lazy(() =>
...
- 6,892
0
votes
0
answers
231
views
React lazy not working and not showing any error in console
I'm a beginner to React and trying to use React.lazy but failed and it's not showing any error in console. Please help
import React, {Suspense } from "react";
import { Route, NavLink, Switch,...
- 2,180
0
votes
0
answers
1k
views
Using React Leaflet with lazy loading
I am using React Leaflet. React and everything is working fine, but when I try to use React lazy loading the map just not render or render a small square as shown below. It is just a small box.
<...
1
vote
0
answers
334
views
React lazy() - lazy load component when sibling component is loaded
(Simplified example): I have Component A and Component B, which are sibling components and are both lazy-loaded in App.js:
import { lazy, Suspense } from 'react';
const A = lazy(() => import('./A'))...
- 1,279
3
votes
2
answers
4k
views
Lazy load util function in React
I want to run a JS function from a module that loaded asynchronously (that exposed by module federation)
and to use the return value in a React component.
For example, setting the visibility of some ...
- 359
1
vote
1
answer
666
views
Lazy loading: Can't load dynamic module
I try to load dynamically in my dashboard using React.lazy() and Suspense component. It works really well with an hardcoded value, but not with a variable. I'm a little bit speechless right now. ...
- 1,057