1

I have a file MainContainer.jsx in which I've written this code:

import React, { Component } from 'react'

/**
 * Main Container, this will pass on all the Redux Store,
 * Router references to child elements.
 */
class MainContainer extends Component {
  /**
   * React Lifecycle Method: Renders the data
   *
   * @return {DOM} Main container DOM.
   */
  render() {
    return (
      <p>Hello world</p>
    )
  }
}

export default MainContainer

This is address to the file: app/containers/Main/MainContainer.jsx

I am trying to export everything present in container directory via index.js file. Here is the content of the file:

export MainContainer from './Main/MainContainer'

I've set webpack alias for containers directory as $CONTAINERS. Now I am trying to import MainContainer like this:

import MainContainer from '$CONTAINERS' // no need to pass the MainContainer full path, as it's being exported from index.js

Now I am getting build error at index.js:

 @ ./app/index.jsx 13:14-39
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server babel-polyfill ./app ./app/styles/main.css

ERROR in ./app/containers/index.js
Module build failed: SyntaxError: Unexpected token, expected { (1:7)

> 1 | export MainContainer from './Main/MainContainer'
    |        ^
  2 |

 @ ./app/config/routes.jsx 21:19-41
 @ ./app/index.jsx

Does anybody know what am I missing here...

Bharat Soni
  • 2,824
  • 6
  • 23
  • 48
  • ```export {MainContainer} from './Main/MainContainer'``` Try doing this. – Adeel Imran Sep 24 '17 at 12:02
  • 1
    I'm exporting `MainContainer` as `default`. Look at the bottom of `MainContainer.jsx`. I don't think this will solve the issue. – Bharat Soni Sep 24 '17 at 12:03
  • Surroung your ```MainContainer``` with curly braces – Adeel Imran Sep 24 '17 at 12:04
  • But you need curly braces if you are not exporting it by default. – Bharat Soni Sep 24 '17 at 12:05
  • Oh I thought you were trying not to export it by default. Can you try one thing. do this ```import MainContainer from './Main/MainContainer';``` and then do ```export MainContainer``` does it still give the same error bro? – Adeel Imran Sep 24 '17 at 12:07
  • you don't have to `import` to `export`. Please checkout the `export` documentation. – Bharat Soni Sep 24 '17 at 12:11
  • 2
    You can either export something as default (then you should write 'default' instead of 'MainContainer' in index.js) or as a named export (then you need to use curly braces in index.js). You can't just 'pipe' the type of export through separate modules. MainContainer.jsx is a module (that has a default export) and index.js is a module (for which you have to decide if it should export a default or a named property). – 4nduril Sep 24 '17 at 12:18

0 Answers0