javascript - React - 不変違反例外

Question

React を初めて使用するので、かなり簡単に見えるはずの作業に行き詰まっています。何が間違っているのかわかりません。

次のようなコンポーネントBasicReactComponent.jsがあります。

import React from 'react';

const BasicReactComp = () => {
  console.log('hi');
  return (
    <div>
      I was loaded from basic react comp.
    </div>
  );
};

export default BasicReactComp;

以下のように私のメインファイルでそれを呼び出そうとしています:

import React from 'react';
import ReactDOM from 'react-dom';
const BasicReactComp = require('./BasicReactComp');

ReactDOM.render(
 <BasicReactComp />,
 document.getElementById('foo')
);

以下のエラーが発生し続けます

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