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

John Butcher
John Butcher
9,683 Points

Module parse failed: [...]/index.js Unexpected token (5:7)

On Redux initial setup - index.js, I can't seem to npm start - webpack logs an error in the console when it hits the JSX.

Error: Module parse failed: [...]/index.js Unexpected token (5:7) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (5:7)

index.js file:

import React from 'react';
import { render } from 'react-dom';
import Scoreboard from './Scoreboard';

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

2 Answers

Ignacio Rocha
Ignacio Rocha
7,462 Points

I think the error is caused because the import is wrong. You have

import { render } from 'react-dom';

render(//your code);

the correct way is like this, because render() is a specific method of the ReactDOM package.

import ReactDOM from 'react-dom';

ReactDOM.render(// code);
John Butcher
John Butcher
9,683 Points

Hi Ignacio Rocha ,

Thanks for your reply!

import {render} from 'react-dom';

render(// code);

is the same as:

import ReactDOM from 'react-dom';

ReactDOM.render(// code);

The first example is just using ES6 destructuring syntax - you can see an example of this in Guil's code within the tutorial at 00:45 here; https://teamtreehouse.com/library/redux-initial-setup-indexjs

Unfortunately I haven't been able to get this working, so will skip to the next section :(