Troubleshooting “export default” not working in webpack with ReactJS

Export Default Not Working in Webpack and ReactJS

If you are new to webpack and you’re building an application using webpack and ReactJS, you might encounter issues with the export default statement. One common problem is receiving an error stating that a component, such as the App component, is not found. In this blog post, we’ll explore the possible reasons why this error occurs and how to resolve it.

The Error Message

When you encounter the error message App not found in './components/App', it means that the App component is not being imported correctly in your index.js file. Let’s take a closer look at your index.js code snippet:

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'; // The problematic line
import {HomePage} from './components/HomePage';

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

// Rest of the code...

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

The issue arises from the line {App} where the App component is imported within curly braces. However, since the App component is exported as a default, it does not require the curly braces in the import statement.

Solution: Omit the Curly Braces

To resolve this issue, you need to remove the curly braces from the import statement for the App component. Update the line {App} to:

import App from './components/App';

By omitting the curly braces, you are importing the App component as the default export, allowing it to be properly recognized by the index.js file.

Conclusion

In this blog post, we discussed the problem with the export default statement not working in webpack and ReactJS. We identified that the issue arises when importing the component with curly braces instead of using the default import syntax. By omitting the curly braces in the import statement, we were able to resolve the error and allow the App component to be recognized properly.

Hopefully, this solution helps you in resolving the “App not found” error when using the export default statement with webpack and ReactJS. Happy coding!

reference : 

reactjs