Mixing
Why preloadAll() is not working using react-loadable?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
I'm trying to use react-loadable on my project but Loadable.preloadAll is not working. When I'm trying to load http://localhost:1337/ I'm getting localhost refused to connect.
react-loadable.json looks fine.
I'm using React 16.6.3, Webpack 4.27.1 and react-router 4.4.0-beta.6
I used official docs from react-loadable, their example and read a few articles but I don't understand where is my mistake.
Here is my code.
server.js
import Loadable from 'react-loadable'
const express = require('express')
const app = new express()
if (isDev) {
app.use('/', express.static('static'))
} else {
app.use('/', express.static('build', {
maxAge: '1y'
}))
}
app.get('*', require('./server/serverRender')())
Loadable.preloadAll().then(() => {
app.listen(PORT, HOST, error => {
if (error) {
console.error(error)
} else {
console.info('==> 🌎 Listening on port 1337, PORT, HOST)
}
})
}).catch(error => {
console.log(error)
})
serverRender.js
import React from 'react'
import { matchRoutes, renderRoutes } from 'react-router-config'
import { renderToStaticMarkup } from 'react-dom/server'
import StaticRouter from 'react-router'
import { Provider } from 'react-redux'
import Loadable from 'react-loadable'
import { getBundles } from 'react-loadable/webpack'
import routes from '../routes'
import stats from '../../react-loadable.json'
module.exports = function () {
return function (req, res) {
const store = createStore({ rootReducer, initialState})
const branch = matchRoutes(routes, req.url)
let context = {}
const promises = branch.map(({route}) => {
let fetchData = route.component.fetchData
return fetchData && fetchData instanceof Function ?
fetchData(store) : Promise.resolve(null)})
if (context.url) {
res.redirect(302, context.url);
} else {
promiseTimeout(Promise.all(promises), SERVER_TIMEOUT_THRESHOLD)
.catch((err) => {
console.error('Server prefetching failed', err)
store.dispatch(serverPrefetchFailed())
})
.then((promiseArr = ) => {
const promiseData = promiseArr[0] || {}
const { statusCode, redirect } = promiseData
let modules =
if (redirect != null) {
return res.redirect(redirect)
}
let bodyHtml = renderToStaticMarkup (
<Loadable.Capture report={moduleName => modules.push(moduleName)}>
<Provider store={store}>
<StaticRouter location={req.path} context={context}>
{renderRoutes(routes)}
</StaticRouter>
</Provider>
</Loadable.Capture>
)
let bundles = getBundles(stats, modules)
let getSingleBundle = () => {
bundles.map(file => {
return `<script src="/js/${bundle.file}"></script>`
}).join('n')
}
res.status(statusCode || 200).send('<!DOCTYPE html>' + renderHtml({
head,
initialState: store.getState(),
bodyHtml,
bundle: getSingleBundle()
}))
}).catch(err => {
console.error(err);
res.status(500).send(err)
})
}
}
}
routes.js
import React from 'react'
import Loadable from 'react-loadable'
import App from './App'
function Loading () {
return <h3>Loading...</h3>
}
const SomeForm = Loadable({
loader: () => import('./pages/SomeForm'),
loading: Loading
})
const LandingPage = Loadable({
loader: () => import('./pages/LandingPage'),
loading: Loading
})
const routes = [
{ component: App,
routes: [
{ path: '/',
exact: true,
component: LandingPage
},
{
path: '/some',
component: SomeForm
}
]
}
]
client.js
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import Loadable from 'react-loadable'
import { BrowserRouter } from 'react-router-dom'
import { renderRoutes } from "react-router-config"
import routes from './routes'
function getRootElement () {
return (
<Provider store={store}>
<BrowserRouter>
{renderRoutes(routes)}
</BrowserRouter>
</Provider>
)
}
Loadable.preloadReady().then(() => {
ReactDOM.hydrate(getRootElement(), document.getElementById('root'))
})
html.js
export function renderHtml ({ head, bodyHtml, initialState, bundle
}) {
return `
<html lang="en">
<head>
<base href="/" />
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
${mainCss || ''}
</head>
<body>
<div id="root">${bodyHtml}</div>
<script>window.__INITIAL_STATE__= ${serialize(initialState)}</script>
${mainScripts || ''}
${bundle}
</body>
</html>
`
}
react-loadable
asked Jan 3 at 14:46
Olga VineOlga Vine
83
add a comment |
0
I'm trying to use react-loadable on my project but Loadable.preloadAll is not working. When I'm trying to load http://localhost:1337/ I'm getting localhost refused to connect.
react-loadable.json looks fine.
I'm using React 16.6.3, Webpack 4.27.1 and react-router 4.4.0-beta.6
I used official docs from react-loadable, their example and read a few articles but I don't understand where is my mistake.
Here is my code.
server.js
import Loadable from 'react-loadable'
const express = require('express')
const app = new express()
if (isDev) {
app.use('/', express.static('static'))
} else {
app.use('/', express.static('build', {
maxAge: '1y'
}))
}
app.get('*', require('./server/serverRender')())
Loadable.preloadAll().then(() => {
app.listen(PORT, HOST, error => {
if (error) {
console.error(error)
} else {
console.info('==> 🌎 Listening on port 1337, PORT, HOST)
}
})
}).catch(error => {
console.log(error)
})
serverRender.js
import React from 'react'
import { matchRoutes, renderRoutes } from 'react-router-config'
import { renderToStaticMarkup } from 'react-dom/server'
import StaticRouter from 'react-router'
import { Provider } from 'react-redux'
import Loadable from 'react-loadable'
import { getBundles } from 'react-loadable/webpack'
import routes from '../routes'
import stats from '../../react-loadable.json'
module.exports = function () {
return function (req, res) {
const store = createStore({ rootReducer, initialState})
const branch = matchRoutes(routes, req.url)
let context = {}
const promises = branch.map(({route}) => {
let fetchData = route.component.fetchData
return fetchData && fetchData instanceof Function ?
fetchData(store) : Promise.resolve(null)})
if (context.url) {
res.redirect(302, context.url);
} else {
promiseTimeout(Promise.all(promises), SERVER_TIMEOUT_THRESHOLD)
.catch((err) => {
console.error('Server prefetching failed', err)
store.dispatch(serverPrefetchFailed())
})
.then((promiseArr = ) => {
const promiseData = promiseArr[0] || {}
const { statusCode, redirect } = promiseData
let modules =
if (redirect != null) {
return res.redirect(redirect)
}
let bodyHtml = renderToStaticMarkup (
<Loadable.Capture report={moduleName => modules.push(moduleName)}>
<Provider store={store}>
<StaticRouter location={req.path} context={context}>
{renderRoutes(routes)}
</StaticRouter>
</Provider>
</Loadable.Capture>
)
let bundles = getBundles(stats, modules)
let getSingleBundle = () => {
bundles.map(file => {
return `<script src="/js/${bundle.file}"></script>`
}).join('n')
}
res.status(statusCode || 200).send('<!DOCTYPE html>' + renderHtml({
head,
initialState: store.getState(),
bodyHtml,
bundle: getSingleBundle()
}))
}).catch(err => {
console.error(err);
res.status(500).send(err)
})
}
}
}
routes.js
import React from 'react'
import Loadable from 'react-loadable'
import App from './App'
function Loading () {
return <h3>Loading...</h3>
}
const SomeForm = Loadable({
loader: () => import('./pages/SomeForm'),
loading: Loading
})
const LandingPage = Loadable({
loader: () => import('./pages/LandingPage'),
loading: Loading
})
const routes = [
{ component: App,
routes: [
{ path: '/',
exact: true,
component: LandingPage
},
{
path: '/some',
component: SomeForm
}
]
}
]
client.js
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import Loadable from 'react-loadable'
import { BrowserRouter } from 'react-router-dom'
import { renderRoutes } from "react-router-config"
import routes from './routes'
function getRootElement () {
return (
<Provider store={store}>
<BrowserRouter>
{renderRoutes(routes)}
</BrowserRouter>
</Provider>
)
}
Loadable.preloadReady().then(() => {
ReactDOM.hydrate(getRootElement(), document.getElementById('root'))
})
html.js
export function renderHtml ({ head, bodyHtml, initialState, bundle
}) {
return `
<html lang="en">
<head>
<base href="/" />
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
${mainCss || ''}
</head>
<body>
<div id="root">${bodyHtml}</div>
<script>window.__INITIAL_STATE__= ${serialize(initialState)}</script>
${mainScripts || ''}
${bundle}
</body>
</html>
`
}
react-loadable
asked Jan 3 at 14:46
Olga VineOlga Vine
83
I found the problem, it was because import() didn't work in myroutes.js. The reason is"@babel/plugin-syntax-dynamic-import"doesn't work in babel 7, I installeddynamic-import-node-babel-7and it works well.
– Olga Vine
Jan 3 at 16:14
add a comment |
0
0
0
I'm trying to use react-loadable on my project but Loadable.preloadAll is not working. When I'm trying to load http://localhost:1337/ I'm getting localhost refused to connect.
react-loadable.json looks fine.
I'm using React 16.6.3, Webpack 4.27.1 and react-router 4.4.0-beta.6
I used official docs from react-loadable, their example and read a few articles but I don't understand where is my mistake.
Here is my code.
server.js
import Loadable from 'react-loadable'
const express = require('express')
const app = new express()
if (isDev) {
app.use('/', express.static('static'))
} else {
app.use('/', express.static('build', {
maxAge: '1y'
}))
}
app.get('*', require('./server/serverRender')())
Loadable.preloadAll().then(() => {
app.listen(PORT, HOST, error => {
if (error) {
console.error(error)
} else {
console.info('==> 🌎 Listening on port 1337, PORT, HOST)
}
})
}).catch(error => {
console.log(error)
})
serverRender.js
import React from 'react'
import { matchRoutes, renderRoutes } from 'react-router-config'
import { renderToStaticMarkup } from 'react-dom/server'
import StaticRouter from 'react-router'
import { Provider } from 'react-redux'
import Loadable from 'react-loadable'
import { getBundles } from 'react-loadable/webpack'
import routes from '../routes'
import stats from '../../react-loadable.json'
module.exports = function () {
return function (req, res) {
const store = createStore({ rootReducer, initialState})
const branch = matchRoutes(routes, req.url)
let context = {}
const promises = branch.map(({route}) => {
let fetchData = route.component.fetchData
return fetchData && fetchData instanceof Function ?
fetchData(store) : Promise.resolve(null)})
if (context.url) {
res.redirect(302, context.url);
} else {
promiseTimeout(Promise.all(promises), SERVER_TIMEOUT_THRESHOLD)
.catch((err) => {
console.error('Server prefetching failed', err)
store.dispatch(serverPrefetchFailed())
})
.then((promiseArr = ) => {
const promiseData = promiseArr[0] || {}
const { statusCode, redirect } = promiseData
let modules =
if (redirect != null) {
return res.redirect(redirect)
}
let bodyHtml = renderToStaticMarkup (
<Loadable.Capture report={moduleName => modules.push(moduleName)}>
<Provider store={store}>
<StaticRouter location={req.path} context={context}>
{renderRoutes(routes)}
</StaticRouter>
</Provider>
</Loadable.Capture>
)
let bundles = getBundles(stats, modules)
let getSingleBundle = () => {
bundles.map(file => {
return `<script src="/js/${bundle.file}"></script>`
}).join('n')
}
res.status(statusCode || 200).send('<!DOCTYPE html>' + renderHtml({
head,
initialState: store.getState(),
bodyHtml,
bundle: getSingleBundle()
}))
}).catch(err => {
console.error(err);
res.status(500).send(err)
})
}
}
}
routes.js
import React from 'react'
import Loadable from 'react-loadable'
import App from './App'
function Loading () {
return <h3>Loading...</h3>
}
const SomeForm = Loadable({
loader: () => import('./pages/SomeForm'),
loading: Loading
})
const LandingPage = Loadable({
loader: () => import('./pages/LandingPage'),
loading: Loading
})
const routes = [
{ component: App,
routes: [
{ path: '/',
exact: true,
component: LandingPage
},
{
path: '/some',
component: SomeForm
}
]
}
]
client.js
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import Loadable from 'react-loadable'
import { BrowserRouter } from 'react-router-dom'
import { renderRoutes } from "react-router-config"
import routes from './routes'
function getRootElement () {
return (
<Provider store={store}>
<BrowserRouter>
{renderRoutes(routes)}
</BrowserRouter>
</Provider>
)
}
Loadable.preloadReady().then(() => {
ReactDOM.hydrate(getRootElement(), document.getElementById('root'))
})
html.js
export function renderHtml ({ head, bodyHtml, initialState, bundle
}) {
return `
<html lang="en">
<head>
<base href="/" />
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
${mainCss || ''}
</head>
<body>
<div id="root">${bodyHtml}</div>
<script>window.__INITIAL_STATE__= ${serialize(initialState)}</script>
${mainScripts || ''}
${bundle}
</body>
</html>
`
}
react-loadable
asked Jan 3 at 14:46
Olga VineOlga Vine
83
I'm trying to use react-loadable on my project but Loadable.preloadAll is not working. When I'm trying to load http://localhost:1337/ I'm getting localhost refused to connect.
react-loadable.json looks fine.
I'm using React 16.6.3, Webpack 4.27.1 and react-router 4.4.0-beta.6
I used official docs from react-loadable, their example and read a few articles but I don't understand where is my mistake.
Here is my code.
server.js
import Loadable from 'react-loadable'
const express = require('express')
const app = new express()
if (isDev) {
app.use('/', express.static('static'))
} else {
app.use('/', express.static('build', {
maxAge: '1y'
}))
}
app.get('*', require('./server/serverRender')())
Loadable.preloadAll().then(() => {
app.listen(PORT, HOST, error => {
if (error) {
console.error(error)
} else {
console.info('==> 🌎 Listening on port 1337, PORT, HOST)
}
})
}).catch(error => {
console.log(error)
})
serverRender.js
import React from 'react'
import { matchRoutes, renderRoutes } from 'react-router-config'
import { renderToStaticMarkup } from 'react-dom/server'
import StaticRouter from 'react-router'
import { Provider } from 'react-redux'
import Loadable from 'react-loadable'
import { getBundles } from 'react-loadable/webpack'
import routes from '../routes'
import stats from '../../react-loadable.json'
module.exports = function () {
return function (req, res) {
const store = createStore({ rootReducer, initialState})
const branch = matchRoutes(routes, req.url)
let context = {}
const promises = branch.map(({route}) => {
let fetchData = route.component.fetchData
return fetchData && fetchData instanceof Function ?
fetchData(store) : Promise.resolve(null)})
if (context.url) {
res.redirect(302, context.url);
} else {
promiseTimeout(Promise.all(promises), SERVER_TIMEOUT_THRESHOLD)
.catch((err) => {
console.error('Server prefetching failed', err)
store.dispatch(serverPrefetchFailed())
})
.then((promiseArr = ) => {
const promiseData = promiseArr[0] || {}
const { statusCode, redirect } = promiseData
let modules =
if (redirect != null) {
return res.redirect(redirect)
}
let bodyHtml = renderToStaticMarkup (
<Loadable.Capture report={moduleName => modules.push(moduleName)}>
<Provider store={store}>
<StaticRouter location={req.path} context={context}>
{renderRoutes(routes)}
</StaticRouter>
</Provider>
</Loadable.Capture>
)
let bundles = getBundles(stats, modules)
let getSingleBundle = () => {
bundles.map(file => {
return `<script src="/js/${bundle.file}"></script>`
}).join('n')
}
res.status(statusCode || 200).send('<!DOCTYPE html>' + renderHtml({
head,
initialState: store.getState(),
bodyHtml,
bundle: getSingleBundle()
}))
}).catch(err => {
console.error(err);
res.status(500).send(err)
})
}
}
}
routes.js
import React from 'react'
import Loadable from 'react-loadable'
import App from './App'
function Loading () {
return <h3>Loading...</h3>
}
const SomeForm = Loadable({
loader: () => import('./pages/SomeForm'),
loading: Loading
})
const LandingPage = Loadable({
loader: () => import('./pages/LandingPage'),
loading: Loading
})
const routes = [
{ component: App,
routes: [
{ path: '/',
exact: true,
component: LandingPage
},
{
path: '/some',
component: SomeForm
}
]
}
]
client.js
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import Loadable from 'react-loadable'
import { BrowserRouter } from 'react-router-dom'
import { renderRoutes } from "react-router-config"
import routes from './routes'
function getRootElement () {
return (
<Provider store={store}>
<BrowserRouter>
{renderRoutes(routes)}
</BrowserRouter>
</Provider>
)
}
Loadable.preloadReady().then(() => {
ReactDOM.hydrate(getRootElement(), document.getElementById('root'))
})
html.js
export function renderHtml ({ head, bodyHtml, initialState, bundle
}) {
return `
<html lang="en">
<head>
<base href="/" />
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
${mainCss || ''}
</head>
<body>
<div id="root">${bodyHtml}</div>
<script>window.__INITIAL_STATE__= ${serialize(initialState)}</script>
${mainScripts || ''}
${bundle}
</body>
</html>
`
}
react-loadable
react-loadable
asked Jan 3 at 14:46
Olga VineOlga Vine
83
asked Jan 3 at 14:46
Olga VineOlga Vine
83
edited Jan 3 at 15:15
Olga Vine
asked Jan 3 at 14:46
Olga VineOlga Vine
83
asked Jan 3 at 14:46
Olga VineOlga Vine
83
asked Jan 3 at 14:46
Olga VineOlga Vine
83
83
I found the problem, it was because import() didn't work in myroutes.js. The reason is"@babel/plugin-syntax-dynamic-import"doesn't work in babel 7, I installeddynamic-import-node-babel-7and it works well.
– Olga Vine
Jan 3 at 16:14
add a comment |
I found the problem, it was because import() didn't work in myroutes.js. The reason is"@babel/plugin-syntax-dynamic-import"doesn't work in babel 7, I installeddynamic-import-node-babel-7and it works well.
– Olga Vine
Jan 3 at 16:14
I found the problem, it was because import() didn't work in my
routes.js. The reason is "@babel/plugin-syntax-dynamic-import" doesn't work in babel 7, I installed dynamic-import-node-babel-7 and it works well.– Olga Vine
Jan 3 at 16:14
I found the problem, it was because import() didn't work in my
routes.js. The reason is "@babel/plugin-syntax-dynamic-import" doesn't work in babel 7, I installed dynamic-import-node-babel-7 and it works well.– Olga Vine
Jan 3 at 16:14
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54024571%2fwhy-preloadall-is-not-working-using-react-loadable%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54024571%2fwhy-preloadall-is-not-working-using-react-loadable%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I found the problem, it was because import() didn't work in my
routes.js. The reason is"@babel/plugin-syntax-dynamic-import"doesn't work in babel 7, I installeddynamic-import-node-babel-7and it works well.– Olga Vine
Jan 3 at 16:14