Comments (4)
to comment, i might be doing something wrong with my getLoadableState method.
import React from 'react'
import { renderToString } from 'react-dom/server'
import { StaticRouter } from 'react-router'
import { getLoadableState } from 'loadable-components/server'
import App from './App'
const app = (
<StaticRouter>
<App />
</StaticRouter>
)
// Traversing React tree to load all modules
getLoadableState(app).then(() => {
const html = renderToString(<YourApp />) // what is "<YourApp /> in this context? could be what i am missing.
})
from loadable-components.
It is difficult to help you with this portion of code, but I will try.
Is getLoadableState(app)
resolved? Is the then
called? If yes your setup is right.
The problem could be that a loadable-components is not present in the React Tree, so it is undetectable for getLoadableState(app)
do you see what I mean?
from loadable-components.
NVM, i figured out the issue. i forgot to declare external on my webpack server config:
// /
const nodeExternals = require('webpack-node-externals');
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const outputPath = path.resolve('wwwroot', 'server');
const config = {
// node specific settings
// target: 'node',
externals: nodeExternals(), // <- this is what i forgot
// find starting js file
entry: {
server: './ClientApp/server.jsx'
// serverTest: './ClientApp/serverTest.jsx'
},
// add file extensions to shorthand ES6 imports
resolve: {
extensions: ['json', '.js', '.jsx', '.css']
},
// bundled code output
output: {
path: path.resolve(__dirname, outputPath),
publicPath: '/',
filename: '[name].js',
libraryTarget: 'commonjs2'
},
module: {
loaders: [
// Check JS and JSX files before building
{
enforce: 'pre',
test: /\.jsx?$/,
loader: 'eslint-loader',
exclude: /node_modules/
},
{
// check each loader for matching files
oneOf: [
// default loader for js and jsx with inline babel config
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: ['env', 'react'],
plugins: [
'babel-plugin-transform-runtime',
'babel-plugin-dynamic-import-node',
'babel-plugin-transform-object-rest-spread',
'babel-plugin-transform-class-properties',
'transform-es2015-modules-commonjs'
],
// Don't read from .babelrc
babelrc: false
}
},
// default css loader
// {
// test: /\.css$/,
// loader: ExtractTextPlugin.extract({
// use: 'css-loader',
// fallback: 'style-loader'
// })
// },
// fallback loader if other loaders excluded
// URL loader falls back to file-loader
{
loader: 'url-loader',
exclude: [/\.(js|jsx|mjs|css)$/, /\.html$/, /\.json$/],
options: {
name: '[name].[ext]'
}
}
]
}
]
},
plugins: [
// load css into separate .css file
// new ExtractTextPlugin({
// filename: 'server.css',
// allChunks: true
// })
]
};
module.exports = config;
now my Async Server-side rendering works perfectly now! sorry to bother!
from loadable-components.
Nice!
from loadable-components.
Related Issues (20)
- Add importEntrypoint to CunkExtractor and donβt load stats with require. HOT 9
- Hydration is not working sometimes on some pages HOT 7
- How use it express ssr + react-scripts. How create this file? '../dist/loadable-stats.json' HOT 1
- Loadable not accepting react-p5-wrapper as input HOT 7
- Component types are incompatible with React 18 HOT 2
- Loadable component SSR remote (localhost:port) HOT 2
- lazy typescript definition missing options argument: Expected 1 argument, but got 2 HOT 2
- Can't get `fallback` to display component HOT 3
- 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?
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.