Stack Overflow
Stack Overflow

Questions tagged [loadable-component]

53 questions
1
vote
1 answer

React.lazy pattern using Loadable Components

I have the following scenario where I don't know ahead of time which component to load. The solution of which is as follows using React.lazy import React, { lazy, Suspense } from "react"; export default class CallingLazyComponents extends…
devAhsan
  • 223
  • 2
  • 10
1
vote
0 answers

React @loadable/component SSR with Redux Router

I am trying to use @loadable/component library with React at the app that uses SSR, Redux and Router. The docs gives an example application code, but it's without Router and Redux (no need to pass state and render routes). The file…
Evgeny Melnikov
  • 952
  • 7
  • 13
1
vote
1 answer

Server side rendering with loadable components not working

I have been trying for a while now, to no avail, to get my configuration working for an app that has the following characterstics: Typescript React Server side rendering using loadable-components Webpack For some reason, this snippet, which is…
Mark
  • 9,718
  • 6
  • 29
  • 47
0
votes
0 answers

How do I optimize SVG functional components using Gatsby Image?

As part of my internship, I'm trying to optimize the loading times of my company's site which uses Gatsby. After analyzing using Webpack Bundle, I realized the site was having performance issues because SVGs were not being optimized. Looking at the…
Ferusel
  • 1
  • 1
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
0 answers

Using polyfills: No polyfills were added, since the `useBuiltIns` option was not set

Stack: React 17 Webpack 5 Babel 7 core-js 3 I want to fix the lighthouse error ci: Avoid serving legacy JavaScript to modern browsers When i add debug property debug: true to babel/preset-env of my babel config and I build the application, i have…
Julien S
  • 3
  • 3
0
votes
1 answer

How to avoid ChunkLoadError when using @loadable/component in create-react-app?

Solution for this issue is available when using React.lazy: https://www.codemzy.com/blog/fix-chunkloaderror-react https://raphael-leger.medium.com/react-webpack-chunkloaderror-loading-chunk-x-failed-ac385bd110e0 However we are using…
Canovice
  • 9,012
  • 22
  • 93
  • 211
0
votes
0 answers

Dinamic react component

Please, tell me how to solve the following problem. I'm writing a news application. The content of each post piece (title, several illustrations, date of creation, section, abstract, part of the text) is entered into the MongoDB database. Each news…
Ichor
  • 11
  • 2
0
votes
0 answers

Webpack: Module parse failed: Unexpected token

Getting this error with loadable components after building using webpack. I have tried lots of solutions from stackoverflow but nothing works for me. ERROR in ../src/pages/EngineeringUI/index.js 9:14 Module parse failed: Unexpected token (9:14) You…
Pratik Korde
  • 3
  • 4
0
votes
1 answer

How to pass a ref to a dynamically loaded component

I'd like to pass a ref to a dynamically loaded component. When the component's loaded with a regular import everything works as expected. When using a dynamic import the ref value is undefined || { current: null }. I get the following the error…
Lewis Carville
  • 47
  • 7
0
votes
1 answer

Is there a way to avoid blanks in react loadable components

I am using the react Loadable Components Package to lazily load components in my react app as shown in the snippet below: import loadable from '@loadable/component' const OtherComponent = loadable(() => import('./OtherComponent')) function…
ololo
  • 1,326
  • 2
  • 14
  • 47
0
votes
1 answer

LoadableDetachableModel is not refreshed onSubmit and the model is removed from the page

I am trying to query table and re-render the LoadableDetachableModel with result list. Table is empty upon page initialization. After onSubmit method call the table is removed from the page and model is gone. All I got is below JS error. I can see…
Erdel
  • 370
  • 3
  • 16
0
votes
0 answers

Why React Lazy Loading generating one big chunk?

I'm trying to increase my website performance. I did a lot of research and found a code splitting. I have tried both React Lazy load and Loadable Components. I have got a result but not that big. I think the problem is the big chunk which is 600…
Tigran Nazaryan
  • 1
0
votes
1 answer

Ref always return null in Loadable Component

I am using this react library https://github.com/gregberge/loadable-components to load a Component with Ref to access instance values using useImperativeHandle but ref is always null. Here is my code import loadable from…
ololo
  • 1,326
  • 2
  • 14
  • 47
0
votes
1 answer

TypeError: Cannot read property '__esModule' of undefined when /* webpackPrefetch: true */ when SSR with loadable-component and serverless

I am using serverless to deploy a React app with SSR. When I use loadable-compoennts for code splitting everything is fine until I try to prefretch resources. Adding /* webpackPrefetch: true */ to any loadable method causes a server side crash on…
Alex Gawley
  • 21
  • 3
1 2
3
4