react-rails: Uncaught ReferenceError: ComponentName is not defined w/ webpacker

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'

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 33 (22 by maintainers)

Most upvoted comments

Also, to add to this discussion, the webpacker setup doesn’t support multiple file extensions out of the box. I’ve been spending a couple of hours trying to find out why my CommentsContainer wasn’t being found despite the export default CommentsContainer. Renaming my file from CommentsContainer.js.jsx to ComentsContainer.jsx made it work.

+4
rystraum on May 3, 2017

@sshaw how you solved the sprockets issue, i think i also have that?

@ziaulrehman40 , I think removing react_ujs from application.js fixed it.

+2
sshaw on Dec 12, 2018

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!

+2
rmosolgo on Apr 29, 2017

Fixed!

The issue was the hello world component was loading but Sprockets was still loading react_ujs. This caused:

VM6888:1 Uncaught ReferenceError: HelloWorld is not defined

JSX error was due to "react" missing from .babelrc’s presets config.

+1
sshaw on Aug 14, 2018

A little note for anyone that ended up here migrating from the Sprockets flavor to the Webpack one: if you do not want to rename all your .js.jsx extensions, be sure to update config/webpack/paths.yml to include that extension:

...
extensions:
    - .coffee
    - .js
    - .jsx
    - .js.jsx
...
+1
tirdadc on May 12, 2017

@rmosolgo Hi, I’m wondering which folder should I put my react component files? I ran this

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

and it creates a components folder in app/javascript/components instead of app/assets/javascript/components. But it seems you were saying files should be put under assets. I just get confused about using webpacker. However, prerender works

I fixed this by myself. I need to add <%= javascript_pack_tag ‘application’ %> this to my application.html.erb. Kind of starting to understand. Thanks tho

+1
ysyyork on May 10, 2017

Hm. I think we might have to include the whole

var React = require("react")
...
module.exports = ComponentName

In the generated files. Otherwise we still get the Component is not defined error.

What do you think @rmosolgo? Should I push those changes to my PR or open a seperate one for that?

+1
Najtmare on May 1, 2017

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!

+1
rmosolgo on Apr 28, 2017

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

+1
Najtmare on Apr 28, 2017
Read more comments on GitHub
← react-rails: Unable to run rails g react:install
react-tabs: Can't use Tabs in another Tabs →