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)
�[0m �[90m 196 | �[39m
�[90m 197 | �[39m �[36mreturn�[39m (
�[31m�[1m>�[22m�[39m�[90m 198 | �[39m�[33m<�[39m�[33mdiv�[39m id�[33m=�[39m{id} style�[33m=�[39m{divStyles} className�[33m=�[39m{props�[33m.�[39mclassName} onMouseEnter�[33m=�[39m{handleEnter} onMouseLeave�[33m=�[39m{handleLeave} onClick�[33m=�[39m{handleClick}�[33m>�[39m
�[90m | �[39m�[31m�[1m^�[22m�[39m
�[90m 199 | �[39m �[33m<�[39m�[33msvg�[39m width�[33m=�[39m{width} height�[33m=�[39m{height} xmlns�[33m=�[39m�[32m"http://www.w3.org/2000/svg"�[39m xmlnsXlink�[33m=�[39m�[32m"http://www.w3.org/1999/xlink"�[39m�[33m>�[39m
�[90m 200 | �[39m �[33m<�[39m�[33mrect�[39m id�[33m=�[39m{�[32mrect-${id}�[39m} x�[33m=�[39m{rect_x} y�[33m=�[39m{rect_y} width�[33m=�[39m{rect_width} height�[33m=�[39m{rect_height} stroke�[33m=�[39m{rect_stroke} strokeWidth�[33m=�[39m{rect_stroke_width} fill�[33m=�[39m{rect_fill} �[33m/�[39m�[33m>�[39m
�[90m 201 | �[39m �[33m<�[39m�[33mrect�[39m id�[33m=�[39m{�[32mrect-hover-${id}�[39m} x�[33m=�[39m{rect_x_hover} y�[33m=�[39m{rect_y_hover} width�[33m=�[39m{rect_width_hover} height�[33m=�[39m{rect_height_hover} stroke�[33m=�[39m{rect_stroke_hover} strokeWidth�[33m=�[39m{rect_stroke_width_hover} fill�[33m=�[39m{rect_fill_hover} opacity�[33m=�[39m�[32m'0%'�[39m�[33m/�[39m�[33m>�[39m�[0m
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.