Errors when using vue-turbolinks with separate js files
See original GitHub issueWhen using Rails View (RView) with separate javascript files, each loading Vue Components, this library throws errors and page renders odd as a result.
Reproduce
- Setup 2 Rails views (RviewA and RviewB), each with their own JS file and and vue components and turbolinks
- Using an href link, reference the other page.
- Click back and forth between pages.
Observed
- RviewA renders fine when first loaded (or refreshed).
- Clicking link to RviewB, RviewB components not rendered. Javascript console errors
Unknown custom element: <my-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)
...
- Clicking link back to RviewA, RviewA components rendered correctly
- Clicking link to RviewB one more time, parts of RviewA and RviewB components rendered (weird). Old/New Javascript console errors
Error in destroyed hook: "NoModificationAllowedError: Failed to set the 'outerHTML' property on 'Element': This element has no parent node."
(found in <Root>)
...
DOMException: Failed to set the 'outerHTML' property on 'Element': This element has no parent node.
...
DOMException: Failed to set the 'outerHTML' property on 'Element': This element has no parent node.
...
Unknown custom element: <my-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)
...
- Refresh RviewB, view renders correctly.
Stack traces lead back to turbolinks and/or teardown code.
I uploaded a simple Rails app example of this here: https://github.com/tleish/vuerails-test
Removing tubolinks and vue-turbolinks allows views with vue components to render as expected.
Bug or have I configured something incorrectly?
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Can't run page specific javascript pack when using Turbolinks
My question is basically, is mounting multiple Vue apps based on conditionals (which are based on the current page) inside one javascript pack ......
Read more >How to use Vue.js and Turbolinks together (Example) - GoRails
Using Vue.js and Turbolinks together can be a little complex to wrap your head around at first. We not only dive into how...
Read more >How to use Vue.js and Turbolinks together - YouTube
You can find the Vue - Turbolinks node module here: https://github.com/excid3/ vue -turbolinksCheck out https://gorails.com for Pro episodes and ...
Read more >How We Migrated To Turbolinks Without Breaking Javascript
In this article, I'm going to tell you about our migration from PJAX to Turbolinks. The good news is that Turbolinks works surprisingly...
Read more >vue-turbolinks - npm
If you're using vue-router or another Javascript routing library, you don't need to use Turbolinks or this adapter. Turbolinks is meant to ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Awesome @tleish! Glad I could help! 🤘
@excid3 - I created the small app as an example of how you might break up a large site into smaller subsections of javascript. In other words, instead of one large javascript for 50 pages you might break it up into 3. I thought I understood turbolinks before, but after your comment and digging deeper into the documentation I understand it better.
FYI, I learned the heart of the issue has to do with turbolinks and rendering the javascript the the head vs the body. Rendering the javascript to the head solves the odd behavior issues I experienced.
I would not have found the solution without your responses. Thank you.