Vladimir  Golub
Vladimir Golub

Reputation: 613

How use react-loadble for code spitting with ssr?

After breaking, I get empty chunks and a bundle array.

I completely do everything as written in the documentation.

To get started, wrapping a component

// index.js

import React from 'react';
import Loadable from 'react-loadable';

const LoadableAbout = Loadable({
    loader: () => import('./About'),
    loading() {
        return <div>Loading...</div>
    }
});

export default LoadableAbout;

I import, so

// About it's folder
import About from "./containers/About";

server.js. I use preloadReady because use hydrate.

let port = process.env.npm_package_config_port;

Loadable.preloadReady().then(() => {
    app.listen(port, () => {
        console.log("server run on port "+port);
    });
});
<Loadable.Capture report={moduleName => modules.push(moduleName)}>
  <AppMain />
</Loadable.Capture>
${bundles.map(bundle => {
    return `<script src="/${bundle.file}"></script>`
}).join('\n')}
<script src="/client.js"></script>

Upvotes: 0

Views: 38

Answers (0)

Related Questions