We Keep Coding

Disqus comments throws error in a Gatsby site

I am using a gatsby plugin gatsby-plugin-disqus(latest version) to add comments in my gatsby site. It worked previously but now it throws error and comments do not load. Seems like there's circular reference but I don't know what is causing it.
Uncaught TypeError: Converting circular structure to JSON
--> starting at object with constructor 'HTMLDivElement'
| property '__reactInternalInstance$ijgm46blrc' -> object with constructor 'FiberNode'
--- property 'stateNode' closes the circle
at JSON.stringify (<anonymous>)
at b.Channel.h.sendMessage (embed.js:44)
at e.<anonymous> (embed.js:45)
at e.<anonymous> (embed.js:44)
at e.<anonymous> (embed.js:44)
at m (embed.js:44)
at e.trigger (embed.js:44)
at e.<anonymous> (embed.js:44)
at m (embed.js:44)
at b.Channel.trigger (embed.js:44)
at embed.js:44
My disqus config looks like:
const disqusConfig = {
identifier: "/my-post-title-slug/"
title: "my post title"
url: "https://somesite.com/blog/my-post-title-slug/"
}
And i render it like this:
import { Disqus } from 'gatsby-plugin-disqus';
// ....
<Disqus config={disqusConfig} />
I am not sure what is causing this problem. I tried to use previous versions of the plugin but i get the same result.
Please let me know what i am missing here. Thanks.

That is... odd. You usually see this type of issue when attempting to stringify an object containing circuluar references. Ex:
VM1374:32 Uncaught TypeError: Converting circular structure to JSON(…)
But the object you're passing in is simple, containing only string values. I'm wondering if this isn't being caused by Disqus at all, but instead is something else in the mix.
To verify it shouldn't be an issue, I mimicked the exact same set up with a local Gatsby site of my own (v4), using the v1.2.4 of the Disqus package. I see no errors.
That said... my proposed steps:
Confirm that it's not being caused by a different package.
Try padding the config object directly into the component. I don't know why it'd yield a different result, but it's worth a shot:
<Disqus
config={{
identifier: "/my-post-title-slug/",
title: "my post title",
url: "https://somesite.com/blog/my-post-title-slug/"
}}
/>
If it's too much of a hassle, think about trying a Disqus alternative. I built one of my own after hitting a tons of frustrations with Disqus, including performance and lack of SEO-friendliness. You're welcome to try it out:
https://jamcomments.com

Vue.js Error "Cannot find module './undefined'" from webpack when using src=require()

I am trying to load images from a local folder using the src="" from the img tag but I want to load them using the backend. The frontend already has the relative path which is "../assets/imgs/" the backend just has the name and extension ex) "1.png". Thing is that it does work but I'm getting error messages.
This is causing me an issue
<img width=100px height=100px :src="getIconPath(`${user.icon}`)"/>
here is the function that gets called
methods: {
getIconPath(iconName) {
return iconName ? require("../assets/imgs/" + iconName) : ''
}
Here are both the error messages I am getting on the console
[Vue warn]: Error in render: "Error: Cannot find module './undefined'"
found in
---> <Profile> at src/components/profile.vue
<Navbar> at src/components/navbar.vue
<Main> at src/main.vue
<Root> vue.runtime.esm.js:619
Error: "Cannot find module './undefined'"
webpackContextResolve .*$:13
webpackContext .*$:8
getIconPath profile.vue:74
render profile.vue:12
VueJS 43
<anonymous> main.js:31
js app.js:1415
__webpack_require__ app.js:785
fn app.js:151
1 app.js:1488
__webpack_require__ app.js:785
checkDeferredModules app.js:46
<anonymous> app.js:861
<anonymous>
I found very little resources to help out but many of them have said that required fixes their issues. So far I tried moving it to a different folder, moving the require as a function method, using absolute path, using v-attr, and binding it without require. Still I haven't had any luck getting rid of the error message. Here is another link of someone else having the same issue as me but I still couldn't figure out how they fixed it.
https://forum.vuejs.org/t/how-to-fix-the-console-log-error-when-using-require-method-to-bind-an-img-src/77979
I would very much appreciate the help!! I've been stuck for many hours on this and I can't seem to find a helpful solution. If this isn't a good way to go about loading images from the backend feel free to suggest any other alternative ways to do so. Thank You!

I'm going to take a guess here and say that user is populated with data asynchronously. I bet you have something like this in your initial data or store
{
user: {}
}
The issue here is that user.icon is undefined, at least for some period of time. Where you are needlessly converting that into a string with
getIconPath(`${user.icon}`)
will convert undefined into the string "undefined" (because JavaScript is fun like that), hence your error message. The simple solution is to not use a string template, ie
getIconPath(user.icon)
To avoid these sorts of problems, I would instead use a computed property to resolve image imports. This is more efficient than executing a method in your template which happens on every tick
computed: {
userWithIcon () {
return {
...this.user,
icon: this.user.icon && require(`../assets/imgs/${this.user.icon}`)
}
}
}
and in your template
<img width="100px" height="100px" :src="userWithIcon.icon">

I had a similar issue recently and I was able to solve it by making sure that my data was ready before rendering the view. using #Phil assumption that you have something like user: {} in your data, you can just wrap your whole HTML in <div v-if="user !== null"></div>. This makes sure that the user data is ready before even trying to render any image at all or use any data from the user object.
This should eliminate any error at all.

JS error on Chrome 57+ for RichFaces application "Cannot read property 'switchToItem' of undefined"

I've a jsp page with tabs. and sometimes an error occurs (when I press a tab) "Cannot read property 'switchToItem' of undefined"
Uncaught TypeError: Cannot read property 'switchToItem' of undefined
at init.__onHeaderClick (packed.js:6102)
at HTMLTableCellElement.<anonymous> (packed.js:1333)
at HTMLTableCellElement.dispatch (jquery.js:846)
at HTMLTableCellElement.eventHandle (jquery.js:722)
as I understand the error happens in packed.js (this is a js-file packed by richfaces of version 4.3.4). I've looked inside this file and found that RichFaces try to find a list of tabs. these tabs are located in property "rf" (element[richfaces.RICH_CONTAINER]), but in moment when I pressed a tab, there was no property.
This bug reproduce in chrome v.57, in version 56 it doesn't reproduce.
Could you help me with some advice, how it can be fixed?
some technical details:
I use xmlns:rich="http://richfaces.org/rich" <rich:tabPanel> tag in my jsp page
in pom.xml <richfaces.version>4.3.4.Final</richfaces.version>

James G, you have a mistake in richfaces.js
richfaces.$$ = function(componentName, element) {
while (element.parentNode) {
var containerId = element.getAttribute(richfaces.RICH_CONTAINER);
if (containerId && containerId !== "" && !!richfaces.COMPONENT_MAP[containerId] && richfaces.COMPONENT_MAP[containerId].component.name == componentName) {
return e.component;
}
else {
element = element.parentNode;
}
}
};
There is no e. You need change it to
...
return richfaces.COMPONENT_MAP[containerId].component;
...

Sorry I don't have the reputation points to make this a comment.
I don't know if google chrome knows about this problem or would be willing to fix it. Our response to this is to patch RichFaces 4.3.7.Final javascript to not use the adhoc dom element property but a global map instead and then deploy our own richfaces jar to our production environment at the end of the month (after testing). I don't have to ability to deploy this to central repo but if you wanted to see the direct changes I made you can see my commits (https://github.com/JamieGHamilton/core). If chrome fixes the problem then this won't be an issue but I'm not counting on that.
So far the changes I made work perfectly in chrome (and other browsers)
Update: I've included the fix found by dennyDarko - thanks for this. My understanding is that the Chrome 58-beta doesn't produce this behavior so for some affected apps, the admins may choose to wait.

This might he an issue of Chrome 57. Try Chrome 58 Beta.

I had the same issue with Richfaces 4.5.17.Final and Chrome 92.
Additionally there was the following log message:
<jsf.non_displayed_message> <WARNING: FacesMessage(s) have been enqueued, but may not have been displayed.
sourceId=null[severity=(ERROR 2), summary=(One or more resources have the target of 'body', but no 'body' component has been defined within the view.), detail=(One or more resources have the target of 'body', but no 'body' component has been defined within the view.)]>
So changing body to h:body in the main XHTML file has resolved the issue.
And h:head contains <h:outputScript name="jsf.js" library="javax.faces"/>

Extjs Intermittent error

Using Extjs 4.1, an intermittent error is occurring.
Sometimes it occurs, but most of the time it does not.
It always occurs when I start the application, so I press F5 and everything returns to normal.
Using this reference to debug the error, I noticed that it occurs at line 29590.
The error message is very generic:
Uncaught TypeError: Cannot read property 'dom' of null
at constructor.finishRender (ext-all-debug-w-comments.js:29590)
at constructor.finishRenderItems (ext-all-debug-w-comments.js:39796)
at constructor.finishRender (ext-all-debug-w-comments.js:40889)
at constructor.finishRenderChildren (ext-all-debug-w-comments.js:44526)
at constructor.afterRender (ext-all-debug-w-comments.js:29331)
at constructor.callParent (ext-all-debug-w-comments.js:6194)
at constructor.afterRender (ext-all-debug-w-comments.js:36521)
at constructor.finishRender (ext-all-debug-w-comments.js:29625)
at constructor.finishRenderItems (ext-all-debug-w-comments.js:39796)
at constructor.finishRender (ext-all-debug-w-comments.js:40889)
Here is an error print
What must be causing this?

I would have made this a comment, but it doesn't fit.
There is a wide variety of reasons I could think of. Most of them are based on asynchronous calls. You definitely have to provide more information for the question to be answerable.
Obviously, me.el is null, which it shouldn't be. So first you have to find which component is causing the problem. For this, you should exchange line 29590 against something like this:
try {
me.container = Ext.get(me.el.dom.parentNode);
} catch(e) {
console.log(me.id);
console.log(me.itemId);
console.log(me.xtype);
...
console.log(me);
throw e;
}
This should give you an idea which component(s) would be affected.
Then show us the code of that component. Also check whether you modify that component's config from outside the component, e.g. from a store load operation or other asynchronous tasks. Plus you should look at whether overrides for the component and its ancestors are loaded from separate JS files - maybe they are sometimes loaded before, sometimes after the finishRender has been called, and fix exactly this error.
These are only a few of the possible reasons.

Why is the following Meteor/mongodb findOne returning undefined?

Code:
Template.chapterForm.rendered = ->
Meteor.startup ->
currentChapter = Chapters.findOne(
_id: "Wdyxj8pWg2HPzuDuf"
)
console.log currentChapter
console.log currentChapter.content
I get the following output:
undefined
Exception from Tracker afterFlush
function: Cannot read property 'content' of undefined TypeError:
Cannot read property 'content' of undefined
I'm puzzled. Is it a CoffeScript mistake or a Meteor/mongodb mistake?
(I tried moving the code to the top of the file. Still getting undefined)
EDIT:
Strange, if I do
Chapters.findOne({_id: "Wdyxj8pWg2HPzuDuf"});
In the console I do get the object:
Object

following two expression is totally same in coffeescript
Chapters.findOne(
_id: "Wdyxj8pWg2HPzuDuf"
)
Chapters.findOne({_id: "Wdyxj8pWg2HPzuDuf"})
I have no idea why you used 'Meteor.startup ->' in the template instance, it's not the good way. In the Meteor docs, "On a client, the function will run as soon as the DOM is ready." So the findOne action would be run right after the screen was created or rendered. I think it could ruin the Template instances life cycle order, so just use 'created' and 'rendered' cycle.
Additionally from #2, as of life cycle, you should have subscribed the collection before you fetched it (findOne), somewhere parents template or in the router code.
So the conclusion is it seems that there's no data in you browser mini-mongo.
That means you need to check in the browser console with 'Chapters.find().fetch()' command, and then if you can see the data on the console but have still the same error , you should check the life cycle to make the subscribe clearly.