CODEWITHSUNDEEP
reactjsecmascript-6
dagda1
dagda1

Reputation: 28890

es6 syntax for exporting modules in one file

I want to have an index.js that defines all my react components like this:

import App from './app';
import Home from './home';

export App;
export Home;

I then reference them in another file:

import { App, Home } from './components/index';

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

But I get this error:

Module build failed: SyntaxError: /Users/paulcowan/projects/liverpool-managers/client/app/components/index.js: Unexpected token (4:10)
  2 | import Home from './home';
  3 | 
> 4 | export App;
    |           ^

Upvotes: 2

Views: 455

Answers (3)

Mike McG
Mike McG

Reputation: 386

I ran into this same issue recently, and essentially export is not designed to be used this way - it "is used to export functions, objects or primitives" docs, not "imported modules", but you can simulate it by assigning the imported modules to a plain object and then export defaulting that object.

import App from './app';
import Home from './home';

const exports = {
    App,
    Home,
};

export default exports;

You then have to import the whole object, unfortunately, but if the main purpose is just to have a single module import point, that's probably not too bad.

I wouldn't be surprised if this behavior changes when we get native implementations rather than being limited by transpilers, but this solution isn't too verbose or unreadable.

Upvotes: 1

Galeel Bhasha
Galeel Bhasha

Reputation: 1895

export as shown below. 

import App from './app';
import Home from './home';

export {App, Home};

Hope this one works for you.

Alternatively, you can write your import as below (named object reference)

import * as Components from './components/index';

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

Upvotes: 5

QoP
QoP

Reputation: 28397

That's not the correct way to use export

this

export App;
export Home;

should be

export {App, Home}

or 

export App from './app';
export Home from './home';

Upvotes: 4

Related Questions