Skip to content

Add docs for hooks issue with multiple packs #1376

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Add docs for hooks issue with multiple packs #1376

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions docs/contributor-info/errors-with-hooks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ react.development.js:1465 Uncaught Error: Invalid hook call. Hooks can only be c
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
```

#### Check your `node_modules`
The main reason to get this is due to multiple versions of React installed.

```
Expand All @@ -32,6 +33,7 @@ npm ERR! extraneous: react@16.13.1 /Users/justin/shakacode/react-on-rails/react_

Make sure there is only one version of React installed!

#### Linking packages
If you used yarn link, then you'll have two versions of React installed.

Instead use [Yalc](https://github.com/whitecolor/yalc).
Expand All @@ -43,3 +45,16 @@ yalc publish
cd spec/dummy
yalc link react-on-rails
```

#### Multiple `javascript_pag_tag`s
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

javascript_pack_tag

@samtgarson This is really useful, but this is the wrong place.

@Judahmeek any suggestion for the right place? We have a big doc PR update: #1367

and we document the v6 setup in https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh

And the real solution is for rails/webpacker to throw an error if the javascript_pack_tag is called multiple times.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great! Yeah, the only reason I put it here was that this page comes up in google searches a lot related to react/rails/errors with hooks (which was how I discovered the issue with multiple bundles).

(surely the real real fix is for Webpacker to allow multiple pack tags but just not include duplicate shared packs...?)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Judahmeek how about a troubleshooting document?

Copy link
Contributor

@Judahmeek Judahmeek Aug 25, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@justin808 how would such a document differ from this here?

Things to add:

# in helper file
module ReactHelper
  def append_javascript_pack(pack_name)
    content_for :view_pack_tags do
      " #{pack_name}"
    end
  end
end

# in partials
<% append_javascript_pack("packs separated by-spaces") %>

# in layout
    <% 
      # Because content_for appends as strings separated by white spaces, pack names are supposed to be space separated too.
      # This way the separation is consistent regardless of their sources.
      pack_tag_args = (yield :view_pack_tags).strip.split(" ")

      pack_tag_args << "oneflare-header" unless skip_header?
      pack_tag_args << "oneflare-footer" unless skip_footer?
      pack_tag_args << "oneflare-user-switcher" if Rails.env.development? || Rails.env.staging?
    %>
    <%= javascript_pack_tag *pack_tag_args unless pack_tag_args.empty? %>

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Judahmeek the addition above is good.

Might be pretty self-explanatory if this gets merged: https://github.com/rails/webpacker/pull/3083/files

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Judahmeek can you close this and a docs page to https://github.com/shakacode/shakapacker/.


According to [this issue](https://github.com/rails/webpacker/issues/2932#issuecomment-860590789), `javascript_pag_tag` will include vendor and shared bundles each time you call it, which can lead to multiple instances of React being included on your page. Until that issue is fixed, ensure you're only calling that once per page.

```html
<!-- NO -->
<%= javascript_pack_tag 'application' %>
<%= javascript_pack_tag 'some_components' %>

<!-- YES -->
<%= javascript_pack_tag 'application', 'some_components' %>
```