导出默认不工作webpack，reactjs

Question

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!!

Answer 1

Omit the curly braces:

import App from './components/App';

That's the trick with default , see .