How to use the react-loadable.Map function in react-loadable

const lines = props.value.split("\n").length;
    const height = CODEMIRROR_BUFFER + (lines * CODEMIRROR_LINE_HEIGHT);

    return (
      <div height="" style="{{">
        {contents}
      </div>
    );
  };

  ApproximateHeightLoader.propTypes = {
    value: PropTypes.string
  };

  // This loads Codemirror and all of its addons.
  const LoadableCodeMirror = Loadable.Map({
    loader: {
      CodeMirror: () =&gt; (
        import('./codemirror').then((module) =&gt; (
          // HACK: Add a "zero" delay after the module has
          // loaded, to allow their styles to take effect
          new Promise((resolve) =&gt; {
            setTimeout(() =&gt; resolve(module.default), 0);
          })
        ))
      )
    },

    loading() {
      return (
        
      );

))}
    
  );
}

// Wrapper around ContributorList that loads contributor data
type Props = {
  size?: number;
};

type Export = {
  contributors: Contributor[];
};

const ContributorList = Loadable.Map({
  loader: {
    contributors: () => getContributors(),
  },
  loading: (props: LoadingComponentProps) => {
    if (props.error) {
      return ;
    }
    if (props.pastDelay) {
      return ;
    }

    return null;
  },

  // This is not a proper render function, so prop validation doesn't work
  /* eslint-disable react/prop-types */

this.renderSelectedVenue(matchedVenues)
                )}
              
              
            
          )}
        
      
    );
  }
}

// Explicitly declare top level components for React hot reloading to work.
const ResponsiveVenuesContainer = makeResponsive(VenuesContainerComponent, breakpointDown('sm'));
const RoutedVenuesContainer = withRouter(ResponsiveVenuesContainer);
const AsyncVenuesContainer = Loadable.Map({
  loader: {
    venues: () => axios.get(nusmods.venuesUrl(config.semester)),
  },
  loading: (props: LoadingComponentProps) => {
    if (props.error) {
      return ;
    }

    if (props.pastDelay) {
      return ;
    }

    return null;
  },
  render(loaded, props) {
    return ;

this.codeMirrorInstance.setValue(this.props.results);
    }
  }

  render() {
    return (
      <div> this.resultsElement = el} className={this.props.className} style={this.props.style} /&gt;
    );
  }
}

// Instead of exporting the viewer directly, we'll export a `Loadable`
// Component that will allow us to load in dependencies and render the editor
// until then.
/* eslint-disable react/prop-types */
export default Loadable.Map({
  loader: {
    CodeMirror: () =&gt; (
      import('./codemirror').then((module) =&gt; (
        // Add a "zero" delay after the module has loaded, to allow their
        // styles to take effect.
        new Promise((resolve) =&gt; {
          setTimeout(() =&gt; resolve(module.default), 0);
        })
      ))
    )
  },

  loading(props: ReactLoadableLoadingProps) {
    if (props.error) {
      return (
        <div>{props.error}</div></div>

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

const LoadableGameRoutes = Loadable.Map({
  delay: 400,
  loading: () => <>,
  loader: {
    Component: () =>
      import(
        /* webpackChunkName: "game-routes" */ 'components/game-routes/routes'
      ),
  },
  render: (loaded, props) => {
    const Routes = loaded.Component.default;
    return ;
  },
});

export default function GameRoutes() {
  return ;

export default function createLoadableRenderer(options) {
  const LoadableRenderer = Loadable.Map(options);

  // Extends the behavior of LoadableComponent
  // generated by react-loadable
  // to provide post-render listeners
  class CustomLoadableRenderer extends LoadableRenderer {
    componentDidMount() {
      this.afterRender();
    }

    componentDidUpdate() {
      this.afterRender();
    }

    afterRender() {
      const { loaded, loading, error } = this.state;
      if (!loading) {

Loadable.Map = (options) => {
  return BaseLoadable.Map({
    loading: LoadingSpinner,
    ...options,
  });
};

component: (app) => {
      return Loadable.Map({
        loader: {
          Grid: () => import('./routes/Grid.js'),
          grid: () => import('./models/grid.js'),
        },
        delay: 200,
        timeout: 1000,
        loading: Loading,
        render(loaded, props) {
          let Grid = loaded["Grid"].default;
          let grid = loaded["grid"].default;
          registerModel(app, grid);
          return ;
        },
      });
    }

import Knex from "knex";
import { useState, useRef } from "react";
import SQLJSClient from "../utils/SQLJSClient";
import * as greldal from "../../../lib/universal";
import * as graphql from "graphql";
import Loadable from "react-loadable";
import SplitPane from "react-split-pane";
import styled from "styled-components";
import logo from "../assets/logo.png";

import "../styles/split-pane.css";

const Loading = () =&gt; <div>Loading...</div>;

const CodeMirror = Loadable.Map({
    loader: {
        ReactCodeMirror: () =&gt; import("react-codemirror"),
        resources: () =&gt;
            Promise.all([
                import("codemirror/lib/codemirror.css"),
                import("codemirror/mode/javascript/javascript"),
                import("codemirror/theme/monokai.css"),
                import("codemirror/addon/hint/show-hint"),
                import("codemirror/addon/lint/lint"),
                import("codemirror-graphql/hint"),
                import("codemirror-graphql/lint"),
                import("codemirror-graphql/mode"),
            ]),
    },
    render(loaded, { innerRef, ...props }) {
        let ReactCodeMirror = loaded.ReactCodeMirror.default;

const LoadableComponent = (component) => {
  const loader = { page: component.module };
  const compName = ChangeCase.pascalCase(component.key);

  if (component.style) {
    loader.style = () => import(`@site/demo/styles/${compName}Page`);
  }

  return Loadable.Map({
    loader,
    render: (loaded, props) => {
      return (
        
      );
    },
    loading: () => ,
  });
};