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

import loadable from "@loadable/component"

export const Home = loadable(() => import(/* other comment */ "./views/Home"))
export const About = loadable(() =>
  import(/* webpackChunkName: "About" */ "./views/About")
)
export const Contact = loadable(() =>
  import(/* webpackMode: "lazy" */ /* webpackFoo: "bar" */ "./views/Contact")
)

/** @format */

import React, { Component } from 'react';
import { Dispatch, bindActionCreators, ActionCreatorsMapObject } from 'redux';
import { connect } from 'react-redux';
import { LocalForm, Control } from 'react-redux-form';
import loadable from '@loadable/component';

import { Icon } from 'UI';
import { RequestParams } from 'app/utils/RequestParams';
import { t, I18NLink } from 'app/I18N';
import { enable2fa as enable2faAction, enable2faType } from './actions/actions';
import Auth2faAPI from './Auth2faAPI';

const QRCode = loadable(() => import(/* webpackChunkName: "qrcode.react" */ 'qrcode.react'));

type Configure2faProps = {
  userUsing2fa: boolean;
  enable2fa: () => enable2faType | void;
};

type State = {
  conflict: boolean;
  otpauth: string;
  secret: string;
};

const goToAccount = (type: string, label: string) => (
  
    {t('System', label)}

// something is wrong with lerna, typescript and this import: import { lazyLoad } from '@react-page/core';
import loadable from '@loadable/component';
import React from 'react';
import darkTheme from './ThemeProvider/DarkTheme';
const Trash = loadable(() => import('./Trash/index'));
const Toolbar = loadable(() => import('./Toolbar/index'));
const DisplayModeToggle = loadable(() => import('./DisplayModeToggle/index'));
const BottomToolbar = loadable(() => import('./BottomToolbar/index'));
const ThemeProvider = loadable(() => import('./ThemeProvider/index'));
const ImageUpload = loadable(() => import('./ImageUpload/index'));
const ColorPicker = loadable(() => import('./ColorPicker/index'));

import { colorToString } from './ColorPicker/colorToString';

const Provider = loadable(() => import('./Provider'));

export default ({ editor }) => (
  
    
    
    
  
);
export {

import loadable from '@loadable/component';
import PendingRouterLoader from '../utils/router';

const mainRouter = [
  {
    name: '工作区',
    key: 'index',
    path: '/index',
    component: loadable(() => import(/* webpackChunkName: 'index' */ '../views/index')),
    routes: [],
  },
  {
    name: '登录',
    key: 'login',
    path: '/login',
    component: loadable(() => import(/* webpackChunkName: 'login' */ '../views/user/login')),
    redirect: {
      from: '/',
      to: '/login',
    },
  },
  {
    name: '首页',
    key: 'cymap',
    path: '/',
    component: loadable(() => import(/* webpackChunkName: 'cymapMain' */ '../views/cymapMain/index')),
  },
];

const routes = (
  
    {renderRoutes(mainRouter)}

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

// Layout
import Layout from './Layout';
import FullScreenLayout from './FullScreenLayout';
// Signing
const SignInPage = loadable(() => import('components/page/SignInPage'));
const SignUpPage = loadable(() => import('components/page/SignUpPage'));
// Index
const IntroPage = loadable(() => import('components/page/IntroPage'));
// Component
const ComponentChartsPage= loadable(() => import('components/page/ComponentChartsPage'));
const ComponentHighchartsPage= loadable(() => import('components/page/ComponentHighchartsPage'));
const ComponentTablePage= loadable(() => import('components/page/ComponentTablePage'));
const ComponentNumberPage= loadable(() => import('components/page/ComponentNumberPage'));
const ComponentWeatherPage= loadable(() => import('components/page/ComponentWeatherPage'));
// Layering
const LayeringMapPage= loadable(() => import('components/page/LayeringMapPage'));
const LayeringHeatMapPage= loadable(() => import('components/page/LayeringHeatMapPage'));
// Setting
const SettingsPage= loadable(() => import('components/page/SettingsPage'));
// Superuser
const SuperuserPage= loadable(() => import('components/page/SuperuserPage'));
// Not found
const NotFoundPage= loadable(() => import('components/page/NotFoundPage'));

// Manager
import LocalStorageManager from 'manager/LocalStorageManager';
// Theme
import StickyBoardThemes from 'theme/StickyBoardThemes';
// Constants
import LocalStorageConst from 'constants/LocalStorageConst';

import loadable from '@loadable/component'
import { ABOUT_PATH } from '../../constant/url'

const AboutView = loadable(() => import('./AboutView'))

export default {
  path: ABOUT_PATH,
  component: AboutView
}

const loadComponent = (resolve: any): any => loadable(resolve, {
  LoadingComponent: ,
  rorComponent: ErrorDisplay,
})

{
    path: '/paper-item-demo',
    component: loadable(() => import('./components/common/paperItem/demo'), {
      fallback: <div>loading ...</div>,
    }),
    exact: true,
  },
  { component: ErrorPage },
];

interface RootRoutesProps extends RouteComponentProps {}

const DialogComponent = loadable(() =&gt; import('./components/dialog'));
const FeedbackButton = loadable(() =&gt; import('./containers/feedbackButton'));
const ImprovedHeader = loadable(() =&gt; import('./components/layouts/improvedHeader'));
const SnackbarComponent = loadable(() =&gt; import('./components/snackbar'));
const PopupConsentBanner = loadable(() =&gt; import('./components/popupConsentBanner'));

const DefaultHelmet = () =&gt; {
  return (
    
      
      
      
      
      <title>Scinapse | Academic search engine for paper</title>

pidgin: loadable(() => import('./pidgin.js')),
  portuguese: loadable(() => import('./portuguese.js')),
  punjabi: loadable(() => import('./punjabi.js')),
  russian: loadable(() => import('./russian.js')),
  scotland: loadable(() => import('./scotland.js')),
  serbian: loadable(() => import('./serbian.js')),
  sinhala: loadable(() => import('./sinhala.js')),
  somali: loadable(() => import('./somali.js')),
  swahili: loadable(() => import('./swahili.js')),
  tamil: loadable(() => import('./tamil.js')),
  telugu: loadable(() => import('./telugu.js')),
  thai: loadable(() => import('./thai.js')),
  tigrinya: loadable(() => import('./tigrinya.js')),
  turkce: loadable(() => import('./turkce.js')),
  ukchina: loadable(() => import('./ukchina.js')),
  ukrainian: loadable(() => import('./ukrainian.js')),
  urdu: loadable(() => import('./urdu.js')),
  uzbek: loadable(() => import('./uzbek.js')),
  vietnamese: loadable(() => import('./vietnamese.js')),
  yoruba: loadable(() => import('./yoruba.js')),
  zhongwen: loadable(() => import('./zhongwen.js')),
};

export default loadableConfig;

const L = loadable(() => import('../layout'));
const HomePage = loadable(() => import('../pages/home'));
const NotFoundPage = loadable(() => import('../pages/not-found'));
const ServerErrorPage = loadable(() => import('../pages/server-error'));
const WhatWeDoPage = loadable(() => import('../pages/what-we-do'));
const OfflinePage = loadable(() => import('../pages/offline'));
const BrowserNotSupported = loadable(() => import('../pages/browser-not-supported'));
const AboutUsPage = loadable(() => import('../pages/about-us'));
const CookiePolicyPage = loadable(() => import('../pages/cookie-policy'));
const PrivacyPolicyPage = loadable(() => import('../pages/privacy-policy'));
const TermsAndConditions = loadable(() => import('../pages/terms-and-conditions'));

const JoinUsPage = loadable(() => import('../pages/join-us'));
const JobPage = loadable(() => import('../pages/job'));
const Events = loadable(() => import('../pages/events'));
const EventPage = loadable(() => import('../pages/event'));
const OurWorkPage = loadable(() => import('../pages/our-work'));
const MeetOurTeam = loadable(() => import('../pages/meet-our-team'));
const BadgerProfile = loadable(() => import('../pages/badger-profile'));
const Technology = loadable(() => import('../pages/technology'));

const BankCaseStudy = loadable(() => import('../pages/our-work/case-study/bank'));
const BMWCaseStudy = loadable(() => import('../pages/our-work/case-study/bmw'));
const BBCCaseStudy = loadable(() => import('../pages/our-work/case-study/bbc'));
const CamdenMarketCaseStudy = loadable(() => import('../pages/our-work/case-study/camden-market'));
const CarTrawlerCaseStudy = loadable(() => import('../pages/our-work/case-study/car-trawler'));
const CarTrawlerMyAccountCaseStudy = loadable(() =>
  import('../pages/our-work/case-study/car-trawler-my-account'),
);
const FinancialTimesCaseStudy = loadable(() => import('../pages/our-work/case-study/ft'));
const FMTeaCaseStudy = loadable(() =>