React Import error (Attempted import error: '×××' does not contain a default export (imported as '×××').)

reactで開発をしていた際にimportについてのエラーが発生したので解決方法をメモとして記録しようと思います。

エラー内容

App.jsとinde.jsは以下のようになっている。

App.js

import React from "react";

export const App = () => (
  <p>hello world!</p>
)

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

発生したエラーが以下である。

Attempted import error: './App' does not contain a default export 
(imported as 'App').

試したこと

App.jsのexport部分をconstからdefaultに変更したが別のエラーが発生した。

App.js

import React from "react";

//constからdefaultに変更
export default App = () => (
  <p>hello world!</p>
)

'App' is not defined  no-undef.

解決法 (export constを利用する場合)

constを利用する際は、import時に{}をつける必要がある。
importの記述を App から { App } と変更する。

App.js

import React from "react";

// export constを利用
export const App = () => (
  <p>hello world!</p>
)

index.js

import React from 'react';
import ReactDOM from 'react-dom';
// App から { App } と変更
import { App } from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

解決法 (export default を利用する場合)

export default を利用する際は、reactのComponentを継承してクラスを作成する。

App.js

import React, { Component } from "react";

// classを作成し、Componentを継承する
class App extends Component {
  render() {
    return (
      <p>hello world!</p>
    )
  }
}
// export defaultを利用
export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
// Appのまま
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

参考記事

ReactのComponentについて
React入門 ReactのComponent