Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Chris Olin
Chris Olin
14,435 Points

Uncaught SyntaxError in Babel when trying to run React app locally

Downloaded the workspaces code so I could try loading/working on this as a project in WebStorm. Ended up getting a bunch of errors trying to bring the code in as-is. Created a new React app and when I go to start it with npm start, this happens when I try loading the page:

Uncaught SyntaxError: http://localhost:3000/src/app.js: Unexpected token (1:1)
> 1 | <!DOCTYPE html>
    |  ^
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
    at t.J.raise (babel.min.js:7)
    at t.X.unexpected (babel.min.js:5)
    at t.ge.jsxParseIdentifier (babel.min.js:8)
    at t.ge.jsxParseNamespacedName (babel.min.js:8)
    at t.ge.jsxParseElementName (babel.min.js:8)
    at t.ge.jsxParseOpeningElementAt (babel.min.js:8)
    at t.ge.jsxParseElementAt (babel.min.js:8)
    at t.ge.jsxParseElement (babel.min.js:8)
    at t.parseExprAtom (babel.min.js:8)
    at te.parseExprSubscripts (babel.min.js:6)
    at te.parseMaybeUnary (babel.min.js:6)
    at te.parseExprOps (babel.min.js:6)
    at te.parseMaybeConditional (babel.min.js:6)
    at te.parseMaybeAssign (babel.min.js:6)
    at t.parseMaybeAssign (babel.min.js:8)
    at te.parseExpression (babel.min.js:6)
    at t.z.parseStatement (babel.min.js:5)
    at t.parseStatement (babel.min.js:8)
    at t.z.parseBlockBody (babel.min.js:6)
    at t.z.parseTopLevel (babel.min.js:5)
    at t.parse (babel.min.js:5)
    at h (babel.min.js:4)
    at n.parse (babel.min.js:2)
    at n.parseCode (babel.min.js:2)
    at babel.min.js:14
    at n.wrap (babel.min.js:2)
    at e.transform (babel.min.js:14)
    at s (babel.min.js:1)
    at r (babel.min.js:24)
    at i (babel.min.js:24)
    at r (babel.min.js:24)
    at e.src.n.<computed>.l.content (babel.min.js:24)
    at XMLHttpRequest.n.onreadystatechange (babel.min.js:24)

I've googled the hell out of this and nothing makes sense. The <script type="text/babel"> is set, so why this is being thrown is beyond me.

3 Answers

Adi Chayot
Adi Chayot
3,618 Points

I have the same error.. Did you find out how to fix that?

Hey guys, just curious, did anyone ever solve this? I am having the same problem!

Hey guys, just curious, did anyone ever solve this? I am having the same problem!

I think it was me... I started using Create React App too soon. I think that for this course, that would have been the best place to start.