“export default”가 webpack과 ReactJS에서 작동하지 않는 문제 해결

웹팩과 ReactJS에서 export default가 작동하지 않는 문제 해결하기

웹팩과 ReactJS를 사용하여 애플리케이션을 개발하는 초보자라면 export default 문장에 문제를 마주칠 수 있습니다. 일반적으로 발생하는 문제 중 하나는 App 컴포넌트와 같은 컴포넌트를 찾을 수 없다는 오류가 발생하는 것입니다. 이 블로그 포스트에서는 이러한 오류가 발생하는 가능한 이유와 그 해결 방법을 알아보겠습니다.

오류 메시지

App not found in './components/App'과 같은 오류 메시지가 표시된다면, index.js 파일에서 App 컴포넌트를 올바르게 가져오지 못하고 있다는 의미입니다. index.js 코드 조각을 자세히 살펴보겠습니다:

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, IndexRoute, browserHistory} from 'react-router';
import { Provider } from 'react-redux';
import {App} from './components/App'; // 문제가 되는 부분
import {HomePage} from './components/HomePage';

import configureStore from './store/configureStore.js';
import { syncHistoryWithStore } from 'react-router-redux';

// 나머지 코드...

ReactDOM.render(
    <Provider store={store}>
        <Router history={history}>
            <Route path="/" component={App}>
                <IndexRoute component={HomePage}/>
            </Route>
        </Router>
    </Provider>,
    document.getElementById('app')
);

문제는 {App} 라인에서 중괄호 내에 App 컴포넌트를 가져온 것에서 생깁니다. 그러나 App 컴포넌트는 기본적으로 내보내기(default export) 되므로, 가져오기(import) 문에 중괄호가 필요하지 않습니다.

해결책: 중괄호를 생략하기

이 문제를 해결하기 위해 중괄호를 가져오기 문장에서 제거해야 합니다. {App} 라인을 아래와 같이 업데이트하세요:

import App from './components/App';

중괄호를 생략함으로써, App 컴포넌트를 기본 내보내기로 가져옴으로써 index.js 파일에서 올바르게 인식될 수 있게 됩니다.

결론

이 블로그 포스트에서는 웹팩과 ReactJS에서 export default 문장이 작동하지 않는 문제에 대해 논의했습니다. 중괄호 대신 기본 가져오기(import) 구문을 사용하여 컴포넌트를 가져오는 경우에 문제가 발생하는 것을 확인했습니다. 가져오기 문장에서 중괄호를 생략함으로써 오류를 해결하고, App 컴포넌트가 올바르게 인식될 수 있도록 했습니다.

이 해결책이 webpack과 ReactJS에서 export default 문장을 사용할 때 “App not found” 오류를 해결하는 데 도움이 되기를 바랍니다. 즐거운 코딩하세요!

참고 자료 : 

reactjs