React-rails: Unexpected token punc «}», expected punc «:»

[JensDebergh]

Help us help you! Please choose one:

• [ X ] My app crashes with react-rails, so I've included the stack trace and the exact steps which make it crash.
• [ ] My app doesn't crash, but I'm getting unexpected behavior. So, I've described the unexpected behavior and suggested a new behavior.
• [ ] I'm trying to use react-rails with another library, but I'm having trouble. I've described my JavaScript management setup (eg, Sprockets, Webpack...), how I'm trying to use this other library, and why it's not working.
• [ ] I have another issue to discuss.

---

I'm trying to push my app towards heroku's cloud but I'm unable to compile the assets on production. However I'm able to run development without the problem stated below.

I'm using a multi buildpack setup that:

1. Install node dependencies
2. Install bower dependencies
3. Install ruby dependencies and asset compilation as last step

My guess is I'm missing a dependency in production that I already have in development.
Do I need to install babel as a dependency on heroku?

Stacktrace:

remote:        ExecJS::ProgramError: Unexpected token punc «}», expected punc «:» (line: 13994, col: 4, pos: 974545)
remote:        Error
remote:        at new JS_Parse_Error (/tmp/execjs20160605-1442-1sywewpjs:3572:11870)
remote:        at js_error (/tmp/execjs20160605-1442-1sywewpjs:3572:12089)
remote:        at croak (/tmp/execjs20160605-1442-1sywewpjs:3572:20898)
remote:        at token_error (/tmp/execjs20160605-1442-1sywewpjs:3572:21035)
remote:        at expect_token (/tmp/execjs20160605-1442-1sywewpjs:3572:21258)
remote:        at expect (/tmp/execjs20160605-1442-1sywewpjs:3572:21396)
remote:        at /tmp/execjs20160605-1442-1sywewpjs:3572:30647
remote:        at /tmp/execjs20160605-1442-1sywewpjs:3572:21788
remote:        at expr_atom (/tmp/execjs20160605-1442-1sywewpjs:3572:29403)
remote:        at maybe_unary (/tmp/execjs20160605-1442-1sywewpjs:3573:143)
remote:        at expr_ops (/tmp/execjs20160605-1442-1sywewpjs:3573:901)
remote:        at maybe_conditional (/tmp/execjs20160605-1442-1sywewpjs:3573:993)
remote:        at maybe_assign (/tmp/execjs20160605-1442-1sywewpjs:3573:1436)
remote:        at expression (/tmp/execjs20160605-1442-1sywewpjs:3573:1749)
remote:        at expr_list (/tmp/execjs20160605-1442-1sywewpjs:3572:29964)
remote:        new JS_Parse_Error ((execjs):3572:11870)
remote:        js_error ((execjs):3572:12089)
remote:        croak ((execjs):3572:20898)
remote:        token_error ((execjs):3572:21035)
remote:        expect_token ((execjs):3572:21258)
remote:        expect ((execjs):3572:21396)
remote:        (execjs):3572:30647
remote:        (execjs):3572:21788
remote:        expr_atom ((execjs):3572:29403)

[rmosolgo]

line: 13994, col: 4

This suggests to me that assets have been concatenated but some of the files weren't "compiled" by Babel.

You might be able to find exactly where the failure is by searching app/assets/javascripts for the regexp ^...} (finding a } in the fourth column of a line).

This happened to me last week because I had "ES6" in a file that didn't have a .jsx extension. React-Rails only compiles files with .jsx extension, so if that's the case, make the filename end in .jsx.js

[JensDebergh]

@rmosolgo You are right. I tried disabling the uglifier in my project and it worked like a charm. Still have to find where exactly this issue occurs, but atleast I know what it is.

Thanks for the quick reply 🍰

[barefootford]

I had this same error yesterday and was getting really frustrated so to save some future headaches for someone else:

I renamed some components yesterday and while doing so accidentally left off .js.

Ex:

old_name.js.jsx
new_name.jsx

It will work in development and doesn't throw anything in console, but will break on production asset compilation and give the same error as above (Not complaining about any js or jsx files). Tricky.

[hieuhlc]

I just met this bug and still crazy about it. I used es6 files. Should I add .js into file name? Now it is Main.es6.jsx

[JensDebergh]

@hieuhlc The transpiler responsible for transpiling es6 to es5, by default only listens to a specific pattern. The pattern apparently is es6.jsx but I have no clue on how to change this with this gem.

The options exist thats for sure, I just haven't found the time yet to figure out the configuration part.

[hieuhlc]

Ok after 5 times search all files in project I finally found a file with a small pieces of code contains ES6 syntax. It was so small. Thank you guys.

[hieuhlc]

The ext es6.jsx is correct and can be built successfully. No need to re-config @JensDebergh

[JensDebergh]

@hieuhlc Had the same issue, I just think it would be nice to have this configurable. For example lets say I'm using es6 & jsx by default, I don't want to have a suffix saying a particular file is es6 with jsx by appending the es6.jsx extension. I just want it to be MyComponent.js

Future reference for available extensions:

https://github.com/reactjs/react-rails/blob/deb8cb64e2e499ff21d431fd196c5e6419f0f4d4/lib/react/rails/railtie.rb#L105

[kaushiksundar]

I figured out a easy way to identify the place where we might be using es6 syntax. Run the below code in rails console and you will get it

JS_PATH = "app/assets/javascripts/*/.js"; 
DirJS_PATH.each do |file_name|
puts "\n#"
puts Uglifier.compile(File.read(file_name))
end

[bjnord]

@kaushik-sundar Thanks for that great idea! Your code didn't quite work for me (garbled characters?) but this did:

patt = Rails.root.join('app', 'assets', 'javascripts', '**', '*.js')
Dir.glob(patt).each do |file_name|
    ...
end

[ziaulrehman40]

I figured out a easy way to identify the place where we might be using es6 syntax. Run the below code in rails console and you will get it

JS_PATH = "app/assets/javascripts/*/.js"; 
DirJS_PATH.each do |file_name|
puts "\n#"
puts Uglifier.compile(File.read(file_name))
end

For some reason, we were not getting the exact error place, this is what fixed issue and we got actual place where error was coming from.