Comments (7)
Possible solution. It is a bit clumsy, but this is just a start.
Assume we collected all async modules upfront and we have is an array.
window.allRequiredModules = ["./a.js", "./b.js"]
Now we can do something like this
const allRequiredModules = window.allRequiredModules;
// Allow this to be garbage-collected
delete window.allRequiredModules;
Promise.all(allRequiredModules.map(x => import(x)))
.then(modules => {
hydrete(<App modules={modules} />, root);
});
And in async component, you do something like this
import loadable from 'loadable-components'
export const Home = loadable(() => import('./a.js'), {
LoadingComponent: (props) => props.modules['./a.js'] || (<div>Loading...</div>),
})
cc @rakeshpai
from react-snap.
That's very interesting, especially the bit about setting the LoadingComponent to be equal to the cached module when possible. It's certainly worth a shot. I have a feeling that the allRequiredModules.map(x => import(x))
might give some trouble, especially after compilation, but will need to check to be sure.
from react-snap.
Also, I'm trying to understand what's being discussed here facebook/react#1739, but it seems relevant to the issue we're facing.
from react-snap.
I was wondering why react-loadable
needs modules
key.
Loadable({
loader: () => import('./Bar'),
modules: ['./Bar'],
webpack: () => [require.resolveWeak('./Bar')],
});
I suppose because of this issue. If yes, then this problem is solved in react-loadable
for SSR scenario
UPD: checked source code - it seems those keys used for other purpose.
from react-snap.
@rakeshpai I actually can not reproduce this error. Here is the branch https://github.com/stereobooster/an-almost-static-stack/tree/experiment-one-tick-flash
code
const Countries = loadable(
() => {
const x = import("./views/Countries");
console.log(1);
x.then(y => console.log(y));
console.log(2);
return x;
},
{
LoadingComponent: () => {
console.log("LoadingComponent: ./views/Countries");
return null;
}
}
);
console output
1
2
{default: ƒ, __esModule: true}
componentDidMount loaded
there is no LoadingComponent: ./views/Countries
from react-snap.
You're right, I can't replicate it either. Looks like this issue is essentially solved by loadable-components.
I wonder why I couldn't get loadable-components to work for me. I'll need to dig into it to figure out what I've been doing wrong.
I guess this issue can be closed here.
PS: I'll be AFK for the next few days. Will be back on the 2nd. Sorry for the silence for the next few days.
from react-snap.
@rakeshpai no worries. Have a nice holidays (if that is why you'll be offline)
from react-snap.
Related Issues (20)
- pagerror and incomplet crawled page with firestore HOT 4
- Problem with access to sitemap.xml
- Error in postbuild when using react-snap
- pageerror at /: SyntaxError: Unexpected token '.' HOT 8
- It is not rendering my css file on my 404 page HOT 1
- options.waitFor freezes crawling/rendering
- YouTube Video Embed Causing Error: DOMEXception: A network error occured. HOT 1
- Home page always being returned HOT 7
- Getting Same Page source for every page HOT 3
- Continue on error HOT 1
- Disable Crawling External JS such as Adsense and Analytics
- Support Vite.JS HOT 4
- Who uses it HOT 4
- There is a phenomenon in which the build does not end in the GitHub Actions (Linux Latest) environment. HOT 9
- React 18 not working ! HOT 10
- Not able to deploy on AWS Amplify HOT 3
- react-snap vulnerability
- SyntaxError: Unexpected token '?' HOT 8
- Getting react-app to work
- Prime React UI Kit Not Working With React Snap HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-snap.