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

__deoptimization_sideEffect__(marker, realImport);
  }

  return realImport;
};

import { lazy, useImported } from "react-imported-component";
import { assignImportedComponents } from "react-imported-component/boot";
import imported from 'react-imported-component';
const AsyncComponent0 = imported(() => importedWrapper("imported_18g2v0c_component", import(
/* webpackChunkName:namedChunk */
'./MyComponent')));
const AsyncComponent1 = imported(() => importedWrapper("imported_18g2v0c_component", import('./MyComponent')));
const AsyncComponent2 = imported(async () => await importedWrapper("imported_18g2v0c_component", import('./MyComponent')));
const AsyncComponent3 = imported(() => Promise.all([importedWrapper("imported_18g2v0c_component", import('./MyComponent')), importedWrapper("imported_18g2v0c_component", import('./MyComponent'))]));
const AsyncComponent4 = imported(async () => (await Promise.all([importedWrapper("imported_-1qs8n90_component", import('./MyComponent1')), importedWrapper("imported_9j5sqq_component", import('./MyComponent2'))]))[0]);
export default AsyncComponent1;

import imported from 'react-imported-component';

const AsyncComponent0 = imported(() => import(/* webpackChunkName:namedChunk */'./MyComponent'));

const AsyncComponent1 = imported(() => import('./MyComponent'));

const AsyncComponent2 = imported(async () => await import('./MyComponent'));

const AsyncComponent3 = imported(() => Promise.all([import('./MyComponent'), import('./MyComponent')]));

const AsyncComponent4 = imported(async () => (await Promise.all([import('./MyComponent1'), import('./MyComponent2')]))[0]);

export default AsyncComponent1;

import * as React from 'react'
import Counter from './Counter'
import imported, {lazy, ComponentLoader, printDrainHydrateMarks} from 'react-imported-component'
import Portal from './Portal'
import Indirect from './indirectUsage';

imported(() => import(/* webpackChunkName: "namedChunk-1" */'./DeferredRender'), {
  async: true
});

const Async = imported(() => import(/* webpackChunkName: "namedChunk-1" */'./DeferredRender'));
const Async2 = lazy(() => {
    console.log('loading lazy');
    return import(/* webpackChunkName: "namedChunk-2" */'./Lazy')
});
const ShouldNotBeImported = imported(() => import(/* webpackChunkName: "namedChunk-2" */'./NotImported'));

const App = () => (
  <h1>
    <p>Component loaded</p>
     import(/* webpackChunkName: "namedChunk-1" */'./DeferredRender')}
    /&gt;
    <p>test!</p>
    <hr>
    <p>C: </p>
    <hr>
    <p>Imported: </p>
    <hr>
    
      <p>Lazy: </p>
    </h1>

export default function middleware(req, res) {
  // Generate the server-rendered HTML using the appropriate router
  const context = {};
  const markup = ReactDOM.renderToString(
    
      
    
  ) + printDrainHydrateMarks();

  // If react-router is redirecting, do it on the server side
  if (context.url) {
    return res.redirect(301, context.url);
  }

  const usedStyles = getUsedStyles(markup, projectStyles);
  console.log('used styles', usedStyles);
  // Format the HTML using the template and send the result
  const html = generateHtml('JS will start in ~2s<br>' + markup, usedStyles);
  res.send(html);
}

setTimeout(function () {
// rehydrate the bundle marks
  console.log('loading');
  rehydrateMarks().then(() => {
    console.log('loaded...');
    setTimeout(function () {
      console.log('rendering');
      // In production, we want to hydrate instead of render
      // because of the server-rendering
      if (1 || process.env.NODE_ENV === 'production') {
        ReactDOM.hydrate(app, element);
      } else {
        ReactDOM.render(app, element);
      }
    }, TM);
  });
}, TM);

// @flow
import {hot, setConfig} from 'react-hot-loader'
import * as React from 'react'
import Counter from './Counter'
import imported, {lazy, ComponentLoader, printDrainHydrateMarks} from 'react-imported-component'
import Portal from './Portal'
import Indirect from './indirectUsage';

imported(() => import(/* webpackChunkName: "namedChunk-1" */'./DeferredRender'), {
  async: true
});

const Async = imported(() => import(/* webpackChunkName: "namedChunk-1" */'./DeferredRender'));
const Async2 = lazy(() => {
    console.log('loading lazy');
    return import(/* webpackChunkName: "namedChunk-2" */'./Lazy')
});
const ShouldNotBeImported = imported(() => import(/* webpackChunkName: "namedChunk-2" */'./NotImported'));

const App = () => (
  <h1>
    <p>Component loaded</p>
     import(/* webpackChunkName: "namedChunk-1" */'./DeferredRender')}
    /&gt;
    <p>test!</p>
    <hr>
    <p>C: </p>
    <hr>
    <p>Imported: </p></h1>

import React from 'react';
import { Switch, BrowserRouter as Router, Route } from 'react-router-dom';
import importedComponent from 'react-imported-component';

import Home from './Home';
import Loading from './Loading';

const AsyncDynamicPAge = importedComponent(
  () => import(/* webpackChunkName:'DynamicPage' */ './DynamicPage'),
  {
    LoadingComponent: Loading
  }
);
const AsyncNoMatch = importedComponent(
  () => import(/* webpackChunkName:'NoMatch' */ './NoMatch'),
  {
    LoadingComponent: Loading
  }
);

const App = () => {
  return (
    
      <div>
        
      </div>

import * as React from "react";
import Home from "./components/Home";
import importedComponent, {ComponentLoader, loadableResource} from "react-imported-component";

const Another = importedComponent(() => import(/* webpackChunkName: namedChunk-0 */"./components/Another"), {
  LoadingComponent: () =&gt; <div>loading</div>
});
const Other1 = importedComponent(() =&gt; import(/* webpackChunkName: "namedChunk-1" */"./components/Other"));
const Other2 = importedComponent(() =&gt; import(/* webpackChunkName: "namedChunk-1" */"./components/OtherTween"));

const AnotherWrapped = importedComponent(() =&gt; import(/* webpackChunkName: namedChunk-0 */"./components/Another"), {
  render(Component, state, props: { prop: number }) {
    if (state === "loading") {
      return <span>
    }
    return <div></div>
  }
});
//import Another from "./components/Another";

// @ts-ignore
const importCss = () =&gt; import("./App.css");

export default function App() {
  return (</span>

htmlStream.on('end', () => {
    // push loaded chunks information
    headerStream.push(printDrainHydrateMarks(streamUID));
    // kill header stream on the main stream end
    headerStream.push(null);
    styledStream.end();
  });
}

export const ssr = getApplicationStream => (req, res) => {
  try {
    // If you were using Apollo, you could fetch data with this
    // await getDataFromTree(app);

    const context = {}
    const stream = getApplicationStream(req.originalUrl, context)

    if (context.url) {
      return res.redirect(301, context.url)
    }

    const [startingHTMLFragment, endingHTMLFragment] = getHTMLFragments({
      drainHydrateMarks: printDrainHydrateMarks()
    })

    res.status(200)
    res.write(startingHTMLFragment)
    stream.pipe(through(write, end(endingHTMLFragment))).pipe(res)
  } catch (e) {
    log.error(e)
    res.status(500)
    res.end()
  }
}