Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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
Courses Plus 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..."

Same issue, running Safari 10.1 on Mac.

Juan Avalos
Juan Avalos
170 Points

Still not working :(

7 Answers

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 !!

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

I fixed it I was missing equal sign after className

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