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

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

• javascript
• reactjs
• ecmascript-6
• webpack

1 Answer 1

Omit the curly braces:

import App from './components/App';

That's the trick with default, see.