SNS embed script does not work (Twitter, Facebook, Instagram etc.) #7149
Comments
ryudenx
added
bug
|
Hi, Docusaurus uses MDX, which is JSX, not HTML. See https://docusaurus.io/docs/markdown-features/react That means, you have to use If you want to use plain HTML in Markdown, you either have to use As for the Twitter embed, my suspection is that it conflicts with SSR/hydration. Docusaurus is server-rendered, so you should NOT use You may try wrapping it in Since this looks like a misunderstanding of how MDX works or even how Docusaurus works in general, I'll close this as a question. @slorber Since I'm not very familiar with these use-cases, if you have more insight, feel free to respond later :D |
Josh-Cena
added
closed: question
|
Thank you for your reply. |
|
The iframe one should be the closest to success. If you fix the |
Note that the Twitter widget script may not work so well with single page applications, and maybe it does not try to convert quotes as Twitter widgets on navigation too. I suggest you directly use a React integration that figured all this for you and ensure that embeds are correctly integrated with React and SPA navigation: https://saurabhnemade.github.io/react-twitter-embed/ Note that loading Twitter SDKs and things like that is not the most performant, and only works on the client. There is a better way, that works with server-side-rendering too (ie the tweet shows correctly even if user disable JS). For example: https://github.com/transitive-bullshit/react-static-tweets |
Have you read the Contributing Guidelines on issues?
Prerequisites
npm run clearoryarn clearcommand.rm -rf node_modules yarn.lock package-lock.jsonand re-installing packages.Description
I want to display various SNS pages on the docusaurus page.
Generally, this requirement uses an embed script.
Each SNS provides it.
However, the copy&pasted embed script didn't work on the docusaurus page.
Reproducible demo
No response
Steps to reproduce
initialize
npx create-docusaurus@latest website classic
cd my-website
npm install
Paste the Twitter embed code into your new Markdown file (for example: test.md).
docs/test.md:
run
npm run start
open intro page "/docs/intro"
5, Then open test page "/docs/test" from the sidebar
Expected behavior
I want to see the Twitter formatted as below.
Actual behavior
First, the embed script is displayed as text.
However, the embed script will display when user reload the page.
In addition, the embed script of facebook and instagram fails to build.
facebook(meta) sample:
facebook error:
instagram sample :
SyntaxError: C:\vscode\docusaurus-test\website\docs\test.md: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set
throwIfNamespace: falseto bypass this warning.44 | return <MDXLayout {...layoutProps} {...props} components={components} mdxType="MDXLayout">
45 |
Your environment
Self-service
The text was updated successfully, but these errors were encountered: