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 Setting up Webpack Dev Server

Posted by Jeremy Flanagan
Jeremy Flanagan
12,454 Points

app.js code is not rendering on a working server without any console errors. Page shows that React is not used.

I downloaded the project files from video 1 and went through all the steps. I even compared all the code in video_3/scoreboard_final, but the scoreboard code doesn't render. There are no console errors, and Chrome is telling me that the page isn't using react.

Here's my index.html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Scoreboard</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>

  <body>
    <div id="container">Loading...</div>
    <script type="bundle.js"></script>
  </body>
</html>

The top of app.js

// Libs
import React from 'react';
import ReactDOM from 'react-dom';

And the Application render function

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

The server starts fine and the console shows no errors. Any ideas?

2 Answers

Jeremy Flanagan
Jeremy Flanagan
12,454 Points

AND I figured it out! It's always something so tiny. I had the wrong attribute in the script tag in index.html:

<script type="bundle.js"></script>

Of course this should be src

<script src="bundle.js"></script>

Unless a moderator wants to delete the question, I'll leave it up in case anyone else is prone to making these kinds of easily overlooked mistakes.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

See, I missed that. We all miss the simple things at times, even me. We should definitely leave the post open for that reason. I'm glad you solved it! :-)

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi Jeremy,

If you're trying to make changes to app.js you may need to check hey're being bundled to the bundle.js file correctly.

Make sure you've downloaded all the dependencies properly.

Also if your server is starting correctly making sure you're using the correct port for Webpack Dev Server (mine is usually port 8080) rather than using localhost url on its own.

Hope this helps! :)

Jeremy Flanagan
Jeremy Flanagan
12,454 Points

Hi Jonathan! Thanks for the quick response. The port is correct, as I get the non-react html with "LOADING..." inthe top left corner.

I'm not trying to make changes to app.js, other than adding the import react code at the top. I'll check into the bundling issues, but I'm super new to this, so I'm not quite sure what to look for.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

It can be a tough process as I know only too well.

Wait till you get to the part about the "Create React App" tool. If you're struggling to build these skills (though it's recommended of course you gain them) then this video will be your dream come true :-)