Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

[Vadorequest]

I'm trying to get started with this lib and got stuck right away.

/** @jsx jsx */
import { jsx } from '@emotion/core';
import React from 'react';

import { Record } from '../../../utils/record';

const AssetInput = (props: Props) => {
  const {
    label,
    source,
    record,
  } = props;
  const FileStackAssetPicker = require('filestack-react');
  console.debug('AssetInput.props', props);
  console.debug('FileStackAssetPicker', FileStackAssetPicker);

  return (
    <div>
      {label}
      <FileStackAssetPicker
        apikey={'TOKEN'}
      />
    </div>
  );
};

type Props = {
  source: string;
  record?: Record;
  label?: string;
}

export default AssetInput;

This renders:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

[Vadorequest]

Found solution when writing issue, by looking at the content of FileStackAssetPicker.

Because I'm loading using require and not import (because the lib doesn't support SSR), I had to import it using:

  const FileStackAssetPicker = require('filestack-react').default;

The .default changes everything :)