JavaScript React Basics (retired) Thinking in Components Mocking up our Application

Matthew Kiernand
Matthew Kiernand
363 Points

Workspaces will not load - stuck on 'Loading Workspace'

For some reason my workspace is unable to load, when I initially tried to test it out, the changes I was making in the react application were not being reflected in the preview. Any ideas? Using Chrome.

Christian Tucker
Christian Tucker
Pro Student 1,987 Points

I'm having the same problem. I've tried Firefox, Chrome, Opera, and Microsoft Edge. It just sits there at "LOADING..."

Tom Hughes
Tom Hughes
10,174 Points

Same issue, running Safari 10.1 on Mac.

Juan Avalos
Juan Avalos
170 Points

Still not working :(

7 Answers

Anthony Albertorio
Anthony Albertorio
22,168 Points

Its a syntax error. Check the closing divs in your code. Your code is supposed to look something like this Notice the divs for each player. It ends with three divs, which match up. Hope this helps.

```function Application() { return ( <div className="scoreboard"> <div className="header"> <h1>Scoreboard</h1> </div>

  <div className="players">

    <div className="player">
      <div className="player-name">
        Random Player 1
      </div>
      <div className="player-score">
        <div className="counter">
          <button className="counter-action decrement"> - </button>
            <div className="counter-score"> 31 </div>
          <button className="counter-action increment"> + </button>
        </div>
      </div>
    </div>

    <div className="player">
      <div className="player-name">
        Random Player 2
      </div>
      <div className="player-score">
        <div className="counter">
          <button className="counter-action decrement"> - </button>
            <div className="counter-score"> 34 </div>
          <button className="counter-action increment"> + </button>
        </div>
      </div>
    </div>

  </div>
</div>

); }

ReactDOM.render(<Application />, document.getElementById('container'));

Eduardo Calvachi
Eduardo Calvachi
6,049 Points

Hi, my workspace was also stuck on loading from the previous exercise. It took a while to load but it finally loaded.

Alex Hicks
Alex Hicks
4,762 Points

I run into this problem a lot - React won't replace the "container" DOM element unless the virtual element can be generated correctly.

I double-checked my code for too many or too few div's, but then I found a problem elsewhere...

<button className = "counter-action decrement> - </button>
<div className = "counter-score"> 33 </div>
<button className = "counter-action increment> + </button>

... I forgot to add closing quotes to the classNames above. Hope this helps you find your error!

yeah I keep getting this issue too probably gonna try run this in vs code as I have no idea why, I'm stuck on loading when I'm sure there is no syntax error. I just wanna dev with no silly issues like this, hopefully treehouse step up and update some of these courses keep running into these issues especially when it comes to using workspaces. But what are we developers for if we cant solve issues independently good luck my fellow Reactors !!

Adam Elm
Adam Elm
1,273 Points

Im getting this error after launching the work-space uncaught SyntaxError: http://port-80-h2zgag8uhe.treehouse-app.com/app.jsx: Unexpected token

Adam Elm
Adam Elm
1,273 Points

I fixed it I was missing equal sign after className

Claudio Norambuena
Claudio Norambuena
3,289 Points

On my trial. Have had issues way too many times... I think I'll have to use Atom or Sublime and skip this workspace.