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)

Answer 1

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.