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

Ektoras Drandakis
Ektoras Drandakis
29,580 Points
Posted by Ektoras Drandakis
Ektoras Drandakis
29,580 Points

React: Waiting for roots to load

I'm having trouble getting react to work. I've installed all the components based on the react tutorials and i keep getting this error when i open the react dev tools and i can't find an answer anywhere on the internet. Has anyone else faced this issue before? Here's some of my code.

The HTML:

<body> <div id="app"></div> <script src="./node_modules/react/dist/react.min.js"></script> <script src="./node_modules/react-dom/dist/react-dom.min.js"></script> <script type="text/jsx" src="./app.js"></script> </body>

The JavaScript:

let React = require('react'); let ReactDOM = require('react-dom');

ReactDOM.render(<h1>HELLO!</h1>, document.getElementById('app'));

Ektoras Drandakis
Ektoras Drandakis
29,580 Points
Ektoras Drandakis
Ektoras Drandakis
29,580 Points

Brendan Whiting There's no error in the console. It only prints waiting for roots to load in the react tab

Seth Kroger
Seth Kroger
56,413 Points
Seth Kroger
Seth Kroger
56,413 Points

How are you processing it? With webpack? You're code looks like you are trying to include React two completely different ways simultaneously. You are loading the scripts directly from the HTML (btw, loading from node_modules is really not recommended. You should use a CDN or a copy in a vendor directory) then bringing them in again with require() which is not available in the browser and needs webpack to process. Only use one method or the other. And if you aren't using webpack how are you including Babel to process the JSX?