Custom elements: documentation, examples, tests

[tony]

I have a docusaurus 2.0.0 beta-0 project (website, source) that works with a custom element

Unfortunately, moving from beta 0 to beta 1 with code that worked before.

Related: #5416

If would be great if docusaurus had a canonical way to add custom elements and tests to verify integrating Custom elements work and don't break

P.S. Thank you so much for this project! Beautiful, fast documentation. This is the best doc engine on the planet at the moment.

Current examples

minimal example

https://github.com/tony/docusaurus-custom-element-issue

• ✅ docusaurus 2.0.0-beta.0: 2.0.0-beta.0
  https://2-0-0-beta-0.dlpncn4sz6ns6.amplifyapp.com/
• 🚫 docusaurus 2.0.0-beta.1: 2.0.0-beta.1
  https://2-0-0-beta-1.dlpncn4sz6ns6.amplifyapp.com/
• 🚫 docusaurus 2.0.0-beta.6: 2.0.0-beta.6
  https://2-0-0-beta-6.dlpncn4sz6ns6.amplifyapp.com/
• 🚫 docusaurus canary: canary
  https://canary.dlpncn4sz6ns6.amplifyapp.com/

social-embed (monorepo)

beta 1: social-embed/social-embed#36 (diff)
canary: social-embed/social-embed#37 (diff)

• 🚫 Live code blocks with custom element

  beta 0 (works): https://social-embed.git-pull.com/
  beta 1 (breaks): https://docusaurus-2-0-0-beta-1.d1bxvdq53pbygo.amplifyapp.com/
  canary (breaks): https://docusaurus-2-0-0-next.d1bxvdq53pbygo.amplifyapp.com/

• ✔️ Normal custom elements in JSX

  beta 0 (works): https://social-embed.git-pull.com/docs/wc/providers/vimeo/
  beta 1 (works): https://docusaurus-2-0-0-beta-1.d1bxvdq53pbygo.amplifyapp.com/docs/wc/providers/vimeo/
  docusaurus 2.0.0@canary (works):
  canary (works): ttps://docusaurus-2-0-0-next.d1bxvdq53pbygo.amplifyapp.com/docs/wc/providers/vimeo/

[slorber]

Thanks

I don't know much about custom elements, please explain how you made the integration on your site.

Also worth testing on the canary release

[slorber]

It looks to me that the problem is not related in any way to custom elements, it's just that React fails to hydrate because the runtime JS bundle fails to load.

You can see that you can't even collapse the sidebar categories or use the search or toggle the dark mode

I don't know why this happens, maybe it's due to copy-text-to-clipboard being hoisted due to being used inside a monorepo 🤷‍♂️

[tony]

@slorber Is there a knob or a button I can use to disable copy-text-to-clipboard? Perhaps just nohoist in package.json?

[slorber]

No there's nothing to disable this.

But this probably hides another problem. You shouldn't need @babel/plugin-transform-modules-commonjs, and removing it raises a ton of new errors.

Your site clearly has some weird issues but can't tell what exactly. You should try to remove things one by one until you end up with a very basic Docusaurus site that works. It may be a dependency issue, you should really remove everything until you figure this out, including rollup, custom elements, extra babel plugins...

[tony]

@slorber It looks like I'd be better off bootstrapping a fresh docusaurus website from scratch since I'm so many releases behind.

[slorber]

yes probably 😅