Can we have multiple Disqus instances in SPA(react)?

[disqus]

Can we have multiple Disqus instances in SPA(react)?

[tterb]

@mosamlife Unfortunately, it isn't possible to have two Disqus thread instances loaded on a page simultaneously, but you should be able to achieve similar functionality with the current component.
Depending on how your page is configured, you could update the disqus_config that is being passed to the component to match the post that is currently in the viewport.
Without an example repo I'm not really able to be too specific about the implementation, though I'd be happy to help if you are able to provide one.

[janakiramg]

Hi All,
I am having similar issue. Here are more details:

1. We have a application developed using Gatsby + React. I am trying to add comment functionality to this application using disqus
2. Installed disqus-react npm package
3. And added below code to two .js files with different uri, identifier and title.

import { DiscussionEmbed } from "disqus-react"
-----
-----
export default () => {
------
-----
return ( 
------
------
 <DiscussionEmbed
        shortname="xxxxxxx"
        config={{
          url: `xxxxxxx`,
          identifier: "xxxxxxxx",
          title: "xxxxxxxxx",
        }}
      />
   )
}

4. Disqus comment section is successfully loaded in both pages and I am able to add comments
5. But comments that I added in both pages are combined and displayed in both pages. I mean page1 comments are showing on page2 and page2 comments are showing on page1.
6. I am expecting each page should display comments that are added in that page only.

Is this possible ? or am I doing anything wrong.

Please let me know if you need more details

[tterb]

@janakiramg If you could provide a link to a repo that I could use to troubleshoot the issue I could be more helpful, but it sounds like you might not be providing each thread with a unique identifier.
You can find more info about this in the Knowledge Base.

[janakiramg]

Can I share .zip file with you ? I can email .zip to you.

[janakiramg]

Thanks for sharing information. We are using private github repo and I don't have permission to add you to github repository.
I have two simple .js files and I am using different identifier, Url for both these pages. I have gone through the link that you shared, do I have to include both <DiscussionEmbed .... > element and embed javascript variables to make it work ?
So here we have two identifiers right ? one identifier which we use in discuss config and another one is thread ID. I set the unique identifier and URL for disqus config but I am not sure how to setup page to generate unique thread ID.

[tterb]

You don't need to include the embed javascript variables, as those are handled within the DiscussionEmbed component. So as long as the identifiers that you are passing for each page are unique that shouldn't be a problem.
Since you are using Gatsby, in most cases you should be able to get a generated id from the GraphQL query to ensure that they are unique.

Could you provide the url and identifier that you are providing to the DiscussionEmbed component for each of your pages?

[janakiramg]

Sure.
Page 1

<DiscussionEmbed
        shortname="xxxxxxx"
        config={{
          url: `http://${process.env.DISQUS_SITENAME}/power-of-attorney`,
          identifier: "Power Of Attorney Comments Testing",
          title: "Power Of Attorney Testing",
        }}

Page 2

<DiscussionEmbed
        shortname="xxxxxxx"
        config={{
          url: `http://${process.env.DISQUS_SITENAME}/rental-agreement`,
          identifier: "Rental Agreement Comments Testing",
          title: "Rental Agreement Testing",
        }}
      />

[tterb]

Is ${process.env.DISQUS_SITENAME} pointing to the production URL or localhost?

[janakiramg]

localhost for now to test from local

DISQUS_SITENAME=localhost:8000

[tterb]

There have been a few different issues that people have run into trying to use localhost to load the components locally as noted here, so you're going to want to have that point to the production URL.
Additionally, passing production and development URLs to the components with the same identifier can cause conflicts when looking up the thread.

[janakiramg]

Ok. I will deploy these changes into production and test there. I will update status here.

[tterb]

You shouldn't actually have to deploy anything to production, you can just have it point to the production URL when running locally.

[janakiramg]

Right, Sure I will test that by changing URL in local

[janakiramg]

I changed DISQUS_SITENAME URL to production URL and tested. Same issue. Same comments are displayed on both pages.

[tterb]

That is likely because of the issue we've discussed.
Can you try providing the pages with a new identifier or loading the component on a new page with a new url and identifier?

[janakiramg]

Awesome. Working now. thank you so much. Basically localhost was the issue.

[tastypurgen]

I've noticed all my posts try to fetch one specific thread. Could you please explain how are these numbers obtained?

[asfernandes]

I'm trying to use DiscussionEmbed in a next.js app and when the page is soft reloaded I have the error

Uncaught TypeError: Cannot read property 'appendChild' of null
    at k (asfernandes-blog.disqus.com/recommendations.js:32)
    at Object.l [as isSerif] (asfernandes-blog.disqus.com/recommendations.js:32)
    at h.i.toJSON (asfernandes-blog.disqus.com/recommendations.js:32)
    at Object.c.initRecommendations (asfernandes-blog.disqus.com/recommendations.js:33)
    at Object.c.reset (asfernandes-blog.disqus.com/recommendations.js:33)
    at Object.c.reset (asfernandes-blog.disqus.com/embed.js:49)
    at DiscussionEmbed.loadInstance (webpack-internal:///./node_modules/disqus-react/lib/DiscussionEmbed.js:77)
    at DiscussionEmbed.componentDidMount (webpack-internal:///./node_modules/disqus-react/lib/DiscussionEmbed.js:57)
    at commitLifeCycles (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20658)
    at commitLayoutEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:23421)
    at HTMLUnknownElement.callCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:3994)
    at invokeGuardedCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4056)
    at commitRootImpl (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:23146)
    at unstable_runWithPriority (webpack-internal:///./node_modules/scheduler/cjs/scheduler.development.js:468)
    at runWithPriority$1 (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:11276)
    at commitRoot (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22985)
    at performSyncWorkOnRoot (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22324)
    at eval (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:11327)
    at unstable_runWithPriority (webpack-internal:///./node_modules/scheduler/cjs/scheduler.development.js:468)
    at runWithPriority$1 (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:11322)
    at flushSyncCallbackQueue (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:11309)
    at scheduleUpdateOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21888)
    at updateContainer (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:25477)
    at legacyRenderSubtreeIntoContainer (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:26032)
    at Object.render (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:26098)
    at renderReactElement (webpack-internal:///./node_modules/next/dist/client/index.js:598)
    at doRender (webpack-internal:///./node_modules/next/dist/client/index.js:771)
    at _callee2$ (webpack-internal:///./node_modules/next/dist/client/index.js:485)
    at tryCatch (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:63)
    at Generator.invoke [as _invoke] (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:293)
    at Generator.eval [as next] (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:118)
    at asyncGeneratorStep (webpack-internal:///./node_modules/@babel/runtime/helpers/asyncToGenerator.js:3)
    at _next (webpack-internal:///./node_modules/@babel/runtime/helpers/asyncToGenerator.js:25)
    at eval (webpack-internal:///./node_modules/@babel/runtime/helpers/asyncToGenerator.js:32)
    at new Promise (<anonymous>)
    at eval (webpack-internal:///./node_modules/@babel/runtime/helpers/asyncToGenerator.js:21)
    at render (webpack-internal:///./node_modules/next/dist/client/index.js:459)
    at Router.subscription [as sub] (webpack-internal:///./node_modules/next/dist/client/index.js:406)
    at Router.notify (webpack-internal:///./node_modules/next/dist/next-server/lib/router/router.js:1538)
    at Router.set (webpack-internal:///./node_modules/next/dist/next-server/lib/router/router.js:1214)
    at Router._callee$ (webpack-internal:///./node_modules/next/dist/next-server/lib/router/router.js:913)
    at tryCatch (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:63)
    at Generator.invoke [as _invoke] (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:293)
    at Generator.eval [as next] (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:118)
    at asyncGeneratorStep (webpack-internal:///./node_modules/@babel/runtime/helpers/asyncToGenerator.js:3)
    at _next (webpack-internal:///./node_modules/@babel/runtime/helpers/asyncToGenerator.js:25)

If I hit F5 the page works.

The component is used in my id page.

[tterb]

This issue has gotten a little hard to follow with all of the various issues being brought up, so I think it's probably best to close this one out and allow people to create individual issues for any outstanding problems.

@asfernandes Can you create a new issue with the provided information and a link to public repo that can be used to reproduce your issue?