Uncaught ReferenceError: ComponentName is not defined w/ webpacker #702
Comments
|
Could you please share your usage of Also, could you tell me where |
|
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. CommentsContainer is found in Edit: Forgot to mention I use Rails 5.1.0.rc2 |
|
Thanks, I'm hoping we can track this down! How weird ...
Somewhere, Also, would you mind sharing the contents of |
|
application.js CommentsContainer: |
|
module.exports = CommentsContainerDoes that change the outcome for you? |
|
Where do you put that, application.js? |
|
In order to use webpack, you must learn Node.js's var React = require("react")
var CommentsContainer = React.createClass({
render: function() {
return <div />;
}
});
module.exports = CommentsContainer |
|
That doesn't seem to help. |
|
Here's a test app that recreates that behaviour: https://github.com/Najtmare/reactpack |
|
Thanks for pushing that reproduction app! That makes it easy to see. I think we have a misunderstanding about how
So, you should either:
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! |
|
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. |
|
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! |
|
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: when the file name is 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. |
|
That change looks great! Could you open a PR for it? |
|
Done #703 |
|
Hm. I think we might have to include the whole 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? |
|
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! |
|
@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. |
|
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 |
|
@rmosolgo Hi, I'm wondering which folder should I put my react component files? I ran this 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 |
|
Updating the generator for module-related boilerplate in #710 |
|
Thanks @rmosolgo. Sorry, I didn't have much time this past week to work further on the issue. Cheers. |
|
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 |
|
Possible cause of error is that you added |
|
Running Rails 4.2.10, Webpacker 3.5.5, React Rails 2.4.7, react_ujs 2.4.4: Then: = javascript_pack_tag 'application'
= react_component("HelloWorld", :greeting => "foo")Results in: |
|
@sshaw Tried to replicate your versions, but it worked fine on mine. https://github.com/rystraum/react-rails-issue-702 |
|
Thanks. No luck here. One thing of note is that I renamed 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 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 |
|
Fixed! The issue was the hello world component was loading but Sprockets was still loading
JSX error was due to |
|
Why is the issue still open after this much time? 🤔 @sshaw how you solved the sprockets issue, i think i also have that? Error i am getting is: 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 , I think removing |
Thanks @sshaw Worked like a charm! |
|
As per the above discussions, it looks like the issue is addressed. Closing this one. |
Help us help you! Please choose one:
react-rails, so I've included the stack trace and the exact steps which make it crash.react-railswith 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.Using rails webpacker
Whenever I try to render a component using the view helper, I get:
I've tried loading this with and without es6 and it will not work. Not even server rendering works.
Stack trace from server rendering:
The text was updated successfully, but these errors were encountered: