Function asyncComponent

src/asyncComponent.js:6–203

(config)

const validSSRModes = ['resolve', 'defer', 'boundary']

export default function asyncComponent(config) {
  const {
    name,
    resolve,
    autoResolveES2015Default = true,
    serverMode = 'resolve',
    LoadingComponent,
    ErrorComponent,
  } = config

  if (validSSRModes.indexOf(serverMode) === -1) {
    throw new Error('Invalid serverMode provided to asyncComponent')
  }

  const env =
    ['node', 'browser'].indexOf(config.env) > -1
      ? config.env
      : typeof window === 'undefined' ? 'node' : 'browser'

  const state = {
    // A unique id we will assign to our async component which is especially
    // useful when rehydrating server side rendered async components.
    id: null,
    // This will be use to hold the resolved module allowing sharing across
    // instances.
    // NOTE: When using React Hot Loader this reference will become null.
    module: null,
    // If an error occurred during a resolution it will be stored here.
    error: null,
    // Allows us to share the resolver promise across instances.
    resolver: null,
    // Indicates whether resolving is taking place
    resolving: false,
    // Handle on the contexts so we don't lose it during async resolution
    asyncComponents: null,
    asyncComponentsAncestor: null,
  }

  const needToResolveOnBrowser = () =>
    state.module == null &&
    state.error == null &&
    !state.resolving &&
    typeof window !== 'undefined'

  // Takes the given module and if it has a ".default" the ".default" will
  // be returned. i.e. handy when you could be dealing with es6 imports.
  const es6Resolve = x =>
    autoResolveES2015Default &&
    x != null &&
    (typeof x === 'function' || typeof x === 'object') &&
    x.default
      ? x.default
      : x

  const getResolver = () => {
    if (state.resolver == null) {
      state.resolving = true
      try {