How to use react-universal-component - 10 common examples

setHasBabelPlugin()

const universalOptions = {
  loading: () => null,
  error: props => {
    console.error(props.error);
    return <div>An error occurred loading this page's template. More information is available in the console.</div>;
  },
}

  const t_0 = universal(import('../../src/site/pages/Home'), universalOptions)
const t_1 = universal(import('../../src/site/pages/Terms'), universalOptions)
const t_2 = universal(import('../../src/site/pages/Privacy'), universalOptions)
const t_3 = universal(import('../../src/site/pages/Pricing'), universalOptions)
const t_4 = universal(import('../../src/site/pages/404'), universalOptions)


// Template Map
global.componentsByTemplateID = global.componentsByTemplateID || [
  t_0,
t_1,
t_2,
t_3,
t_4
]

// Template Tree
global.templateIDsByPath = global.templateIDsByPath || {
  '404': 4

const startSagas = new Date();
    const sagaPromises = Object.values(serverSagas).map(saga => store.runSaga(saga).done);
    store.dispatch(buildModule.actions.serverSagasInitialized());
    await Promise.all(sagaPromises);
    store.dispatch(buildModule.actions.serverFinished({ timeToRunSagas: new Date() - startSagas }));

    // Generate React SSR.
    app = renderToString();

    const { html, ids, css } = extractCritical(app);

    // Get static helmet strings.
    const helmet = Helmet.renderStatic();

    // Flush chunk names and extract scripts, css and css<->scripts object.
    const chunkNames = flushChunkNames();
    const { cssHashRaw, scripts, stylesheets } = flushChunks(clientStats, { chunkNames });

    const publicPath = req.query.static
      ? `${req.query.static.replace(/\/$/g, '')}/static/`
      : '/static/';
    const cssHash = JSON.stringify(mapValues(cssHashRaw, cssPath => `${publicPath}${cssPath}`));
    const scriptsWithoutBootstrap = scripts.filter(script => !/bootstrap/.test(script));
    const chunksForArray = scriptsWithoutBootstrap.map(script => `'${script}'`).join(',');
    const bootstrapFileName = scripts.filter(script => /bootstrap/.test(script));
    const bootstrapString = await readFile(
      `${buildPath}/.build/pwa/client/${bootstrapFileName}`,
      'utf8',
    );
    const preloadScripts = scriptsWithoutBootstrap
      .map(script => ``)
      .join('\n');

export default ({ clientStats }) => async (req, res, next) => {
  const store = await configureStore(req, res)
  if (!store) return // no store means redirect was already served

  const app = createApp(App, store)
  const appString = ReactDOM.renderToString(app)
  const stateJson = JSON.stringify(store.getState())
  const chunkNames = flushChunkNames()
  const { js, styles, cssHash } = flushChunks(clientStats, { chunkNames })

  console.log('REQUESTED PATH:', req.path)
  console.log('CHUNK NAMES', chunkNames)

  return res.send(
    `
      
        
          
          <title>redux-first-router-demo</title>
          ${styles}
          
        
        
          <div id="root">${appString}</div>

// the  component.
    // It populates the ApolloProvider, StaticRouter and places the application component
    const appComponent = serverRender(
      { apolloClient, reduxStore, location, routerContext },
      ,
    );
    let markup = '';
    try {
      // render the applicaation to a string, collecting what's necessary to populate apollo's data and let styled-components
      // create stylesheet elements
      markup = await renderToStringWithData(sheet.collectStyles(appComponent));
    } catch (err) {
      console.error('Unable to render server side React:', err);
    }

    const chunkNames = flushChunkNames();
    console.log('[BOLDR] Flushing chunks...', chunkNames);

    const { scripts, stylesheets, cssHashRaw } = flushChunks(clientStats, {
      chunkNames: chunkNames,
      before: ['bootstrap', 'vendor'],
      after: ['main'],
      outputPath,
    });

    const finalState = {
      ...reduxStore.getState(),
      apollo: apolloClient.getInitialState(),
    };
    const html = ReactDOMServer.renderToNodeStream(

let appString = null;
    try {
      const appInstance = renderApp(sheetsRegistry, store);
      appString = ReactDOM.renderToString( appInstance );
    }
    catch ( err ) {
      console.log('ReactDOM.renderToString error'); // eslint-disable-line no-console
      console.log(err); // eslint-disable-line no-console
      next(err);
      return;
    }
    const initialState = store.getState();

    const muiCss = sheetsRegistry.toString();
    const chunkNames = flushChunkNames();
    const flushed = flushChunks(clientStats, { chunkNames });
    const { js, styles, cssHash } = flushed;

    const htmlString = createHtml({
      js,
      styles,
      cssHash,
      appString,
      muiCss,
      initialState,
    });
    res.send(htmlString);
  };
}

// @flow

import universal from 'react-universal-component';
import { withPreloading } from 'react-preload-universal-component';

export default withPreloading(universal(import('ArticleOverview/component')));

// @flow

import universal from 'react-universal-component';
import { withPreloading } from 'react-preload-universal-component';

export default withPreloading(universal(import('SplatRouter/component')));

// @flow
import React from 'react';
import { graphql } from 'react-apollo';
import universal from 'react-universal-component';
import ARTICLES_FOR_TAG from '../gql/articlesForTag.graphql';
import type { ArticlesType, MatchParams } from '../../../types/boldr';

const UniversalTagList = universal(import('./TagList'));

type Props = {
  loading: boolean,
  error?: Object,
  getArticlesForTag: ArticlesType,
  match: MatchParams,
};

const TagList = ({ loading, error, match, getArticlesForTag }: Props) => (
  
);

// $FlowIssue
export default graphql(ARTICLES_FOR_TAG, {
  options: props => ({
    variables: {

* knowledge of the CeCILL license and that you accept its terms.
 */

import React from 'react';
import universal from 'react-universal-component';
import {injectReducer} from 'redux-injector';
import {injectSaga} from 'redux-sagas-injector';
import PulseLoader from '../common/components/presentation/loaders/pulseLoader';
import {connect} from 'react-redux';

import localStorage from '../../../../common/localStorage';

import theme from '../../../css/variables';

// second way with onLoad
const Universal = universal(import('./preload'), {
    loading: <div>Loading notebook...</div>,
    onLoad: (module) =&gt; {
        injectSaga('notebook', module.notebookSagas);
        injectReducer('notebook', module.notebookReducer);
        injectReducer('settings', module.settingsReducer(localStorage));

        // Configure hot module replacement for the reducer
        if (process.env.NODE_ENV !== 'production') {
            if (module.hot) {
                module.hot.accept('./reducers/index', () =&gt; import('./reducers/index').then((module) =&gt; {
                    injectReducer('notebook', module.default);
                }));

                module.hot.accept('../settings/reducer', () =&gt; import('../settings/reducer').then((module) =&gt; {
                    injectReducer('settings', module.default(localStorage));
                }));

// @flow
import * as React from 'react';
import { graphql } from 'react-apollo';
import universal from 'react-universal-component';
import type { ProfileType } from '../../types/boldr';
import PROFILE_QUERY from './gql/userProfile.graphql';

const UniversalProfile = universal(import('./Profile'));

type Props = {
  loading: boolean,
  error?: Object,
  profile: ProfileType,
};

const Profile = ({ loading, error, profile }: Props) => (
  
);

// $FlowIssue
export default graphql(PROFILE_QUERY, {
  options: props => ({
    variables: {
      username: props.match.params.username,