4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-07-04

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

4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?