Thomas Thomas - 6 months ago 21
Javascript Question

Error with React render

I'm learning React/Redux from Wes Bos' tutorial. I'm trying to render some html, and there's an error building it every time:

ERROR in ./client/reduxstagram.js
Module build failed: SyntaxError: /var/www/learn-redux/client/reduxstagram.js: Unexpected token (8:7)
6 | import css from './styles/style.styl';
7 |
> 8 | render(<p>hi</p>, document.getElementById('root'));
| ^
at Parser.pp.raise (/var/www/learn-redux/node_modules/babylon/lib/parser/location.js:22:13)
at Parser.pp.unexpected (/var/www/learn-redux/node_modules/babylon/lib/parser/util.js:89:8)
at Parser.pp.parseExprAtom (/var/www/learn-redux/node_modules/babylon/lib/parser/expression.js:517:12)
at Parser.pp.parseExprSubscripts (/var/www/learn-redux/node_modules/babylon/lib/parser/expression.js:272:19)
at Parser.pp.parseMaybeUnary (/var/www/learn-redux/node_modules/babylon/lib/parser/expression.js:252:19)
at Parser.pp.parseExprOps (/var/www/learn-redux/node_modules/babylon/lib/parser/expression.js:183:19)
at Parser.pp.parseMaybeConditional (/var/www/learn-redux/node_modules/babylon/lib/parser/expression.js:165:19)
at Parser.pp.parseMaybeAssign (/var/www/learn-redux/node_modules/babylon/lib/parser/expression.js:128:19)
at Parser.pp.parseExprListItem (/var/www/learn-redux/node_modules/babylon/lib/parser/expression.js:1032:16)
at Parser.pp.parseCallExpressionArguments (/var/www/learn-redux/node_modules/babylon/lib/parser/expression.js:348:20)


This is my reduxstagram.js file:

import React from 'react';

import { render } from 'react-dom';

// Import css
import css from './styles/style.styl';

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


Has anyone run into a similar problem, or know what I'm doing incorrectly?

Answer

You didn't setup webpack with the proper loaders to compile jsx, hence the Unexpected token. If you're new to webpack and javascript transpilers/compilers, start using something like jsbin and switch from Javascript to ES6 / Babel mode:

here

After you've got used to React and the jsx syntax, try learning how to setup webpack with babel.

Comments