Why does Rails I18n.t in asset pipline file not work?

Question

I want to use I18n.t helper in asset pipeline js.coffee.erb file.

My local file:

zh-CN:
  hello: 你好

In hello.js.coffee.erb:

$->
  alert '<%= t(:hello) %>'

This will cause an "Encoding::InvalidByteSequenceError - "\xE5" on US-ASCII" error.

Does asset pipeline file support using I18n.t helper?

error log:

Encoding::InvalidByteSequenceError - "\xE5" on US-ASCII
  (in /.../hello.js.coffee.erb):
  (gem) activesupport-3.2.12/lib/active_support/json/encoding.rb:123:in `escape'
  (gem) activesupport-3.2.12/lib/active_support/json/encoding.rb:69:in `escape'
  (gem) activesupport-3.2.12/lib/active_support/json/encoding.rb:177:in `encode_json'
  (gem) activesupport-3.2.12/lib/active_support/json/encoding.rb:220:in `block in encode_json'
  (gem) activesupport-3.2.12/lib/active_support/json/encoding.rb:220:in `encode_json'
  (gem) activesupport-3.2.12/lib/active_support/json/encoding.rb:48:in `block in encode'
  (gem) activesupport-3.2.12/lib/active_support/json/encoding.rb:77:in `check_for_circular_references'
  (gem) activesupport-3.2.12/lib/active_support/json/encoding.rb:46:in `encode'
  (gem) activesupport-3.2.12/lib/active_support/json/encoding.rb:31:in `encode'
  (gem) activesupport-3.2.12/lib/active_support/core_ext/object/to_json.rb:16:in `to_json'
  (gem) multi_json-1.6.1/lib/multi_json/adapters/json_common.rb:10:in `dump'
  (gem) multi_json-1.6.1/lib/multi_json.rb:122:in `dump'
  (gem) execjs-1.4.0/lib/execjs/json.rb:11:in `encode'
  (gem) execjs-1.4.0/lib/execjs/external_runtime.rb:33:in `call'
  (gem) coffee-script-2.2.0/lib/coffee_script.rb:57:in `compile'
  (gem) tilt-1.3.5/lib/tilt/coffee.rb:46:in `evaluate'
  (gem) tilt-1.3.5/lib/tilt/template.rb:77:in `render'
  (gem) sprockets-2.2.2/lib/sprockets/context.rb:193:in `block in evaluate'
  (gem) sprockets-2.2.2/lib/sprockets/context.rb:190:in `evaluate'
  (gem) sprockets-2.2.2/lib/sprockets/processed_asset.rb:12:in `initialize'
  (gem) sprockets-2.2.2/lib/sprockets/base.rb:249:in `block in build_asset'
  (gem) sprockets-2.2.2/lib/sprockets/base.rb:270:in `circular_call_protection'
  (gem) sprockets-2.2.2/lib/sprockets/base.rb:248:in `build_asset'
  (gem) sprockets-2.2.2/lib/sprockets/index.rb:93:in `block in build_asset'
  (gem) sprockets-2.2.2/lib/sprockets/caching.rb:19:in `cache_asset'
  (gem) sprockets-2.2.2/lib/sprockets/index.rb:92:in `build_asset'
  (gem) sprockets-2.2.2/lib/sprockets/base.rb:169:in `find_asset'
  (gem) sprockets-2.2.2/lib/sprockets/index.rb:60:in `find_asset'
  (gem) sprockets-2.2.2/lib/sprockets/processed_asset.rb:111:in `block in resolve_dependencies'
  (gem) sprockets-2.2.2/lib/sprockets/processed_asset.rb:105:in `resolve_dependencies'
  (gem) sprockets-2.2.2/lib/sprockets/processed_asset.rb:97:in `build_required_assets'
  (gem) sprockets-2.2.2/lib/sprockets/processed_asset.rb:16:in `initialize'
  (gem) sprockets-2.2.2/lib/sprockets/base.rb:249:in `block in build_asset'
  (gem) sprockets-2.2.2/lib/sprockets/base.rb:270:in `circular_call_protection'
  (gem) sprockets-2.2.2/lib/sprockets/base.rb:248:in `build_asset'
  (gem) sprockets-2.2.2/lib/sprockets/index.rb:93:in `block in build_asset'
  (gem) sprockets-2.2.2/lib/sprockets/caching.rb:19:in `cache_asset'
  (gem) sprockets-2.2.2/lib/sprockets/index.rb:92:in `build_asset'
  (gem) sprockets-2.2.2/lib/sprockets/base.rb:169:in `find_asset'
  (gem) sprockets-2.2.2/lib/sprockets/index.rb:60:in `find_asset'
  (gem) sprockets-2.2.2/lib/sprockets/bundled_asset.rb:16:in `initialize'
  (gem) sprockets-2.2.2/lib/sprockets/base.rb:252:in `build_asset'
  (gem) sprockets-2.2.2/lib/sprockets/index.rb:93:in `block in build_asset'
  (gem) sprockets-2.2.2/lib/sprockets/caching.rb:19:in `cache_asset'
  (gem) sprockets-2.2.2/lib/sprockets/index.rb:92:in `build_asset'
  (gem) sprockets-2.2.2/lib/sprockets/base.rb:169:in `find_asset'
  (gem) sprockets-2.2.2/lib/sprockets/index.rb:60:in `find_asset'
  (gem) sprockets-2.2.2/lib/sprockets/environment.rb:78:in `find_asset'
  (gem) sprockets-2.2.2/lib/sprockets/base.rb:177:in `[]'
  (gem) actionpack-3.2.12/lib/sprockets/helpers/rails_helper.rb:126:in `asset_for'
  (gem) actionpack-3.2.12/lib/sprockets/helpers/rails_helper.rb:27:in `block in javascript_include_tag'
  (gem) actionpack-3.2.12/lib/sprockets/helpers/rails_helper.rb:26:in `javascript_include_tag'
  app/views/layouts/_head.html.slim:19:in `_app_views_layouts__head_html_slim___1053294957777409236_46504920'
  (gem) actionpack-3.2.12/lib/action_view/template.rb:145:in `block in render'
  (gem) activesupport-3.2.12/lib/active_support/notifications.rb:123:in `block in instrument'
  (gem) activesupport-3.2.12/lib/active_support/notifications/instrumenter.rb:20:in `instrument'
  (gem) activesupport-3.2.12/lib/active_support/notifications.rb:123:in `instrument'
  (gem) actionpack-3.2.12/lib/action_view/template.rb:143:in `render'
  (gem) actionpack-3.2.12/lib/action_view/renderer/partial_renderer.rb:265:in `render_partial'
  (gem) actionpack-3.2.12/lib/action_view/renderer/partial_renderer.rb:238:in `block in render'
  (gem) actionpack-3.2.12/lib/action_view/renderer/abstract_renderer.rb:38:in `block in instrument'
  (gem) activesupport-3.2.12/lib/active_support/notifications.rb:123:in `block in instrument'
  (gem) activesupport-3.2.12/lib/active_support/notifications/instrumenter.rb:20:in `instrument'
  (gem) activesupport-3.2.12/lib/active_support/notifications.rb:123:in `instrument'
  (gem) actionpack-3.2.12/lib/action_view/renderer/abstract_renderer.rb:38:in `instrument'
  (gem) actionpack-3.2.12/lib/action_view/renderer/partial_renderer.rb:237:in `render'
  (gem) actionpack-3.2.12/lib/action_view/renderer/renderer.rb:41:in `render_partial'
  (gem) actionpack-3.2.12/lib/action_view/helpers/rendering_helper.rb:27:in `render'
  (gem) haml-4.0.0/lib/haml/helpers/action_view_mods.rb:12:in `render_with_haml'
  app/views/layouts/auth.html.slim:4:in `_app_views_layouts_auth_html_slim___1395664120707387056_5138760'
  (gem) actionpack-3.2.12/lib/action_view/template.rb:145:in `block in render'
  (gem) activesupport-3.2.12/lib/active_support/notifications.rb:123:in `block in instrument'
  (gem) activesupport-3.2.12/lib/active_support/notifications/instrumenter.rb:20:in `instrument'
  (gem) activesupport-3.2.12/lib/active_support/notifications.rb:123:in `instrument'
  (gem) actionpack-3.2.12/lib/action_view/template.rb:143:in `render'
  (gem) actionpack-3.2.12/lib/action_view/renderer/template_renderer.rb:59:in `render_with_layout'
  (gem) actionpack-3.2.12/lib/action_view/renderer/template_renderer.rb:45:in `render_template'
  (gem) actionpack-3.2.12/lib/action_view/renderer/template_renderer.rb:18:in `render'
  (gem) actionpack-3.2.12/lib/action_view/renderer/renderer.rb:36:in `render_template'
  (gem) actionpack-3.2.12/lib/action_view/renderer/renderer.rb:17:in `render'
  (gem) actionpack-3.2.12/lib/abstract_controller/rendering.rb:110:in `_render_template'
  (gem) actionpack-3.2.12/lib/action_controller/metal/streaming.rb:225:in `_render_template'
  (gem) actionpack-3.2.12/lib/abstract_controller/rendering.rb:103:in `render_to_body'
  (gem) actionpack-3.2.12/lib/action_controller/metal/renderers.rb:28:in `render_to_body'
  (gem) actionpack-3.2.12/lib/action_controller/metal/compatibility.rb:50:in `render_to_body'
  (gem) actionpack-3.2.12/lib/abstract_controller/rendering.rb:88:in `render'
  (gem) actionpack-3.2.12/lib/action_controller/metal/rendering.rb:16:in `render'
  (gem) actionpack-3.2.12/lib/action_controller/metal/instrumentation.rb:40:in `block (2 levels) in render'
  (gem) activesupport-3.2.12/lib/active_support/core_ext/benchmark.rb:5:in `block in ms'
  /home/jx/.rvm/rubies/ruby-1.9.3-p362/lib/ruby/1.9.1/benchmark.rb:295:in `realtime'
  (gem) activesupport-3.2.12/lib/active_support/core_ext/benchmark.rb:5:in `ms'
  (gem) actionpack-3.2.12/lib/action_controller/metal/instrumentation.rb:40:in `block in render'
  (gem) actionpack-3.2.12/lib/action_controller/metal/instrumentation.rb:83:in `cleanup_view_runtime'
  (gem) actionpack-3.2.12/lib/action_controller/metal/instrumentation.rb:39:in `render'
  (gem) actionpack-3.2.12/lib/action_controller/metal/implicit_render.rb:10:in `default_render'
  (gem) actionpack-3.2.12/lib/action_controller/metal/implicit_render.rb:5:in `send_action'
  (gem) actionpack-3.2.12/lib/abstract_controller/base.rb:167:in `process_action'
  (gem) actionpack-3.2.12/lib/action_controller/metal/rendering.rb:10:in `process_action'
  (gem) actionpack-3.2.12/lib/abstract_controller/callbacks.rb:18:in `block in process_action'
  (gem) activesupport-3.2.12/lib/active_support/callbacks.rb:436:in `_run__2781514901838594071__process_action__4110693920995885568__callbacks'
  (gem) activesupport-3.2.12/lib/active_support/callbacks.rb:405:in `__run_callback'
  (gem) activesupport-3.2.12/lib/active_support/callbacks.rb:385:in `_run_process_action_callbacks'
  (gem) activesupport-3.2.12/lib/active_support/callbacks.rb:81:in `run_callbacks'
  (gem) actionpack-3.2.12/lib/abstract_controller/callbacks.rb:17:in `process_action'
  (gem) actionpack-3.2.12/lib/action_controller/metal/rescue.rb:29:in `process_action'
  (gem) actionpack-3.2.12/lib/action_controller/metal/instrumentation.rb:30:in `block in process_action'
  (gem) activesupport-3.2.12/lib/active_support/notifications.rb:123:in `block in instrument'
  (gem) activesupport-3.2.12/lib/active_support/notifications/instrumenter.rb:20:in `instrument'
  (gem) activesupport-3.2.12/lib/active_support/notifications.rb:123:in `instrument'
  (gem) actionpack-3.2.12/lib/action_controller/metal/instrumentation.rb:29:in `process_action'
  (gem) actionpack-3.2.12/lib/action_controller/metal/params_wrapper.rb:207:in `process_action'
  (gem) actionpack-3.2.12/lib/abstract_controller/base.rb:121:in `process'
  (gem) actionpack-3.2.12/lib/abstract_controller/rendering.rb:45:in `process'
  (gem) actionpack-3.2.12/lib/action_controller/metal.rb:203:in `dispatch'
  (gem) actionpack-3.2.12/lib/action_controller/metal/rack_delegation.rb:14:in `dispatch'
  (gem) actionpack-3.2.12/lib/action_controller/metal.rb:246:in `block in action'
  (gem) actionpack-3.2.12/lib/action_dispatch/routing/route_set.rb:73:in `dispatch'
  (gem) actionpack-3.2.12/lib/action_dispatch/routing/route_set.rb:36:in `call'
  (gem) journey-1.0.4/lib/journey/router.rb:68:in `block in call'
  (gem) journey-1.0.4/lib/journey/router.rb:56:in `call'
  (gem) actionpack-3.2.12/lib/action_dispatch/routing/route_set.rb:601:in `call'
  (gem) meta_request-0.2.2/lib/meta_request/middlewares/app_request_handler.rb:11:in `call'
  (gem) rack-contrib-1.1.0/lib/rack/contrib/response_headers.rb:17:in `call'
  (gem) meta_request-0.2.2/lib/meta_request/middlewares/headers.rb:16:in `call'
  (gem) meta_request-0.2.2/lib/meta_request/middlewares/meta_request_handler.rb:13:in `call'
  (gem) mongoid-3.1.2/lib/rack/mongoid/middleware/identity_map.rb:34:in `block in call'
  (gem) mongoid-3.1.2/lib/mongoid/unit_of_work.rb:39:in `unit_of_work'
  (gem) mongoid-3.1.2/lib/rack/mongoid/middleware/identity_map.rb:34:in `call'
  (gem) warden-1.2.1/lib/warden/manager.rb:35:in `block in call'
  (gem) warden-1.2.1/lib/warden/manager.rb:34:in `call'
  (gem) actionpack-3.2.12/lib/action_dispatch/middleware/best_standards_support.rb:17:in `call'
  (gem) rack-1.4.5/lib/rack/etag.rb:23:in `call'
  (gem) rack-1.4.5/lib/rack/conditionalget.rb:25:in `call'
  (gem) actionpack-3.2.12/lib/action_dispatch/middleware/head.rb:14:in `call'
  (gem) actionpack-3.2.12/lib/action_dispatch/middleware/params_parser.rb:21:in `call'
  (gem) actionpack-3.2.12/lib/action_dispatch/middleware/flash.rb:242:in `call'
  (gem) rack-1.4.5/lib/rack/session/abstract/id.rb:210:in `context'
  (gem) rack-1.4.5/lib/rack/session/abstract/id.rb:205:in `call'
  (gem) actionpack-3.2.12/lib/action_dispatch/middleware/cookies.rb:341:in `call'
  (gem) actionpack-3.2.12/lib/action_dispatch/middleware/callbacks.rb:28:in `block in call'
  (gem) activesupport-3.2.12/lib/active_support/callbacks.rb:405:in `_run__1915631577033867377__call__2170704697511918287__callbacks'
  (gem) activesupport-3.2.12/lib/active_support/callbacks.rb:405:in `__run_callback'
  (gem) activesupport-3.2.12/lib/active_support/callbacks.rb:385:in `_run_call_callbacks'
  (gem) activesupport-3.2.12/lib/active_support/callbacks.rb:81:in `run_callbacks'
  (gem) actionpack-3.2.12/lib/action_dispatch/middleware/callbacks.rb:27:in `call'
  (gem) actionpack-3.2.12/lib/action_dispatch/middleware/reloader.rb:65:in `call'
  (gem) actionpack-3.2.12/lib/action_dispatch/middleware/remote_ip.rb:31:in `call'
  (gem) better_errors-0.7.2/lib/better_errors/middleware.rb:84:in `protected_app_call'
  (gem) better_errors-0.7.2/lib/better_errors/middleware.rb:79:in `better_errors_call'
  (gem) better_errors-0.7.2/lib/better_errors/middleware.rb:56:in `call'
  (gem) actionpack-3.2.12/lib/action_dispatch/middleware/debug_exceptions.rb:16:in `call'
  (gem) actionpack-3.2.12/lib/action_dispatch/middleware/show_exceptions.rb:56:in `call'
  (gem) railties-3.2.12/lib/rails/rack/logger.rb:32:in `call_app'
  (gem) railties-3.2.12/lib/rails/rack/logger.rb:16:in `block in call'
  (gem) activesupport-3.2.12/lib/active_support/tagged_logging.rb:22:in `tagged'
  (gem) railties-3.2.12/lib/rails/rack/logger.rb:16:in `call'
  (gem) actionpack-3.2.12/lib/action_dispatch/middleware/request_id.rb:22:in `call'
  (gem) rack-1.4.5/lib/rack/methodoverride.rb:21:in `call'
  (gem) rack-1.4.5/lib/rack/runtime.rb:17:in `call'
  (gem) activesupport-3.2.12/lib/active_support/cache/strategy/local_cache.rb:72:in `call'
  (gem) rack-1.4.5/lib/rack/lock.rb:15:in `call'
  (gem) actionpack-3.2.12/lib/action_dispatch/middleware/static.rb:62:in `call'
  (gem) railties-3.2.12/lib/rails/engine.rb:479:in `call'
  (gem) railties-3.2.12/lib/rails/application.rb:223:in `call'
  (gem) rack-1.4.5/lib/rack/content_length.rb:14:in `call'
  (gem) railties-3.2.12/lib/rails/rack/log_tailer.rb:17:in `call'
  (gem) thin-1.5.0/lib/thin/connection.rb:81:in `block in pre_process'
  (gem) thin-1.5.0/lib/thin/connection.rb:79:in `pre_process'
  (gem) thin-1.5.0/lib/thin/connection.rb:54:in `process'
  (gem) thin-1.5.0/lib/thin/connection.rb:39:in `receive_data'
  (gem) eventmachine-1.0.3/lib/eventmachine.rb:187:in `run'
  (gem) thin-1.5.0/lib/thin/backends/base.rb:63:in `start'
  (gem) thin-1.5.0/lib/thin/server.rb:159:in `start'
  (gem) rack-1.4.5/lib/rack/handler/thin.rb:13:in `run'
  (gem) rack-1.4.5/lib/rack/server.rb:268:in `start'
  (gem) railties-3.2.12/lib/rails/commands/server.rb:70:in `start'
  (gem) railties-3.2.12/lib/rails/commands.rb:55:in `block in <top (required)>'
  (gem) railties-3.2.12/lib/rails/commands.rb:50:in `<top (required)>'
  script/rails:6:in `<main>'
  script/rails:0:in `<main>'

Answer 1

First, make sure your zh-CN.yml is encoded in UTF-8, it looks like it's encoded in US-ASCII.

I18n.js

You can use the i18n-js gem to add Javascript internationalization to the Rails asset pipeline (see https://github.com/fnando/i18n-js).

The i18n-js gem automatically converts the translations in the config/locales/ directory to javascript. After you add this gem, call I18n.t directly in your javascript (without the <%= and %>). Translations are stored in javascript and can be viewed at http://localhost:3000/assets/i18n/translations.js.

Note that the i18n-js may not completely load between requests, so you may still get TranslationMissing errors from time to time, but these should go away when you compile your assets. If this happens during development, try reloading the page.

Use

1. Add gem 'i18n-js' to your Gemfile.
2. Run bundle install.

3. Add a zh-CN.yml file to config/locals/ with:

   zh-CN:
     hello: 你好
   

4. In application.js, add the i18n libraries before //= require_tree . and set your default locale (make sure you keep the blank line):

   //= require i18n
   //= require i18n/translations
   //= require_tree .
   
   I18n.defaultLocale = "zh-CN";
   

5. Once that's done, your hello.js.coffee.erb file should look like this:

   $ ->
     alert I18n.t('hello')
   

You should then get the proper internationalized alert when you visit the page.