Can't execute Rails Code in js.erb files

[niclaslueth]

I am trying to get js.erb files to work with shakapacker. But so far i had no luck. As far as i know there is no installer for erb (bundle exec webpacker:install:erb) anymore like in previous webpacker versions, so this should be supported out of the box, am i correct?
what could i be doing wrong here?

Currently i have the stock webpack.config.js

// /app/views/concept_maps/edit.html.erb

<% append_javascript_pack_tag 'test' %> 

This is my output:

Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/windhowl/Dokumente/CoMapEd/app/javascript/packs/test.js.erb: Unexpected token (1:0)

> 1 | <%logger.debug "this is rails code"%>
    | ^
    at instantiate (/home/windhowl/Dokumente/CoMapEd/node_modules/@babel/parser/lib/index.js:72:32)
    at constructor (/home/windhowl/Dokumente/CoMapEd/node_modules/@babel/parser/lib/index.js:358:12)
    at Parser.raise (/home/windhowl/Dokumente/CoMapEd/node_modules/@babel/parser/lib/index.js:3341:19)
    at Parser.unexpected (/home/windhowl/Dokumente/CoMapEd/node_modules/@babel/parser/lib/index.js:3379:16)
    at Parser.parseExprAtom (/home/windhowl/Dokumente/CoMapEd/node_modules/@babel/parser/lib/index.js:13083:24)
    at Parser.parseExprSubscripts (/home/windhowl/Dokumente/CoMapEd/node_modules/@babel/parser/lib/index.js:12650:23)
    at Parser.parseUpdate (/home/windhowl/Dokumente/CoMapEd/node_modules/@babel/parser/lib/index.js:12629:21)
    at Parser.parseMaybeUnary (/home/windhowl/Dokumente/CoMapEd/node_modules/@babel/parser/lib/index.js:12600:23)
    at Parser.parseMaybeUnaryOrPrivate (/home/windhowl/Dokumente/CoMapEd/node_modules/@babel/parser/lib/index.js:12394:61)
    at Parser.parseExprOps (/home/windhowl/Dokumente/CoMapEd/node_modules/@babel/parser/lib/index.js:12401:23)

Ruby version: 2.7
Rails version: 7.0.2
Shakapacker version: 6.3

[tomdracz]

Have you got https://www.npmjs.com/package/rails-erb-loader package installed? This is needed to process erb files but don't think it's included by default.

If the package is installed and you're still facing issues, please provide a reproduction repo so we can take a closer look

[justin808]

Labeling as a question until we determine if really a bug.

[niclaslueth]

I have created a blank project and everything worked fine. I'm providing you the repo i'm currently working on directly: https://github.com/muehling/CoMapEd/tree/Update_rails

In app/views/concept_maps/edit.html.erb i want to load the test.js.erb

When you start the server you should be able to get to the edit view by typing in 'abc' if you previously seeded the postgres db.

I hope you can get that running. if not please tell me so. and sorry i couldn't provide a simpler repo but the problem seems to be somewhere in this repo. Maybe the problem is even that i upgraded from rails 5 to 7 and have some dead code left..

Thank you very much in advance!

[tomdracz]

Hey @Windh0wl

I think I've got this working. Looks like spring gem is causing the issue here usabilityhub/rails-erb-loader#63

To try and get this working do the following:

• Run bundle exec rails webpacker:clobber to remove all compiled assets
• Run bin/spring binstub --remove --all
• bundle remove spring && bundle install

After this, start the server again and it should be now working. Not sure what's the actual cause behind the scenes but I recommend reading through the issue linked above for some insights. Especially usabilityhub/rails-erb-loader#63 (comment)

[tomdracz]

@justin808 Separately might need to implement https://github.com/usabilityhub/rails-erb-loader#spring (i.e. adding DISABLE_SPRING env to the loader config to guard against this in the future

[niclaslueth]

Nice. I get it to work now with a two liner .js.erb but not yet with my /app/views/concept_maps/edit.html.erb ..
I get the same error still.

Is there some js syntax i may not use with .erb ?

[tomdracz]

@Windh0wl Hard to say, have you got comments in the file? Those are one of the things that might cause issues here

Ruby comments are prefixed with the hash, whereas JS ones are // which I think trips up the parser.

Essentially, what the rails-erb-loader is doing is following (from usabilityhub/rails-erb-loader#63 (comment))

cat myfile | bin/rails runner <path to erb_transformer.rb> > output.js

• myfile is the input file to process (test.js.erb or similar)
• path to erb_transformer.rb - it's the path to the file in node modules directory for the package (i.e../node_modules/rails-erb-loader/erb_transformer.rb)

You should be able to test your file with something like:

cat app/javascript/packs/test.js.erb  | bin/rails runner ./node_modules/rails-erb-loader/erb_transformer.rb __RAILS_ERB_LOADER_DELIMETER__ erb

The command above will succeed if your .js.erb file is valid and hopefully fail with something pointing you to the error if it's invalid

[niclaslueth]

awesome. that helped a ton. i can run simple ruby code now. would you happen to know how i can run <%= t('.action_new_node')%> to insert locales ? i already included /* rails-erb-loader-dependencies ../config/locales/ */ in my .js.erb file but i keep getting the error <main>': undefined method 't' for main:Object (NoMethodError) when i run your suggested commands

[tomdracz]

t() method will come from Rails but not sure where that helper is loaded.

One of the following should work:
helper.t()
ApplicationController.helpers.t()
I18n.t() - note that this has got slightly different behaviour than Rails helper t() method

[niclaslueth]

Ok. so this is my setup:

// /config/locales/en.yml

concept_maps:
    create: "Concept maps with the following codes have been created"
    delete: "Delete concept map"
    import: "Import concept maps"
    imported: "Concept maps imported"
    new: "Create concept maps"
    edit:
      action_edit_link: "Edit or delete link"
      action_edit_node: "Edit or delete concept"
      action_new_link: "Create new link"
      action_new_node: "Create new concept"

// /app/views/concept_maps/edit.html.erb

console.log("<%= I18n.t('concept_maps.edit.action_new_node') %>")

OUTPUT: "Create new concept"

That is working just fine for me. But i expected it to work with just

console.log("<%= I18n.t('.action_new_node') %>")

That just returned "missing locale for en.action_new_node"

So it seems the scope is messed up somehow.
Yeah but thank you very much for helping out so much.

[tomdracz]

I think that's because scoping the key by partial is the Railsy helper thing rather than I18n.t one:

https://github.com/rails/rails/blob/main/actionview/lib/action_view/helpers/translation_helper.rb#L128-L140

You should be able to use just t() in your normal views just fine. It's only the js.erb asset files that might need I18n.t and full translation path in order to work if you are trying to load translation there. Hope that helps!

Further to that, just to make sure you are not getting confused. Files like https://github.com/muehling/CoMapEd/blob/Update_rails/app/views/concept_maps/import.js.erb should be processed as app views. Webpack won't touch any of those. It's only stuff that you define in javascript land (in your case app/javascript) that gets processed by webpack and rails-erb-loader