User ogulcan1787 reported an error when clicking the homepage logo, persisting even after updates and clearing custom code. Initial troubleshooting by JammyDodger suggested checking browser console and logs, while Arkshine identified issues with theme components and plugins. The root cause was traced to custom JavaScript that manipulated DOM elements containing Ember.js components, disrupting their lifecycle ogulcan1787. Arkshine advised using Discourse’s plugin API instead of direct DOM manipulation, providing a working solution using api.registerModelTransformer and api.onPageChange to safely move tags without breaking functionality. After initial success, ogulcan1787 noted duplicate tags appearing on logo clicks; Arkshine updated the code to prevent reprocessing. Further issues emerged in the “Latest” section and category pages, where tags either duplicated or failed to appear; Arkshine revised the script again to handle these edge cases. The final solution successfully positions tags as desired, matching the layout on https://pvpfarm.com, without breaking core functionality. ogulcan1787 expressed deep gratitude, calling Arkshine a “master.” For future paid assistance, JammyDodger suggested the Marketplace category. The fix relies on Discourse’s plugin API, not direct GitHub code, ensuring compatibility and maintainability.
Does this also happen in safe mode? Could you also check the browser console for errors when you click it, as well as looking in /logs to see if there’s any more detail.
Do you have any JS customizations outside the remote components?
I would try to disable all the components and enable them one by one until the error happens.
<script>
function moveTagsToTitle() {
const mainLinks = document.querySelectorAll('.main-link');
mainLinks.forEach(mainLink => {
const discourseTags = mainLink.querySelector('.discourse-tags');
const titleElement = mainLink.querySelector('.title');
if (discourseTags && titleElement) {
const tags = discourseTags.querySelectorAll('.discourse-tag');
tags.forEach(tag => {
const tagSpan = document.createElement('span');
tagSpan.className = 'discourse-tag box';
tagSpan.textContent = tag.textContent;
tagSpan.style.fontSize = 'var(--font-down-2)';
tagSpan.style.borderRadius = '10px';
tagSpan.style.border = '1px solid #444460';
tagSpan.style.backgroundColor = '#1f1f33';
tagSpan.style.margin = '2px';
tagSpan.style.display = 'inline-block';
tagSpan.style.overflow = 'hidden';
tagSpan.style.whiteSpace = 'nowrap';
tagSpan.style.textOverflow = 'ellipsis';
tagSpan.style.verticalAlign = 'middle';
tagSpan.style.marginRight = '5px';
tagSpan.style.marginLeft = '-6px';
titleElement.insertBefore(tagSpan, titleElement.firstChild);
});
if (discourseTags.parentNode) {
discourseTags.parentNode.removeChild(discourseTags);
}
}
});
const topicHeaderExtras = document.querySelectorAll('.topic-header-extra');
topicHeaderExtras.forEach(topicHeaderExtra => {
const discourseTags = topicHeaderExtra.querySelector('.discourse-tags');
const tags = discourseTags.querySelectorAll('.discourse-tag');
tags.forEach(tag => {
tag.className = 'discourse-tag box';
tag.style.borderRadius = '10px';
tag.style.border = '1px solid #444460';
tag.style.backgroundColor = '#1f1f33';
tag.style.margin = '1px';
tag.style.padding = '2px 8px';
tag.style.display = 'inline-block';
tag.style.overflow = 'hidden';
tag.style.whiteSpace = 'nowrap';
tag.style.textOverflow = 'ellipsis';
tag.style.verticalAlign = 'middle';
tag.style.marginRight = '5px';
tag.style.marginBottom = '5px';
});
});
}
window.addEventListener('load', moveTagsToTitle);
const observer = new MutationObserver(moveTagsToTitle);
const targetNode = document.body;
const observerOptions = {
childList: true,
subtree: true
};
observer.observe(targetNode, observerOptions);
</script>
These codes cause this error.
I don’t know how can I fix.
I need these codes 
You’re moving elements containing Emberjs components (here is the tags list), which I think likely disrupts the component’s lifecycle.
Your best bet here is to use the API.
In your case, either:
Using plugin outlets as I showed in your last topic. However since it doesn’t exist for the latest topics on the category page, you will need to request it.
Overwrite the template. This is not a good solution for compatibility reasons, but it can be an immediate alternative.
I found these codes.
This isn’t what I wanted, but it will do for now.
var pElement = document.getElementById('site-logo').parentNode;
//var pElement = document.createElement('a');
//pElement.innerHTML = aElement.innerHTML;
//aElement.replaceWith(pElement);
pElement.href = '#';
pElement.style.cursor = 'pointer';
pElement.onclick = function() {
window.location.href = '/';
};
//document.getElementById('site-logo').parentNode.href = '/';
If anyone can help, I’m waiting. Thank you 
I would highly recommend you to not going that path. It’s like applying a band-aid to a side effect instead of fixing the root cause of the issue. You will create more problems with it (like your latest topic because of the above code)
You can make your JS a little more discourse friendly (the best way is still using plugin outlet when you can).
Here an example. It uses the API on page change, runs code on specific route, and copy the HTML before the link (so you can click on the tag):
<script type="text/discourse-plugin" version="0.8">
const { next } = require("@ember/runloop");
function moveTags() {
const mainLinks = document.querySelectorAll(".main-link:not(.tags-moved)");
mainLinks.forEach((mainLink) => {
const discourseTags = mainLink.querySelector(".discourse-tags");
const titleElement = mainLink.querySelector("a[data-topic-id]");
if (discourseTags && titleElement) {
titleElement.insertAdjacentHTML("beforebegin", discourseTags.outerHTML);
mainLink.classList.add('tags-moved');
}
});
}
api.registerModelTransformer("topic", async (topics) => {
next(() => {
moveTags();
})
});
api.onPageChange((url) => {
if (url.startsWith("/categories")) {
moveTags();
}
});
</script>
.top-row,
.link-top-line {
.discourse-tag {
font-size: var(--font-down-2) !important;
padding: 2px 8px;
margin: 2px 5px 2px -6px;
border-radius: 10px;
border: 1px solid #444460;
background-color: #1f1f33;
}
.discourse-tag::after {
content: '' !important;
margin-left: 0 !important;
}
}
.bottom-row,
.link-bottom-line {
.discourse-tags {
display: none;
}
}
Hi @Arkshine
Changing the logo link did not help, I deleted these codes.
But there is no other way. I need to position the tags like this.
https://pvpfarm.com
If I pay someone, can they write decent codes that work?
And where do you find these codes? (JS) From GitHub - discourse/discourse: A platform for community discussion. Free, open, simple. · GitHub ?
You can create a topic in Marketplace if you need/want some paid assistance. 
I gave the code for that in #11.
Hi again @Arkshine
I added the codes you gave after deleting these codes, but they are not working. Am I making a mistake?
I’ve updated my code above.
I don’t know how to thank you. Thank you very much ! 
@Arkshine Sorry for resurrecting the topic again.
Thank you again. I found an error in the codes you gave.
Can you help me please ?
I tried to correct the codes but I couldn’t.
In the Latest section, only the tag appears in the most recently opened tagged topic.
And when you enter a category, the tags do not appear.
@ogulcan1787 I’ve updated the code above.
