Questions tagged [react-suspense]

194 questions
2
votes
0 answers

Suspense boundary error of renderToString with GatsbyJS and React 18 on production build

I am trying to code splitting and lazy loading in my website but I am getting an error about Suspense boundary. Error: Uncaught Error: The server did not finish this Suspense boundary: The server used "renderToString" which does not support…
lezan
  • 759
  • 6
  • 23
2
votes
1 answer

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, everywhere... they were exporting everywhere so…
2
votes
0 answers

How to use React Suspense without 504: GATEWAY_TIMEOUT

I'm using Recoil but it's resulting in the following warning: Warning: Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls…
steven
  • 51
  • 3
2
votes
1 answer

React Suspense not working with useEffect/setTimeOut

I have suspense like this in the App file }> Then I have an useEffect/setTimeOut: const DelayedFallback = () => { const [loaded, setLoaded] = useState(false); useEffect(() => { setTimeout(() =>…
2
votes
0 answers

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' const Map = lazy(() =>…
2
votes
1 answer

Prevent react suspense hide the content

I have googled, watched lot of videos to implement something like youtube loading as in the screenshot below. So I have route based naviation where I have lazy loads so everything works fine but while loading the content react suspense will make…
Ashiq Dey
  • 309
  • 5
  • 18
2
votes
1 answer

React Router with Suspense failing to render with React Router v5

We are trying to use this kind of construct, so that a component rendered through React Router can be Lazy loaded using React Suspense: ...}> …
Dan
  • 1,249
  • 2
  • 16
  • 31
2
votes
2 answers

Differentiate component error vs React.lazy error in eror 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() Have a Error boundary wrapper above Suspense. There…
2
votes
1 answer

How to integrate initial data fetching from a remote API, with React.Suspense?

I'm building a new React app, on top of an existing boilerplate. It uses lazy loading, combined with React.Suspense. Problem is, that like in most React apps, i need to fetch some initial meta data from the server, each time the app loads. Let's…
i.brod
  • 3,993
  • 11
  • 38
  • 74
2
votes
1 answer

How to update redux store with react suspense

In following code, Sample uses a async function to get some data. I will be using that data to update the Redux store so any component can access the username within the application. const resource = fetchData(); function Sample() { // throws a…
s1n7ax
  • 2,750
  • 6
  • 24
  • 53
2
votes
0 answers

React compatibility with IE11 - Const must be initialized - Lazy - Suspense

I've got a React project that needs to be compatible with Internet Explorer 11 and after applying some compatibility polyfills we still get the error. SCRIPT1053: Const must be initialized . It seems to be caused by the lazy function but I…
2
votes
0 answers

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 this works. I have 2x tabs, we can call them tab1…
TomTom
  • 31
  • 1
2
votes
1 answer

React Suspense is not working as intended

I want to render fallback component when my Powers is being fetched/undefined. I implemented React.Suspense in my logic using the code: Loading

}>
and my RoutesPowers is const Powers = [ ...…
Muneeb Naveed
  • 83
  • 1
  • 10
2
votes
0 answers

React Suspens/lazy code-splitting is broken after configuring TypeScript in project using webpack/TerserPlugin

Operating System: MacOS Catalina 10.15.6 Node Version: v12.18.3 NPM Version: 6.14.7 webpack Version: 4.44.1 terser-webpack-plugin Version: 3.1.0 Expected Behavior With TypeScript (just configured in existing React-project), I expected that…
bannndi
  • 21
  • 4
2
votes
0 answers

Getting whitescreen in Cordova application if I implementing React lazy loading with Suspense

Getting whitescreen in Cordova application if I implementing React lazy loading with Suspense if I remove lazy loading it is working fine.
BHAR4T
  • 338
  • 3
  • 14