import SystemJS from 'systemjs';
import create from 'cloud-component';

const registryServer = process.env.REACT_APP_COMPONENT_REGISTRY_SERVER || '';

const { loadComponent, CloudComponent } = create(SystemJS, registryServer);

export { loadComponent };

export default CloudComponent;

import create from 'cloud-component';

const registryServer = process.env.REACT_APP_COMPONENT_REGISTRY_SERVER || '';

/* eslint-disable global-require, import/no-dynamic-require */
// @ts-ignore
const { loadComponent, CloudComponent } = create(require, registryServer);

export { loadComponent };

export default CloudComponent;

import create from 'cloud-component';

const registryServer = process.env.REACT_APP_COMPONENT_REGISTRY_SERVER || '';

// 如果未指定任何模块加载器, 尝试在全局变量中查找合适的加载器(requirejs, sysyemjs)
const { loadComponent, CloudComponent } = create(null, registryServer);

export { loadComponent };

export default CloudComponent;

import create from 'cloud-component';

const mapper =
  process.env.NODE_ENV === 'development'
    ? {
        'test-project/WhatToEat': 'http://test.com/WhatToEat',
      }
    : null;

const registryServer = process.env.REACT_APP_COMPONENT_REGISTRY_SERVER || '';

// 如果未指定任何模块加载器, 尝试在全局变量中查找合适的加载器(requirejs, sysyemjs)
const { loadComponent, CloudComponent } = create(null, registryServer);

export { loadComponent };

export default CloudComponent;

<CloudComponent name="project/component" fallback={<CustomLoading />} />

import { CloudComponentConfigProvider } from 'cloud-component';

const ErrorComponent = ({errorMessage}) => <Alert type="error">{errorMessage}</Alert>

<CloudComponentConfigProvider fallback={<CustomLoading />} ErrorComponent={ErrorComponent}>
  <CloudComponent name="project/component1" />
  <CloudComponent name="project/component2" />
</CloudComponentConfigProvider>;