Stack Overflow
Stack Overflow

Questions tagged [react-loadable]

137 questions
46
votes
3 answers

React.lazy() vs React Loadable

I was using react-loadable for some time for dynamic imports of my React components. In the recent React release 16.6, the React team has included React.lazy() which also does a dynamic import. Is there any benefit in using the react-loadable…
Roopak Puthenveettil
  • 1,387
  • 2
  • 13
  • 27
19
votes
1 answer

Name webpack chunks from react-loadable

I've successfully added react-loadable library in my project to enable code splitting, the only problem I've found is that the chunks generated by webpack are not named, they are given integer names. My code for react-loadable use is const…
Khriz
  • 5,888
  • 6
  • 34
  • 39
16
votes
3 answers

React-Router - Route re-rendering component on route change

Please read this properly before marking as duplicate, I assure you I've read and tried everything everyone suggests about this issue on stackoverflow and github. I have a route within my app rendered as below;
James Morrison
  • 1,954
  • 2
  • 21
  • 48
13
votes
3 answers

Should I use react-loadable or loadable-components for code splitting?

I want to split my react code with server side rendering. To do that I have two options. loadable-components react-loadable loadable-components React documentation suggested to use loadable-components for server rendered apps. But it has very few…
Swaroop Deval
  • 906
  • 5
  • 22
11
votes
3 answers

fullcalendar - NextJS - Dynamic import doesn't show calendar

I'm using NextJS and Fullcalendar. I tried to use fullcalendar using dynamic import like in this example(for more info, this example solution comes from here). It worked, But there was a problem. Almost every 1 out of 5 refreshing attempts ended in…
Daniel Barbakadze
  • 201
  • 2
  • 14
11
votes
3 answers

Temporarily disable react-loadable

When using react-loadable, you aren't easily alerted by errors thrown in those async components, like a bad import. I'd like to be able to disable react-loadable in dev environment (bypass it, and load everything synchronously) and enable it in…
Florian Bienefelt
  • 1,448
  • 5
  • 15
  • 28
11
votes
2 answers

Loadable.Capture not reporting any modules

This is essentially all my code. I am running Hapi and trying to use react-loadable to server render my React application. I have added a lot of the missing pieces to the code here. const location = req.url.pathname const context = {} const modules…
bitten
  • 2,463
  • 2
  • 25
  • 44
11
votes
1 answer

react-loadable Chunks loaded but code not executed

I got an issue,attempting to use chunks in my react APP by using react-loadable Its works perfect in webpack-dev-server in development mode,but when im build project and serve it to server,async components loaded,but code in them not being…
chesterkmr
  • 311
  • 2
  • 7
9
votes
7 answers

How test a React Loadable component

I have this component: import React from 'react'; const UploadAsync = Loadable({ loader: () => import('components/Upload'), loading: () => }); const Component = () => { return } export default…
Albert Olivé Corbella
  • 4,061
  • 7
  • 48
  • 66
9
votes
4 answers

Code splitting/react-loadable issue

I'm trying to introduce code splitting into my app using react-loadable. I tried it on a very simple component: const LoadableComponent = Loadable({ loader: () => import('components/Shared/Logo/Logo'), loading:…
Steven Musumeche
  • 2,886
  • 5
  • 33
  • 55
7
votes
1 answer

In Webpack 4, can we dynamically generate page chunk with import() token so we can turn a react component into a react-loadable one?

We use react and react-loadable. During our application initialization, we are verifying that the component.preload method is existing for each we define. If the method is missing, we display a warning that show that the component should…
Dimitri Kopriwa
  • 13,139
  • 27
  • 98
  • 204
7
votes
2 answers

Dynamic import of Javascript module from stream

Goal: To support dynamic loading of Javascript modules contingent on some security or defined user role requirement such that even if the name of the module is identified in dev tools, it cannot be successfully imported via the console. A…
shaz
  • 2,317
  • 4
  • 27
  • 37
7
votes
2 answers

Testing react-loadable components

I'm having trouble testing my React components that use react-loadable. Say, I have a Button component that, depending on whether it receives an icon prop, loads an Icon component like so: Button.js const LoadableIcon = Loadable({ loader: () =>…
artooras
  • 6,315
  • 9
  • 45
  • 78
7
votes
1 answer

React Loadable JSON mapping file with components being referenced from multiple locations

I'm using React Loadable to code split my components, but the problem is that certain components are referenced from multiple locations. For example, I have this component CarsModule, which is referenced in multiple areas like this: const CarsModule…
Thomas
  • 2,356
  • 7
  • 23
  • 59
7
votes
1 answer

How to access a child within LoadableComponent and Route?

In my main component, I have created a ref : this.transfernewRef = React.createRef(); And assigned it to my component, which is embedded in a Route :
Chuck
  • 351
  • 1
  • 6
  • 20
1
2 3
…
9 10