unexpected token error

[aguajardo]

Hi, I am getting a react.exceptions.ReactRenderingError. I have been testing the code independently on the dev server made by CRA and also by building it and serving index.html with flask. I think there is no unexpected token where it is saying there is a problem, but I am completely new to this and don't know why babel might be saying that.

[markfinger]

Hard to say without any context. What's the entire error message + stack trace?

[aguajardo]

I'm sorry here is the complete error message and stack trace:

react.exceptions.ReactRenderingError: Message: /home/alexandro/Documents/Anhelas/AnhelasEcomBundle/AGSolutionsHome.js: Unexpected token (198:0)

Stack trace: SyntaxError: /home/alexandro/Documents/Anhelas/AnhelasEcomBundle/AGSolutionsHome.js: Unexpected token (198:0)   196 |   197 |  return ( > 198 | <div id={id} style={divStyles} className={props.className} onMouseEnter={handleEnter} onMouseLeave={handleLeave} onClick={handleClick}>  | ^  199 |  <svg width={width} height={height} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">  200 |  <rect id={rect-${id}} x={rect_x} y={rect_y} width={rect_width} height={rect_height} stroke={rect_stroke} strokeWidth={rect_stroke_width} fill={rect_fill} />  201 |  <rect id={rect-hover-${id}} x={rect_x_hover} y={rect_y_hover} width={rect_width_hover} height={rect_height_hover} stroke={rect_stroke_hover} strokeWidth={rect_stroke_width_hover} fill={rect_fill_hover} opacity='0%'/> at Parser.pp$5.raise (/home/alexandro/Documents/Anhelas/AnhelasEcomBundle/basic_rendering/node_modules/babylon/lib/index.js:4454:13) at Parser.pp.unexpected (/home/alexandro/Documents/Anhelas/AnhelasEcomBundle/basic_rendering/node_modules/babylon/lib/index.js:1761:8) at Parser.pp$3.parseExprAtom (/home/alexandro/Documents/Anhelas/AnhelasEcomBundle/basic_rendering/node_modules/babylon/lib/index.js:3750:12) at Parser.pp$3.parseExprSubscripts (/home/alexandro/Documents/Anhelas/AnhelasEcomBundle/basic_rendering/node_modules/babylon/lib/index.js:3494:19) at Parser.pp$3.parseMaybeUnary (/home/alexandro/Documents/Anhelas/AnhelasEcomBundle/basic_rendering/node_modules/babylon/lib/index.js:3474:19) at Parser.pp$3.parseExprOps (/home/alexandro/Documents/Anhelas/AnhelasEcomBundle/basic_rendering/node_modules/babylon/lib/index.js:3404:19) at Parser.pp$3.parseMaybeConditional (/home/alexandro/Documents/Anhelas/AnhelasEcomBundle/basic_rendering/node_modules/babylon/lib/index.js:3381:19) at Parser.pp$3.parseMaybeAssign (/home/alexandro/Documents/Anhelas/AnhelasEcomBundle/basic_rendering/node_modules/babylon/lib/index.js:3344:19) at Parser.pp$3.parseParenAndDistinguishExpression (/home/alexandro/Documents/Anhelas/AnhelasEcomBundle/basic_rendering/node_modules/babylon/lib/index.js:3828:26) at Parser.pp$3.parseExprAtom (/home/alexandro/Documents/Anhelas/AnhelasEcomBundle/basic_rendering/node_modules/babylon/lib/index.js:3709:19)

Those characters seem to be the Unicode for the tabs and the new line. However, I remove them and it still complains exactly where the render method of the functional component starts. I am unsure as to what is going on, could it be a babel configuration issue?

[markfinger]

Hard to say. Can you try running the files directly with node?

Make a file with:

require('babel-core/register');
require('path/to/your/component.js');

and then run it with node?

That should help to remove the amount of machinery and might help to surface the exact problem.