export default not working webpack, reactjs

25,690

Omit the curly braces:

import App from './components/App';

That's the trick with default, see.

Share:
25,690
fgonzalez
Author by

fgonzalez

Updated on August 21, 2020

Comments

  • fgonzalez
    fgonzalez over 3 years

    I'm new to webpack, I'm starting to build an app using webpack and react 15, however it's like the export default is not working properly because I got an error as the App component is not found:

     5:9  App not found in './components/App'  import/named
    

    Below the code of my 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';
    
    
    
    const store = configureStore();
    
    const history = syncHistoryWithStore(browserHistory, store);
    ReactDOM.render(
        <Provider store={store}>
            <Router history={history}>
                <Route path="/" component={App}>
                    <IndexRoute component={HomePage}/>
    
    
    
                </Route>
    
    
            </Router>
    
        </Provider>,
        document.getElementById('app')
    );
    

    and the code of my App.js placed under components folder:

    import React, { PropTypes } from 'react';
    
    
    const App = (props) => {
      return (
        <div>
          {props.children}
        </div>
      );
    };
    
    App.propTypes = {
      children: PropTypes.element
    };
    
    export default App;
    

    Can anyone see the problem? Looks like this type of export is not supported and I have to enable something? Any help is appreciatted!!