react-rails icon indicating copy to clipboard operation
react-rails copied to clipboard

Published 20 hours ago • verified publisher icon reactjs

Uncaught ReferenceError: ComponentName is not defined w/ webpacker

Open Najtmare opened this issue 8 years ago • 32 comments

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.
  • [x] 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'

Najtmare avatar Apr 27 '17 14:04 Najtmare

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?)

rmosolgo avatar Apr 27 '17 14:04 rmosolgo

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

Najtmare avatar Apr 27 '17 16:04 Najtmare

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)?

rmosolgo avatar Apr 27 '17 16:04 rmosolgo

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 />;
  }
});

Najtmare avatar Apr 27 '17 17:04 Najtmare

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

module.exports = CommentsContainer

Does that change the outcome for you?

rmosolgo avatar Apr 27 '17 18:04 rmosolgo

Where do you put that, application.js?

Najtmare avatar Apr 27 '17 18:04 Najtmare

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

rmosolgo avatar Apr 27 '17 19:04 rmosolgo

That doesn't seem to help.

Najtmare avatar Apr 27 '17 19:04 Najtmare

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

Najtmare avatar Apr 28 '17 10:04 Najtmare

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!

rmosolgo avatar Apr 28 '17 21:04 rmosolgo

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.

Najtmare avatar Apr 29 '17 00:04 Najtmare

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!

rmosolgo avatar Apr 29 '17 01:04 rmosolgo

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.

Najtmare avatar Apr 29 '17 13:04 Najtmare

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

rmosolgo avatar Apr 29 '17 13:04 rmosolgo

Done https://github.com/reactjs/react-rails/pull/703

Najtmare avatar Apr 29 '17 13:04 Najtmare

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?

Najtmare avatar May 01 '17 20:05 Najtmare

Yes, I think you're right! I haven't noticed because I don't actually use the generator 😬

Feel free to add to that PR or open a new one, either way!

rmosolgo avatar May 01 '17 20:05 rmosolgo

@Najtmare I had the same problem and thanks to this discussion i've fixed the problem. The only doubt (seeing your git repo) is: server_rendering.js (under packs folders), when is called and why is needed ? react_ujs isn't already called from packs/application.js ? why there is two time the same code ?

Thank you.

inchr avatar May 02 '17 18:05 inchr

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.

rystraum avatar May 03 '17 06:05 rystraum

@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

ysyyork avatar May 10 '17 07:05 ysyyork

Updating the generator for module-related boilerplate in https://github.com/reactjs/react-rails/pull/710

rmosolgo avatar May 11 '17 18:05 rmosolgo

Thanks @rmosolgo. Sorry, I didn't have much time this past week to work further on the issue.

Cheers.

Najtmare avatar May 11 '17 22:05 Najtmare

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

tirdadc avatar May 12 '17 20:05 tirdadc

Possible cause of error is that you added //= require react //= require react_ujs //= require components into your app/assets/javascripts/application.js

AndriySand avatar Dec 20 '17 11:12 AndriySand

Running Rails 4.2.10, Webpacker 3.5.5, React Rails 2.4.7, react_ujs 2.4.4:

rake webpacker:install
rake webpacker:install:react
rails generate react:install
rails g react:component HelloWorld greeting:string

Then:

= javascript_pack_tag 'application'
= react_component("HelloWorld", :greeting => "foo")

Results in:

VM6888:1 Uncaught ReferenceError: HelloWorld is not defined
    at eval (eval at module.exports (react_ujs.self-eb4e9994228856e343ab49d1aed6c23046bf4308ea6d46395e5c39170ab3e56f.js?body=1:95), <anonymous>:1:1)
    at Object.module.exports [as getConstructor] (react_ujs.self-eb4e9994228856e343ab49d1aed6c23046bf4308ea6d46395e5c39170ab3e56f.js?body=1:95)
    at Object.mountComponents (react_ujs.self-eb4e9994228856e343ab49d1aed6c23046bf4308ea6d46395e5c39170ab3e56f.js?body=1:303)
    at HTMLDocument.ReactRailsUJS.handleMount (react_ujs.self-eb4e9994228856e343ab49d1aed6c23046bf4308ea6d46395e5c39170ab3e56f.js?body=1:350)

sshaw avatar Aug 14 '18 01:08 sshaw

@sshaw Tried to replicate your versions, but it worked fine on mine.

https://github.com/rystraum/react-rails-issue-702 https://github.com/rystraum/react-rails-issue-702/blob/master/package.json https://github.com/rystraum/react-rails-issue-702/blob/master/Gemfile

rystraum avatar Aug 14 '18 03:08 rystraum

Thanks. No luck here. One thing of note is that I renamed HelloWorld.js to HelloWorld.jsx. Without the .jsx I get:

application-b3eae222b81429924b35.js:23318 Error: Module build failed: SyntaxError: Unexpected token (7:6)

   5 |   render () {
   6 |     return (
>  7 |       <React.Fragment>
     |       ^
   8 |         Greeting: {this.props.greeting}
   9 |       </React.Fragment>
  10 |     );


    at Object.<anonymous> (application-b3eae222b81429924b35.js:511)
    at __webpack_require__ (application-b3eae222b81429924b35.js:20)
    at webpackContext (application-b3eae222b81429924b35.js:671)
    at application-b3eae222b81429924b35.js:23348
    at Object.getConstructor (application-b3eae222b81429924b35.js:23312)
    at Object.mountComponents (application-b3eae222b81429924b35.js:812)
    at HTMLDocument.ReactRailsUJS.handleMount (application-b3eae222b81429924b35.js:859)

This is a site that was previously (and still is) using Sprockets so I assume something may be happening there (even though they're supposed to coexist).

Will keep digging...

sshaw avatar Aug 14 '18 04:08 sshaw

@sshaw If it helps you, in projects that are transitioning from regular JS/jQuery to React, as a matter of convention, we've found that using .jsx for React stuff and retaining .js for non-React stuff is pretty robust. As a bonus, it helps us track which things are needed to be migrated still. :)

rystraum avatar Aug 14 '18 04:08 rystraum

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.

sshaw avatar Aug 14 '18 04:08 sshaw

Why is the issue still open after this much time? 🤔

@sshaw how you solved the sprockets issue, i think i also have that? @AndriySand i also have this sequence in my application.js so whats the problem here, and solution?

Error i am getting is:

VM2917:1 Uncaught ReferenceError: ComponentName is not defined
    at eval (eval at module.exports (react_ujs.self.js?body=1:95), <anonymous>:1:1)
    at Object.module.exports [as getConstructor] (react_ujs.self.js?body=1:95)
    at Object.mountComponents (react_ujs.self.js?body=1:303)
    at HTMLDocument.ReactRailsUJS.handleMount (react_ujs.self.js?body=1:350)

naming is correct. And View also renders properly, i get this error in the browser console just beside when the view is rendered, if that helps.

ziaulrehman40 avatar Dec 12 '18 09:12 ziaulrehman40