Unexpected token error in React app

Question

Ok so I have an issue where I've been following along with a Udacity course. The problem is the entire course app has been contained in one file and has steadily become harder and harder to pore through to find where issues are.

At some point an error has crept in, I think it's a syntax error, where I've added or missed out a bracket or something along those lines, but I can't find where it's happened.

I think it's specific to the below App component but can't see what I have done wrong.

The syntax highlighting in VS Code points to the below line where const is not highlighted as it is in other areas of the code.

const Context = React.createContext()

class App extends React.Component { const Context = React.createContext() class ConnectedApp extends React.Component { render() { return ( <Context.Consumer> {(store) => ( <App store={store}/> )} </Context.Consumer> ) } } class Provider extends React.Component { render() { <Context.Provider value={this.props.store}> { this.props.children } </Context.Provider> } } componentDidMount () { const { store } = this.props store.dispatch(handleIitialData()) store.subscribe( () => this.forceUpdate()) } render() { const { store } = this.props const { todos, goals, loading } = store.getState() if(loading) { return <h3>Loading</h3> } return( <div> < Todos todos={todos} store={this.props.store} /> < Goals goals={goals} store={this.props.store} /> </div> ) } }

Error

babel.min.js:27 Uncaught SyntaxError: Inline Babel script: Unexpected token (108:18) 106 | class App extends React.Component { 107 | > 108 | const Context = React.createContext() | ^ 109 | 110 | class ConnectedApp extends React.Component { 111 | render() { at r.l.raise (babel.min.js:27) at r.c.unexpected (babel.min.js:27) at r.c.expect (babel.min.js:27) at r.m.parseMethod (babel.min.js:27) at r.parseClassMethod (babel.min.js:28) at r.m.parseClassBody (babel.min.js:27) at r.m.parseClass (babel.min.js:27) at r.m.parseStatement (babel.min.js:27) at r.parseStatement (babel.min.js:27) at r.m.parseBlockBody (babel.min.js:27)

SirPeople · Accepted Answer · 2018-06-21 17:25:49Z

This is because the syntax you are trying to use in that class is not in your babel configuration or supported by your engine (node / browser) (and it is just a proposal for the class public fields proposal).

You should rather add support for that syntax in your babel (stage-3), knowing that there is a risk for this syntax to not pass as a final feature of the language.

Or declare the Context constant outside the class (or inside the constructor of the class and then access it using this context).

Example (from the official documentation but adapted to your code):

// the Context is created outside App const Context = React.createContext(); // Also ConnectedApp and Provider are OUTSIDE App (The console doesnt complain now, but it will after you fix the one with const) class Provider extends React.Component { render() { <Context.Provider value={this.props.store}> { this.props.children } </Context.Provider> } } class App extends React.Component { componentDidMount () { const { store } = this.props store.dispatch(handleIitialData()) store.subscribe( () => this.forceUpdate()) } render() { const { store } = this.props const { todos, goals, loading } = store.getState() if(loading) { return <h3>Loading</h3> } return( <div> < Todos todos={todos} store={this.props.store} /> < Goals goals={goals} store={this.props.store} /> </div> ) } } // ConnectedApp goes after App since it uses App internally class ConnectedApp extends React.Component { render() { return ( <Context.Consumer> {(store) => ( <App store={store}/> )} </Context.Consumer> ) } }

There are other React concept errors in your code, but since you are following a course I guess this is intentional by the moment.

Can you show what you mean by this, Or declare the Context constant outside the class (or inside the constructor of the class and then access it using this context)?
Before doing class App extends React.Component. you declare on top of that your const
Maybe I'm just being solid, not sure what that means exactly. Can you show an example
Done @RichC, take a look at my answer with your code edited. I moved 2 things. The const and both classes Provider and ConnectedApp outside App. ConnectedApp depends on App class to be instiantiated, so it will go at the bottom.

Collectives™ on Stack Overflow

Unexpected token error in React app

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related