Cross-origin error in Gatsby

[Lari Giba]

I included fastcomments into my Gatsby site using this snippet:

<FastCommentsCommentWidget
  tenantId="MY_ID"
  urlId={uniqueId}
/>

When running the app in development mode locally, on localhost:8000,
Whenever I access any page that has this snippet on it, I get a cross-origin error:

Error in function Object.invokeGuardedCallbackDev in ./node_modules/react-dom/cjs/react-dom.development.js:4005
A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://reactjs.org/link/crossorigin-error for more information.

What I have tried:

• lazyloading the comment section (only rendering after a button press) -> no success
• only showing comments in production mode -> pages with comment section do not load at all

Details:

• Gatsby version: 3.7.2
• React version: 17.0.2
• Fastcomments-react version: 2.0.1
• OS: Windows
• Browser: Chrome

Any idea as to why this might happen?

Edit: the tenantId "demo" works just fine. Only when I put in my own id does it stop working.

[Lari Giba]

Found the error!
The issue was that my uniqueId was a number, not a string.
So using String(uniqueId) works just fine.

[Devon]

Glad you figured it out. We'll add some defensive programming in the react library to prevent this in the future.

[Devon]

Fix pushed to our core library for this. Not sure how nobody complained about this before. Thanks for complaining. ;)

[Lari Giba]

No problem, thank you for responding so quickly!