How to use the @loadable/component.lib function in @loadable/component

// Should allow passing fallback prop
    loading...} />;

    // Should allow preloading
    LazyComponent.preload();

    // Should allow force loading
    LazyComponent.load().then(Component => {
        ;
    });
}

// loadable.lib
{
    // Should infer types from module with default export and reflect them in children render prop
    const LoadableDefaultLibrary = loadable.lib(defaultImportLibLoader);
    {({ default: { getTestObj } }) => getTestObj().foo};

    // Should infer types from module without default export and reflect them in children render prop
    const LoadableLibrary = loadable.lib(importLibLoader);
    {({ getTestObj }) => getTestObj().foo};

    // Should allow passing fallback JSX element
    loadable.lib(importLibLoader, { fallback: <div>loading lib...</div> });

    // Should allow passing boolean to `ssr` in options
    loadable.lib(defaultImportComponentLoader, { ssr: true });

    // Should allow passing function to `cacheKey` in options
    loadable.lib(defaultImportComponentLoader, { cacheKey: props =&gt; props.foo });

    // Should allow passing fallback prop

;
    });
}

// loadable.lib
{
    // Should infer types from module with default export and reflect them in children render prop
    const LoadableDefaultLibrary = loadable.lib(defaultImportLibLoader);
    {({ default: { getTestObj } }) => getTestObj().foo};

    // Should infer types from module without default export and reflect them in children render prop
    const LoadableLibrary = loadable.lib(importLibLoader);
    {({ getTestObj }) => getTestObj().foo};

    // Should allow passing fallback JSX element
    loadable.lib(importLibLoader, { fallback: <div>loading lib...</div> });

    // Should allow passing boolean to `ssr` in options
    loadable.lib(defaultImportComponentLoader, { ssr: true });

    // Should allow passing function to `cacheKey` in options
    loadable.lib(defaultImportComponentLoader, { cacheKey: props =&gt; props.foo });

    // Should allow passing fallback prop
    Loading library...}&gt;{({ getTestObj }) =&gt; getTestObj().foo};

    // Should reflect inferred types from module in ref
    const ref = React.createRef();
    ;
    ref.current!.getTestObj().foo;

    // Should allow preloading

// loadable.lib
{
    // Should infer types from module with default export and reflect them in children render prop
    const LoadableDefaultLibrary = loadable.lib(defaultImportLibLoader);
    {({ default: { getTestObj } }) => getTestObj().foo};

    // Should infer types from module without default export and reflect them in children render prop
    const LoadableLibrary = loadable.lib(importLibLoader);
    {({ getTestObj }) => getTestObj().foo};

    // Should allow passing fallback JSX element
    loadable.lib(importLibLoader, { fallback: <div>loading lib...</div> });

    // Should allow passing boolean to `ssr` in options
    loadable.lib(defaultImportComponentLoader, { ssr: true });

    // Should allow passing function to `cacheKey` in options
    loadable.lib(defaultImportComponentLoader, { cacheKey: props =&gt; props.foo });

    // Should allow passing fallback prop
    Loading library...}&gt;{({ getTestObj }) =&gt; getTestObj().foo};

    // Should reflect inferred types from module in ref
    const ref = React.createRef();
    ;
    ref.current!.getTestObj().foo;

    // Should allow preloading
    LoadableLibrary.preload();

    // Should allow force loading

LazyComponent.preload();

    // Should allow force loading
    LazyComponent.load().then(Component => {
        ;
    });
}

// loadable.lib
{
    // Should infer types from module with default export and reflect them in children render prop
    const LoadableDefaultLibrary = loadable.lib(defaultImportLibLoader);
    {({ default: { getTestObj } }) => getTestObj().foo};

    // Should infer types from module without default export and reflect them in children render prop
    const LoadableLibrary = loadable.lib(importLibLoader);
    {({ getTestObj }) => getTestObj().foo};

    // Should allow passing fallback JSX element
    loadable.lib(importLibLoader, { fallback: <div>loading lib...</div> });

    // Should allow passing boolean to `ssr` in options
    loadable.lib(defaultImportComponentLoader, { ssr: true });

    // Should allow passing function to `cacheKey` in options
    loadable.lib(defaultImportComponentLoader, { cacheKey: props =&gt; props.foo });

    // Should allow passing fallback prop
    Loading library...}&gt;{({ getTestObj }) =&gt; getTestObj().foo};

    // Should reflect inferred types from module in ref
    const ref = React.createRef();

import './main.css'

const A = loadable(() => import('./letters/A'))
const B = loadable(() => import('./letters/B'))
const C = loadable(() => import(/* webpackPreload: true */ './letters/C'))
const D = loadable(() => import(/* webpackPrefetch: true */ './letters/D'))
const E = loadable(() => import('./letters/E'), { ssr: false })
const X = loadable(props => import(`./letters/${props.letter}`))
const Sub = loadable(props => import(`./letters/${props.letter}/file`))
const RootSub = loadable(props => import(`./${props.letter}/file`))

// We keep some references to prevent uglify remove
A.C = C
A.D = D

const Moment = loadable.lib(() => import('moment'))

const App = () => (
  <div>
    <a>
    <br>
    <b>
    <br>
    
    <br>
    
    <br>
    
    <br>
    <sub>
    <br>
    </sub></b></a></div>

function getPage(filePath) {
  const rawName = getFileName(filePath)
  const isWildCard = !rawName.endsWith('$')
  const name = rawName.replace('$', '')
  const isIndex = name === 'index'
  const indexPath = getIndexPath(isIndex, name)
  const routePath = getRoutePath(isIndex, isWildCard, name)
  const LoadableComponent = loadable.lib(() =>
    import(`__smooth_pages/${rawName}`),
  )
  return {
    isIndex,
    isWildCard,
    indexPath,
    routePath,
    filePath,
    LoadableComponent,
  }
}

import React, { useState } from 'react'
import { render } from 'react-dom'
import loadable from '@loadable/component'

const Hello = loadable(() => import('./Hello'))
const Dynamic = loadable(p => import(`./${p.name}`), {
  cacheKey: p => p.name,
})
const Moment = loadable.lib(() => import('moment'))

function App() {
  const [name, setName] = useState(null)

  return (
    <div>
      <button type="button"> setName('A')}&gt;
        Go to A
      </button>
      <button type="button"> setName('B')}&gt;
        Go to B
      </button>
      {name &amp;&amp; }
      
      {({ default: moment }) =&gt; moment().format('HH:mm')}
    </div>