Comments (7)
Using CommonJS on the client side can also interfere with Webpack tree shaking.
In my corner of IBM, what we do is:
- Build client and server separately.
- We build client chunks using Babel for JSX, but leave it pure ES6, using ES6 imports. This code is exposed in package.json via 'module'.
- We build server side using Babel for JSX + CommonJS transpiling. This code is exposed in package.json via 'main'.
- We use rollup to build the same React code twice (for client and server as above).
SSR pass will require react components as CommonJS modules. Meanwhile, Webpack will build dependency tries for chunks using pure ES6 imports and tree shaking works properly, resulting in smaller chunks and proper hydration.
from loadable-components.
You can do (1) and (2) with Webpack alone, for UI microservices. We do (3) and (4) when creating reusable React components - I am sorry for putting them together as 1-4. Again, you don't have to use rollup for 3/4, but it is useful for us to run the same build with different config and copy to esm and cjs dist folders, to be consumed on the client and server, respectively.
from loadable-components.
My issue is the hydration, without any warnings or errors creates another duplicate layout instead of hydrating the server html. Both generated HTMLs are identical and react doesn't complaint about differences.
The layout itself is being loaded with loadable. One thing that's different from all examples is that I created a loader for loadable components:
loader.js
function loadComponent(name) {
switch(name) {
case 'ComponentA': {
const Component = loadable(() => /*webpackChunkName: componentA */ import(@namespace/componentA));
return {
Component, // render this
load: Component.load, // used to hookup other things to the framework
name: 'ComponentA'
}
}
}
}
App.jsx
import loadComponent from loader.js;
function App({layout}) {
return (<div>{loadComponent(layout).Component}</div>);
}
entry.js
loadableReady(() => { hydrateRoot(d.gebid('root'), <App layout={config.layout} />) });
from loadable-components.
Yeah, hydration with Suspense can lead to duplicated content instead of hydration failure.
Everything depends on details and without these details, it's hard to help here.
from loadable-components.
@theKashey thank you for your response. I was able to figure out my issue. It was babel preset-env i made modules set to commonjs this was changing the imports and preventing webpack from splitting. I had stopped the client from processing the loader with babel and this was causing the difference between server and client render.
If you are having issues with loadable components not getting split change preset-env modules from commonjs to the default 'auto'.
from loadable-components.
We do 1 and 2. 2 via npm packages (private repo) that are the raw es6 code without processing. Server and client import them and we have 2 webpack configs one for server and one for client.
I don't understand your 3rd and 4th steps? Do you process the packages again with a server side config and commonjs? Do you publish these separately to a repo?
How do you use roll-up? To build the final application? Why roll-up?
from loadable-components.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
from loadable-components.
Related Issues (20)
- problem with redial HOT 2
- How to change referencing external styles to preload mode
- What is the best way to prevent failure to load component or catch properly? HOT 7
- getting Uncaught TypeError: Failed to resolve module specifier HOT 1
- loadable/component Synchronously Load Component Failed with Error "Cannot convert undefined or null to object HOT 2
- SassError: Undefined variable HOT 1
- Inline Chunk injection HOT 2
- Not working with latest @loadable/server & @loadable/babel-plugin `v5.16.0` version HOT 4
- How to lazyload a hook? HOT 3
- Fallback behaviour HOT 1
- Main.js is rendered on every page even if I splitted each page into chunks with @loadable/component
- error in ./node_modules/@loadable/component/dist/loadable.esm.mjs HOT 9
- Why ChunkExtractor is required? HOT 3
- Is website sync with repo?
- If I am using react18, do I still need loadable-components HOT 6
- Add esbuild support HOT 3
- react-native-web SSR support HOT 1
- Loading state is always true on first render HOT 3
- Add query parameter support HOT 3
- SSR is broken for component v5.16.2+ HOT 6
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 loadable-components.