CODEWITHSUNDEEP
javascriptecmascript-6exportes6-moduleses6-module-loader
venkata
venkata

Reputation: 618

es6 export throws Parsing error: Unexpected token

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

Upvotes: -1

Views: 5113

Answers (1)

Nikita Shalin
Nikita Shalin

Reputation: 64

  1. You get an error because you have invalid export syntax. Try export class App instead.
  2. 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;
  3. 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
  1. 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.

Upvotes: 2

Related Questions