question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Errors when using vue-turbolinks with separate js files

See original GitHub issue

When using Rails View (RView) with separate javascript files, each loading Vue Components, this library throws errors and page renders odd as a result.

Reproduce

  1. Setup 2 Rails views (RviewA and RviewB), each with their own JS file and and vue components and turbolinks
  2. Using an href link, reference the other page.
  3. 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:closed
  • Created 4 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
excid3commented, Jan 21, 2020

Awesome @tleish! Glad I could help! 🤘

0reactions
tleishcommented, Jan 21, 2020

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

<!-- views/layout/application.html.erb -->
<head>
   ...
  <%= stylesheet_pack_tag 'common', 'data-turbolinks-track': 'reload'  %>
  <%= javascript_pack_tag 'common', 'data-turbolinks-track': 'reload' %>
  <%= yield :head %>
</head>
<!-- views/articles/index.html.erb -->
<% content_for :head do %>
  <%= javascript_pack_tag 'articles', 'data-turbolinks-track': 'reload' %>
<% end %>

I would not have found the solution without your responses. Thank you.

Read more comments on GitHub >

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

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found