Questions tagged [react-loadable]

137 questions
1
vote
1 answer

React loadable splitted files are using wrong path with react router

I just tried to add react-loadable to my project, and it works fine until I access my admin pages. I currently have webpack 4, react-router 4.2.2 and react-loadable 5.4.0. I have something like this in my approuter:
peter
  • 257
  • 1
  • 3
  • 15
1
vote
0 answers

react loadable is not working with css module

I am trying to do code split with react-loadable library. It indeed splits code base on the point that I setup. However, all the css file is included into .js file which is not rendering in server side. In client side, it need to fetch like 100…
fiddlest
  • 1,262
  • 2
  • 17
  • 42
1
vote
1 answer

How does React Loadable handle code used in multiple bundles?

Im doing code splitting with React Loadable in my Create React App https://github.com/jamiebuilds/react-loadable https://github.com/facebook/create-react-app How does React Loadable use code that is used in multiple bundles? Say I have 2 bundles,…
Evanss
  • 23,390
  • 94
  • 282
  • 505
1
vote
1 answer

Import component css chunk client side with react-loadable

How CSS files will load dynamically using react-loadable library on client side? I have included react-loadable library on both server and client side rendering, from server-side rendering everything works fine but client side, how CSS will load…
Nithish
  • 369
  • 1
  • 8
  • 20
1
vote
2 answers

Lazy loading: react-loadable is failing to load components in other folders

Using Create-react-app, I want to lazy load some of my components, this is working fine as long as the components are in the same folder as my main component (where I define the routes) however as soon as I want to load a component from another…
Asha
  • 3,871
  • 7
  • 44
  • 57
1
vote
1 answer

React-Loadable only creates first component chunk

I seriously don't understand why i'm facing such issue with React-Loadable while code splitting in create-react-app build. I'm trying to split code via routes and followed the basic rules mentioned in the docs and other places but only the first…
tanuj upreti
  • 123
  • 1
  • 12
1
vote
0 answers

How to hydrate with react application that uses react-router after load?

I was trying to use code-splitting with react-router and found that react-loadable is adviced in multiple places (https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/code-splitting.md and…
1
vote
1 answer

Code splitting with react-loadable slow down performance?

I tried to code split with react-loadable by route. It seems to slow down performance since there will be more files to load. I know that the reason why it is general practice to make one bundle file is that small multiple files slow down on http 1.…
fiddlest
  • 1,262
  • 2
  • 17
  • 42
1
vote
1 answer

Can react-loadable be used in create-react-app server-side?

I am attempting to do some code-splitting in my create-react-app application that utilizes server side rendering. I am utilizing 'react-loadable` to do the code-splitting: https://github.com/thejameskyle/react-loadable As of now I simply have split…
Gurnzbot
  • 3,742
  • 7
  • 36
  • 55
1
vote
0 answers

React Router v4 show current route component until async route resolve

I am using react-router v4 along side react-loadable to async load matched routes. currentUser ? ( ) :…
cusX
  • 470
  • 1
  • 6
  • 17
0
votes
0 answers

How can I introduce a buffer to React-leaflet?

I'm currently using React-leaflet to plot and pinpoint data. However, I have a massive amount of data to display, so I'm trying to introduce a buffer using Lazy, Suspense or Loadable. But when I structure it with React-leaflet in Map.js and then try…
0
votes
0 answers

Why loadable creates different chunk modules for the same component?

I'm new in loadable components. Wonder why loadable creates different chunk modules for the same component? Is it normal? Because I feel like it affects performance of the site. import loadable from "@loadable/component"; const LoadableHeader =…
Vova
  • 750
  • 11
  • 26
0
votes
1 answer

What is a reasonable size / order of magnitude for code splitting

We are working no a large React code base and want to split up the application into smaller chunks using react-loadable. My team mates are currently trying to make each and every component lazy-loadable. I do not think this is the right approach, as…
Christian Held
  • 2,321
  • 1
  • 15
  • 26
0
votes
1 answer

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 component BCS it is in every Route except Login. I need…
0
votes
0 answers

Webpack generating child chunks for dynamic imported modules

I'm using react-loadable to dynamically import the route component, webpack is generating the chunk file but the issue is that the child modules that are imported inside the dynamically imported component is also generated in a separate chunk file.…