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')
);