Uncaught ReferenceError: ComponentName is not defined w/ webpacker

[Najtmare]

Help us help you! Please choose one:

• 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.

---

Using rails webpacker

Whenever I try to render a component using the view helper, I get:

<%= react_component('CommentsContainer', comments: @post.comments) %>

Hello World from Webpacker

VM2747:1 Uncaught ReferenceError: CommentsContainer is not defined
    at eval (eval at module.exports (fromGlobal.js?fc31:13), <anonymous>:1:1)
    at module.exports (fromGlobal.js?fc31:13)
    at Object.getConstructor (fromRequireContextWithGlobalFallback.js?cbbb:16)
    at Object.mountComponents (index.js?c0e8:82)
    at HTMLDocument.ReactRailsUJS.handleMount (index.js?c0e8:124)

I've tried loading this with and without es6 and it will not work. Not even server rendering works.

Stack trace from server rendering:

Encountered error "#<ExecJS::ProgramError: ReferenceError: Comments is not defined>" when prerendering Comments with {"comments":[{"id":1,"user_id":1,"post_id":1,"content":"This is the first comment","created_at":"2017-04-27T13:31:06.308Z","updated_at":"2017-04-27T13:31:06.308Z"},{"id":2,"user_id":1,"post_id":1,"content":"This is the second comment","created_at":"2017-04-27T13:31:10.804Z","updated_at":"2017-04-27T13:31:10.804Z"},{"id":3,"user_id":1,"post_id":1,"content":"This is the third comment","created_at":"2017-04-27T13:31:14.072Z","updated_at":"2017-04-27T13:31:14.072Z"}]}
eval (eval at module.exports ((execjs):28648:19), <anonymous>:1:1)
module.exports ((execjs):28648:19)
Object.getConstructor ((execjs):32855:19)
Object.serverRender ((execjs):32515:31)
eval (eval at <anonymous> ((execjs):32897:8), <anonymous>:6:45)
eval (eval at <anonymous> ((execjs):32897:8), <anonymous>:18:13)
(execjs):32897:8
(execjs):32903:14
global ((execjs):1:102)
Object.<anonymous> ((execjs):1:120)
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/execjs-2.7.0/lib/execjs/external_runtime.rb:39:in `exec'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/execjs-2.7.0/lib/execjs/external_runtime.rb:21:in `eval'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/react-rails-2.1.0/lib/react/server_rendering/exec_js_renderer.rb:39:in `render_from_parts'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/react-rails-2.1.0/lib/react/server_rendering/exec_js_renderer.rb:20:in `render'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/react-rails-2.1.0/lib/react/server_rendering/bundle_renderer.rb:40:in `render'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/react-rails-2.1.0/lib/react/server_rendering.rb:27:in `block in render'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/connection_pool-2.2.1/lib/connection_pool.rb:64:in `block (2 levels) in with'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/connection_pool-2.2.1/lib/connection_pool.rb:63:in `handle_interrupt'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/connection_pool-2.2.1/lib/connection_pool.rb:63:in `block in with'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/connection_pool-2.2.1/lib/connection_pool.rb:60:in `handle_interrupt'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/connection_pool-2.2.1/lib/connection_pool.rb:60:in `with'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/react-rails-2.1.0/lib/react/server_rendering.rb:26:in `render'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/react-rails-2.1.0/lib/react/rails/component_mount.rb:66:in `prerender_component'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/react-rails-2.1.0/lib/react/rails/component_mount.rb:34:in `block in react_component'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionview-5.1.0.rc2/lib/action_view/helpers/capture_helper.rb:39:in `block in capture'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionview-5.1.0.rc2/lib/action_view/helpers/capture_helper.rb:203:in `with_output_buffer'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionview-5.1.0.rc2/lib/action_view/helpers/capture_helper.rb:39:in `capture'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionview-5.1.0.rc2/lib/action_view/helpers/tag_helper.rb:272:in `content_tag'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/react-rails-2.1.0/lib/react/rails/component_mount.rb:49:in `react_component'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/react-rails-2.1.0/lib/react/rails/view_helper.rb:21:in `react_component'
/Users/millan/Documents/code/upshot/app/views/posts/show.html.erb:44:in `_app_views_posts_show_html_erb___826926745927560213_70204989861840'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionview-5.1.0.rc2/lib/action_view/template.rb:157:in `block in render'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/activesupport-5.1.0.rc2/lib/active_support/notifications.rb:168:in `instrument'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionview-5.1.0.rc2/lib/action_view/template.rb:352:in `instrument_render_template'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionview-5.1.0.rc2/lib/action_view/template.rb:155:in `render'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionview-5.1.0.rc2/lib/action_view/renderer/template_renderer.rb:52:in `block (2 levels) in render_template'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionview-5.1.0.rc2/lib/action_view/renderer/abstract_renderer.rb:42:in `block in instrument'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/activesupport-5.1.0.rc2/lib/active_support/notifications.rb:166:in `block in instrument'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/activesupport-5.1.0.rc2/lib/active_support/notifications/instrumenter.rb:21:in `instrument'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/activesupport-5.1.0.rc2/lib/active_support/notifications.rb:166:in `instrument'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionview-5.1.0.rc2/lib/action_view/renderer/abstract_renderer.rb:41:in `instrument'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionview-5.1.0.rc2/lib/action_view/renderer/template_renderer.rb:51:in `block in render_template'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionview-5.1.0.rc2/lib/action_view/renderer/template_renderer.rb:59:in `render_with_layout'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionview-5.1.0.rc2/lib/action_view/renderer/template_renderer.rb:50:in `render_template'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionview-5.1.0.rc2/lib/action_view/renderer/template_renderer.rb:14:in `render'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionview-5.1.0.rc2/lib/action_view/renderer/renderer.rb:42:in `render_template'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionview-5.1.0.rc2/lib/action_view/renderer/renderer.rb:23:in `render'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionview-5.1.0.rc2/lib/action_view/rendering.rb:103:in `_render_template'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_controller/metal/streaming.rb:217:in `_render_template'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionview-5.1.0.rc2/lib/action_view/rendering.rb:83:in `render_to_body'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_controller/metal/rendering.rb:52:in `render_to_body'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_controller/metal/renderers.rb:141:in `render_to_body'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/abstract_controller/rendering.rb:24:in `render'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_controller/metal/rendering.rb:36:in `render'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_controller/metal/instrumentation.rb:44:in `block (2 levels) in render'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/activesupport-5.1.0.rc2/lib/active_support/core_ext/benchmark.rb:12:in `block in ms'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/2.4.0/benchmark.rb:308:in `realtime'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/activesupport-5.1.0.rc2/lib/active_support/core_ext/benchmark.rb:12:in `ms'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_controller/metal/instrumentation.rb:44:in `block in render'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_controller/metal/instrumentation.rb:87:in `cleanup_view_runtime'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/activerecord-5.1.0.rc2/lib/active_record/railties/controller_runtime.rb:29:in `cleanup_view_runtime'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_controller/metal/instrumentation.rb:43:in `render'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_controller/metal/implicit_render.rb:33:in `default_render'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_controller/metal/basic_implicit_render.rb:4:in `block in send_action'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_controller/metal/basic_implicit_render.rb:4:in `tap'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_controller/metal/basic_implicit_render.rb:4:in `send_action'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/abstract_controller/base.rb:186:in `process_action'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_controller/metal/rendering.rb:30:in `process_action'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/abstract_controller/callbacks.rb:20:in `block in process_action'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/activesupport-5.1.0.rc2/lib/active_support/callbacks.rb:108:in `block in run_callbacks'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/react-rails-2.1.0/lib/react/rails/controller_lifecycle.rb:31:in `use_react_component_helper'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/activesupport-5.1.0.rc2/lib/active_support/callbacks.rb:117:in `block in run_callbacks'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/activesupport-5.1.0.rc2/lib/active_support/callbacks.rb:135:in `run_callbacks'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/abstract_controller/callbacks.rb:19:in `process_action'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_controller/metal/rescue.rb:20:in `process_action'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_controller/metal/instrumentation.rb:32:in `block in process_action'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/activesupport-5.1.0.rc2/lib/active_support/notifications.rb:166:in `block in instrument'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/activesupport-5.1.0.rc2/lib/active_support/notifications/instrumenter.rb:21:in `instrument'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/activesupport-5.1.0.rc2/lib/active_support/notifications.rb:166:in `instrument'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_controller/metal/instrumentation.rb:30:in `process_action'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_controller/metal/params_wrapper.rb:252:in `process_action'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/activerecord-5.1.0.rc2/lib/active_record/railties/controller_runtime.rb:22:in `process_action'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/abstract_controller/base.rb:124:in `process'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionview-5.1.0.rc2/lib/action_view/rendering.rb:30:in `process'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_controller/metal.rb:189:in `dispatch'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_controller/metal.rb:253:in `dispatch'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_dispatch/routing/route_set.rb:49:in `dispatch'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_dispatch/routing/route_set.rb:31:in `serve'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_dispatch/journey/router.rb:46:in `block in serve'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_dispatch/journey/router.rb:33:in `each'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_dispatch/journey/router.rb:33:in `serve'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_dispatch/routing/route_set.rb:832:in `call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/warden-1.2.7/lib/warden/manager.rb:36:in `block in call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/warden-1.2.7/lib/warden/manager.rb:35:in `catch'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/warden-1.2.7/lib/warden/manager.rb:35:in `call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/rack-2.0.1/lib/rack/etag.rb:25:in `call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/rack-2.0.1/lib/rack/conditional_get.rb:25:in `call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/rack-2.0.1/lib/rack/head.rb:12:in `call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/rack-2.0.1/lib/rack/session/abstract/id.rb:222:in `context'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/rack-2.0.1/lib/rack/session/abstract/id.rb:216:in `call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_dispatch/middleware/cookies.rb:613:in `call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/activerecord-5.1.0.rc2/lib/active_record/migration.rb:556:in `call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_dispatch/middleware/callbacks.rb:26:in `block in call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/activesupport-5.1.0.rc2/lib/active_support/callbacks.rb:97:in `run_callbacks'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_dispatch/middleware/callbacks.rb:24:in `call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_dispatch/middleware/executor.rb:12:in `call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_dispatch/middleware/debug_exceptions.rb:59:in `call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/web-console-3.5.0/lib/web_console/middleware.rb:135:in `call_app'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/web-console-3.5.0/lib/web_console/middleware.rb:28:in `block in call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/web-console-3.5.0/lib/web_console/middleware.rb:18:in `catch'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/web-console-3.5.0/lib/web_console/middleware.rb:18:in `call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_dispatch/middleware/show_exceptions.rb:31:in `call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/railties-5.1.0.rc2/lib/rails/rack/logger.rb:36:in `call_app'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/railties-5.1.0.rc2/lib/rails/rack/logger.rb:24:in `block in call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/activesupport-5.1.0.rc2/lib/active_support/tagged_logging.rb:69:in `block in tagged'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/activesupport-5.1.0.rc2/lib/active_support/tagged_logging.rb:26:in `tagged'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/activesupport-5.1.0.rc2/lib/active_support/tagged_logging.rb:69:in `tagged'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/railties-5.1.0.rc2/lib/rails/rack/logger.rb:24:in `call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/sprockets-rails-3.2.0/lib/sprockets/rails/quiet_assets.rb:13:in `call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_dispatch/middleware/remote_ip.rb:79:in `call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_dispatch/middleware/request_id.rb:25:in `call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/rack-2.0.1/lib/rack/method_override.rb:22:in `call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/rack-2.0.1/lib/rack/runtime.rb:22:in `call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/activesupport-5.1.0.rc2/lib/active_support/cache/strategy/local_cache_middleware.rb:27:in `call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_dispatch/middleware/executor.rb:12:in `call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/actionpack-5.1.0.rc2/lib/action_dispatch/middleware/static.rb:125:in `call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/rack-2.0.1/lib/rack/sendfile.rb:111:in `call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/railties-5.1.0.rc2/lib/rails/engine.rb:522:in `call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/puma-3.8.2/lib/puma/configuration.rb:224:in `call'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/puma-3.8.2/lib/puma/server.rb:600:in `handle_request'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/puma-3.8.2/lib/puma/server.rb:435:in `process_client'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/puma-3.8.2/lib/puma/server.rb:299:in `block in run'
/Users/millan/.rbenv/versions/2.4.0/lib/ruby/gems/2.4.0/gems/puma-3.8.2/lib/puma/thread_pool.rb:120:in `block in spawn_thread'

[rmosolgo]

Could you please share your usage of react_ujs? For example, could you show the code where it is required into your project?

Also, could you tell me where CommentsContainer is found in your project? (What file path?)

[Najtmare]

I use the default configuration that is provided when running these 3 commands. So I'm not really sure what you mean by usage of react_ujs.

$ rails webpacker:install
$ rails webpacker:install:react
$ rails generate react:install

CommentsContainer is found in app/javascript/components/

Edit: Forgot to mention I use Rails 5.1.0.rc2

[rmosolgo]

Thanks, I'm hoping we can track this down! How weird ...

usage of react_ujs

Somewhere, react_ujs is being loaded in your project. Hopefully it's in app/javascripts/packs/application.js, could you look there and share the code? If you don't see react_ujs, could you check app/assets/javascripts/application.js? That's where the old sprockets setup goes, but it could have gone their by mistake.

Also, would you mind sharing the contents of app/javascript/components/CommentsContainer.js(x)?

[Najtmare]

application.js

console.log('Hello World from Webpacker')
// Support component names relative to this directory:
var componentRequireContext = require.context("components", true)
var ReactRailsUJS = require("react_ujs")
ReactRailsUJS.useContext(componentRequireContext)

CommentsContainer:

var CommentsContainer = React.createClass({

  render: function() {
    return <div />;
  }
});

[rmosolgo]

CommentsContainer must export the react component, try adding this to the end:

module.exports = CommentsContainer

Does that change the outcome for you?

[Najtmare]

Where do you put that, application.js?

[rmosolgo]

In order to use webpack, you must learn Node.js's require and module.exports features. CommentsContainer.js should look like this:

var React = require("react")

var CommentsContainer = React.createClass({

  render: function() {
    return <div />;
  }
});

module.exports = CommentsContainer 

[Najtmare]

That doesn't seem to help.

[Najtmare]

Here's a test app that recreates that behaviour: https://github.com/Najtmare/reactpack

[rmosolgo]

Thanks for pushing that reproduction app! That makes it easy to see. I think we have a misunderstanding about how react_component finds the component.

react_component("HelloWorld") tries require("./components/HelloWorld"). But in your app, the file is called hello_world (underscore), not HelloWorld (camelcase).

So, you should either:

• change your react_component usage to match the file:

  react_component("hello_world")
  ``
  
  OR 

• change your file name to match the react_component usage

  cp app/assets/javascripts/components/hello_world.js app/assets/javascripts/components/HelloWorld.js
  rm app/assets/javascripts/components/hello_world.js

Does that improve it for you?

I see another person with this issue: http://stackoverflow.com/questions/43676072/react-rails-component-is-not-defined

Perhaps I should improve the documentation!

[Najtmare]

Hm, that's weird. I remember using this same gem, perhaps a year ago or so where underscore did not matter much as long as the component had the correct class name. Is this only relevant for webpacker or the asset pipeline as well?

I also, vaguely, remember running the react generator without an underscore and it still created the component file with an underscore? Perhaps that should be changed? I'll check this out one more time in the morning and get back to you.

Thanks.

[rmosolgo]

You're right about the difference between asset pipeline and webpacker!

With the asset pipeline, all javascripts are loaded in the global namespace, so you find classes by name.

In webpack, each file is a module, so to find a class, you must load its module. The module is the file, so there's the dependency on the file name!

Let me know what you find with the generator. Maybe we need a fix there!

[Najtmare]

So it seems like the generators always use the same file name regardless of the fact that webpacker is present.

This should probably change so that you don't have to do this:

react_component('hello_world')

when the file name is hello_world.js

I made a slight change which seemed to work fine, you can see it here.

Either that or the docs should be updated to outline how to use the react component helper when webpacker is defined.

Let me know what you think.

[rmosolgo]

That change looks great! Could you open a PR for it?

[Najtmare]

Done #703