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 Router Basics Getting Started with React Router Introducing the Project

First build doesn't work - npm start fails `

ERROR in ./src/index.js
Module build failed: SyntaxError: Unexpected token (13:2)

  11 | // Render
  12 | render(
> 13 |   <App />,
     |   ^
  14 |   document.getElementById('root');
  15 | );
  16 | 

 @ multi main
webpack: bundle is now VALID.

I was having the same issue and I refuse to try and fix their webpack. I created a working version of this course on my github, which you can find here: https://github.com/commitshappen/react-router-basics

Just follow the instructions on that link and you should be good to move forward.

Is it a webpack issue, I was doing this at 1230am last night. I didn't even bother to go in and try to fix it but thank you for sharing this. I will take a look.

To by honest, I'm not 100% that it's a webpack issue. I was just noticing that webpack was having difficulty compiling the JSX and decided that I didn't want to deal with it, as I already had a similar project set on my personal computer where everything was working.

Seth Kroger
Seth Kroger
56,413 Points

I've had no problem with npm install and npm start working from the downloaded source (Win 10, tried in both GitBash and cmder)This was from the source in \react-router-basics\1-getting-started-with-react-router\video-3\course-directory? Did npm install give you any particular trouble?

4 Answers

Daniel Granger
PLUS
Daniel Granger
Courses Plus Student 19,857 Points

It appears to be because the project files in react-router-basics/1-getting-started-with-react-router/video-3/course-directory are missing the file .babelrc.

You can either copy it from on one of the other directories such as react-router-basics/1-getting-started-with-react-router/video-3/course-directory_final/.babelrc or create yourself. It simply needs to include

{
  "presets": ["react", "es2015"]
}
James Perih
James Perih
4,184 Points

That's what my .babelrc says, yet still issues. First was an issue with react-hot-loader being way out of date.. Then, it's this:

ERROR in ./src/index.js
Module build failed: Error: React Hot Loader: The Webpack loader is now exported separately. If you use Babel, we recommend that you remove "react-hot-loader" from the "loaders" section of your Webpack configuration altogether, and instead add "react-hot-loader/babel" to the "plugins" section of your .babelrc file. If you prefer not to use Babel, replace "react-hot-loader" or "react-hot" with "react-hot-loader/webpack" in the "loaders" section of your Webpack configuration.
    at Object.warnAboutIncorrectUsage (/Users/jperih/Developer/React/react-router-basics/1-getting-started-with-react-router/video-3/course-directory/node_modules/react-hot-loader/lib/index.js:7:11)
 @ multi main
Jonathan Dewitt
Jonathan Dewitt
8,101 Points

This worked for me, thank you.

Yeah, this still doesn't work. Is treehouse going to fix this?

James Perih
James Perih
4,184 Points

Thank you, @TonyStark

Blake Baxendell
Blake Baxendell
16,344 Points

First off I wish we weren't even using webpack, be better using Gulp or Grunt. Second, this doesn't even work and it seems Treehouse has known for months and still hasn't fixed it.