Questions tagged [react-loadable]
137 questions
7
votes
0 answers
Unit Testing dynamically imported React Component
I have a very simple React component that uses react-loadable to dynamically import another component. The code looks something akin to the following:
import React from 'react';
import Loadable from 'react-loadable';
import LoaderComponent from…

Xenyal
- 2,136
- 2
- 24
- 51
6
votes
0 answers
How To Avoid Duplicate Code in Chunks Using CRA + Code Splitting
For example, say we have two components with a common import:
...
import Hello from './Hello'
class A extends Component {}
and
...
import Hello from './Hello'
class B extends Component {}
Those components are then…

scoots
- 715
- 4
- 16
6
votes
1 answer
React-loadable gets chunks only from relative path
I'm using webpack 4.6.0 and babel 7.0.0 to build react 16.3 web app.
My js assets are under https: //domain/js/app.bundle.js
I use react-loadable to split components into chunks.
The chunks are also located under /js/, however, react fetches them…

Aus
- 1,183
- 11
- 27
6
votes
3 answers
react-loadable import from multiple class exported js
How to import from a multiple class exported js file in react-loadable.
I am trying to import CustomButton from MyButton.js using react-loadable in Home.js. This is the only way I know to do it, is not working.
MyButton.js
import {
CustomButton,
…

Midhun G S
- 906
- 9
- 22
5
votes
1 answer
Unhandled Rejection (ChunkLoadError): Loading chunk 1 failed
I am basically trying to do a poc on extracting the some part of my main application into a separate package.A Sample separate package I have built it in my git repo myapp-poc-ui.
Now I am trying to access this in my main application.
package.json :…

Prabhat Mishra
- 951
- 2
- 12
- 33
5
votes
0 answers
Lazy loading/react-loadable in React-on-Rails
I want to lazy load all of my top-level components to improve load time. I am using react-on-rails to integrate React and Ruby on Rails. To render the components, I have to register them like so in registration.jsx:
import ReactOnRails from…

chloewlin
- 115
- 2
- 8
5
votes
3 answers
Export default unused in WebStorm
I am using loadable in React to load my component dynamically. So I'm exporting the index of each component and import them in app.js.
But the issue is I am still getting an error in WebStorm that the export default is unused in individual component…

Deepak Adhana
- 104
- 1
- 8
5
votes
2 answers
React Loadable doesn't update on browser refresh
I have a slide that renders a bunch of cards with some information. The cards height is based on the height of the highest card. I am making use of react-slick for my slider. On the first render the cards are all set to one height, but when i…

RRP
- 2,563
- 6
- 29
- 52
5
votes
1 answer
React-Loadable SSR with Webpack 4 and Babel 7
Does server-side rendering with react-loadable work with Webpack 4 and Babel 7? I've been unable to get it working successfully while following the instructions.
After following just the client-side steps, Webpack correctly outputs separate chunks…

ericgio
- 3,094
- 4
- 25
- 44
5
votes
0 answers
Basic render test for react loadable components
I have a component that I'm dynamically loading
const Summary = loadable({
loader: () => import( /* webpackChunkName: "summary" */ 'app/components/summary')
resolveModule: module => module.default,
});
Problem: My module wasn't resolving…

Sahil Jain
- 3,649
- 2
- 14
- 16
5
votes
1 answer
How can I use react-loadable with react-router?
I am trying to implement an application that has 10-15 pages. That works with react-router well but I should use react-loadable to have a Spinner and loading effect ...
But how can I import router components inside the loadable ?
I should create one…

Mohammad
- 385
- 1
- 4
- 16
5
votes
0 answers
react-loadable enabled compoent not receiving new props when sent from parent
I have a component that i'm loading via react-loadable. The component that is being loading has some logic in componentWillReceiveProps for detecting if it needs to get some more data, etc.
When loaded via react loadable, it calls render 1 time,…

Kelly Milligan
- 578
- 1
- 4
- 17
5
votes
2 answers
Microfrontends React/Component based splitting
Background:
I am confronted with the task to modernize a tool and convert it to microservices with a react frontend. My idea was to have a general top-level component containing e.g. the Nav and a component for each microservice that contains the…

Bjoern Urban
- 328
- 4
- 14
4
votes
1 answer
Preloading with React.lazy
react-loadable exposes a very nice method YourLoadableComponent.preload() thanks to which you can easily preload component before it gets rendered whenever you want (onMouseOver etc).
I can see I can do something like:…

dominik791
- 692
- 6
- 17
4
votes
1 answer
A/B testing for React SSR app with chunking
Versions:
webpack: 4.30.0,
react: 16.8.6,
react-loadable: 5.5.0,
I'm having one entry JS in webpack. Other chunks are currently created using react-loadable and vendor JS is created using splitChunks.
Idea of my application:
SSR and chunking is…

master_dodo
- 1,203
- 3
- 20
- 31