es6 export throws Parsing error: Unexpected token

Question

App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

     class App extends Component {
      render() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <p>
                Edit <code>src/App.js</code> and save to reload.
              </p>
              <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
              >
                Learn React
              </a>
            </header>
          </div>
        );
      }
    };

    export App

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import   App   from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

(1)When I run the the above code I am getting the below error at last line of App.js i.e export statement

"parsing error:unexpected token"

The error wouldnt go away even when imported the module as

import   { App }  from './App';

I am aware that we can fix this error by writing

export default App

instead of

export App

it also works if we just append export to App as below

export class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
};

I am not able to figure out this behavior of export statement .I googled but they are only confusing me more.

2)Also whats the difference between

export App

vs

export const App

score 2 · Accepted Answer · answered Feb 13 '19 at 11:27

2

You get an error because you have invalid export syntax. Try export class App instead.
When you write export class App, it means that you export a class with a name 'App' from this module. It could be imported then by its name like so: import { App } from App.js;
export default makes passed entity a default exported entity. It means that when you don't specify a name in import statement, default entity will be imported.

// App.js
export default App;

// other_module.js
import App from App.js // import default from App.js and put it into 'App' var

export const App means that App won't change in the module from which it was imported. export App is invalid syntax, take a look at export let for clarification on what's the difference.

answered Feb 13 '19 at 11:27

Nikita Shalin

44
5

Thanks @Nikita shalin ."export default App " works without mentioning type as class.why i need to mention the type of App while exporting as "export class App"?we can export any object using export ,correct? like "export { login,logout } ".class which is a syntactic sugar for function is also an object ,so why cant i simply attach export in front of any object to have it exported? I am only used to NodejS common js syntax.newbie to es6 moudles. – venkata Feb 13 '19 at 11:42
1

@venkata, "export default" accepts any kind of statement: variable, class declaration or function declaration. Other exports are called "named exports" and you should either prepend "export" to var, function or class declaration or export already declared entity like so: "export { App };" – Nikita Shalin Feb 13 '19 at 12:03
1

@venkata, you are right. You can export an object directly or a constant by saying `export const foo = 'bar'`. But your syntax is invalid. While exporting you have to mention what type it is. If it is an object export { foo }, if constant export const and if class, export class. Else use default which will the value defined. You can get more information about exports here: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export – Vinod Kolla Feb 13 '19 at 12:05

es6 export throws Parsing error: Unexpected token

App.js:

index.js:

1 Answers1