react_on_rails/Turbolinks Issues after webpacker to shakapacker upgrade #324

MikaelHTW · 2023-07-03T10:52:31Z

MikaelHTW
Jul 3, 2023

Hey! I hope I can find some help here :)

I recently upgraded from webpacker to shakapacker 6.6.0 and also webpack 4 to 5.

I have an application.js pack that contains some javascripts for interacting with elements that can appear anywhere on the page (like header, footer, etc).

Before the upgrade, it was loaded in the <head> of the DOM in my layout and my other JS that I imported via the regular javascript_pack_ tag calls in the views was loaded in the <body>.

I had to move this to the body, because while keeping this in the <head> of the DOM with all the other javascripts I'm loading across the views (with the help of the new pack helpers append/prepend_javascript_pack_tag) caused huge bugs (I assume this it related to Turbolinks)

So no JS is loaded in the head (only some stuff with javascript_include_tag calls from sprockets)., everything in the body. Almost everything is working fine, but still some parts are broken, especially my react_on_rails integration.

After 2-3 Turbolink visits, I get the useContext Invalid Hooks Error.

If I move my main javascript pack (where I also import react_on_rails and register my component) back into the <head> of the DOM, this solves it (and also some other minor issues I still have), but it causes other massive bugs.

I'm sure this is because of turbolinks and the way the JS is loaded and cached. And surely I am doing something wrong. Does anyone have advice?

Rails 6.1.7.4
Shakapacker 6.60
webpack 5.83.1
react-on-rails 13.3.3
Turbolinks 5.2 (I already saw an open Issue about this version, downgrading turbolinks to a piror version didn't fix it)
Node 16.20.0

Thanks in advance 😇 🙏🏻

Answered by wb-ts

Jul 15, 2023

Hello! It seems like you're facing some issues with the integration of React on Rails and Turbolinks after upgrading to Shakapacker 6.6.0 and Webpack 5. I understand that moving your main JavaScript pack back into the <head> of the DOM solves the useContext Invalid Hooks Error, but causes other bugs.

Here are a few suggestions you can try:

Ensure correct configuration: Verify that your Webpack configuration is set up correctly for React on Rails. Make sure that React and ReactDOM are excluded from the global scope and are properly bundled as external dependencies.
Disable Turbolinks for specific pages: If the issue mainly occurs on certain pages where Turbolinks is not required, you c…

View full answer

Judahmeek · 2023-07-08T05:16:18Z

Judahmeek
Jul 8, 2023
Collaborator

I'd recommend trying to split turbolinks out of the main bundle & put it back into the head.

3 replies

MikaelHTW Jul 8, 2023
Author

I'd recommend trying to split turbolinks out of the main bundle & put it back into the head.

Is this possible with webpack/shakapacker ?

justin808 Jul 9, 2023
Maintainer

@MikaelHTW Anything is possible if one wants to customize the Webpack configuration within ShakaPacker.

First, are you using both TurboLinks and react-router or some other JS routing library? If so, that is problematic.

Otherwise, I'd like to get to the root cause of the issues you're seeing.

Next, your strategy of moving the JS to the body because of Turbolinks does not sound right.

If your company might be OK with getting some paid help, we might be able to help you solve the problems more efficiently.

Please book a time.

Alternatively, please join our Slack for React and Rails.

MikaelHTW Jul 10, 2023
Author

Thanks for your answer @justin808.

It might the problem you already mentioned: Turbolinks is in the head and the rest of the JS in the body. A wrong approach.
We'll try to fix this by moving everything back to the head + fixing the bugs.

If nothing helps would be happy to get in touch with you for a review of the current implementation.

wb-ts · 2023-07-15T16:36:58Z

wb-ts
Jul 15, 2023

Hello! It seems like you're facing some issues with the integration of React on Rails and Turbolinks after upgrading to Shakapacker 6.6.0 and Webpack 5. I understand that moving your main JavaScript pack back into the <head> of the DOM solves the useContext Invalid Hooks Error, but causes other bugs.

Here are a few suggestions you can try:

Ensure correct configuration: Verify that your Webpack configuration is set up correctly for React on Rails. Make sure that React and ReactDOM are excluded from the global scope and are properly bundled as external dependencies.
Disable Turbolinks for specific pages: If the issue mainly occurs on certain pages where Turbolinks is not required, you can disable Turbolinks for those pages by adding the data-turbolinks="false" attribute to the <body> tag in the layout file.

For example:
```
<body data-turbolinks="false">
 ...
</body>
```
Use turbolinks:load event: Instead of relying on the DOMContentLoaded event to initialize your JavaScript code, use the turbolinks:load event provided by Turbolinks. This event is fired when a new page has been loaded via Turbolinks.

For example:
```
document.addEventListener('turbolinks:load', () => {
  // Initialize your JavaScript code here
});
```
In this case, you can include your main JavaScript pack in the <head> section of the layout, allowing it to be loaded and initialized correctly when each page is visited.
Check compatibility with other libraries: Ensure that all the libraries you are using, such as React, ReactDOM, React on Rails, and Turbolinks, are compatible with each other. Some versions may have conflicts or issues with Turbolinks, so try different combinations of versions if necessary.

It's important to note that the specific issue you're facing may require further investigation and debugging. You might need to go through your code and identify any potential conflicts or areas where the integration is not working as expected.

I hope these suggestions help resolve your issue. If you have any further questions or need more assistance, please feel free to ask!

2 replies

jjla26 Jul 17, 2023

@wb-ts I have a question. Is the append_javascript_pack_tag helper compatible with turbolinks?. When you have the Javascript packages in the head and then you have a specific view using the helper append_javascript_pack_tag. This new view is queueing a new javascript pack to the head which causes a turbolinks full reload. Then the whole page kinda loses the turbolinks benefits no ?

Judahmeek Dec 7, 2023
Collaborator

@jjla26 append_javascript_pack_tag actually causes target packs to be added to wherever the call to javascript_pack_tag is, which is usually in the head of the document.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

react_on_rails/Turbolinks Issues after webpacker to shakapacker upgrade #324

{{title}}

Replies: 2 comments 5 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

react_on_rails/Turbolinks Issues after webpacker to shakapacker upgrade #324

MikaelHTW Jul 3, 2023

Replies: 2 comments · 5 replies

Judahmeek Jul 8, 2023 Collaborator

MikaelHTW Jul 8, 2023 Author

justin808 Jul 9, 2023 Maintainer

MikaelHTW Jul 10, 2023 Author

wb-ts Jul 15, 2023

jjla26 Jul 17, 2023

Judahmeek Dec 7, 2023 Collaborator

MikaelHTW
Jul 3, 2023

Replies: 2 comments 5 replies

Judahmeek
Jul 8, 2023
Collaborator

MikaelHTW Jul 8, 2023
Author

justin808 Jul 9, 2023
Maintainer

MikaelHTW Jul 10, 2023
Author

wb-ts
Jul 15, 2023

Judahmeek Dec 7, 2023
Collaborator