mdx-embed return empty components

[johackim]

Describe the bug

I test mdx-embed with nodejs without browser, and It return an empty component.

To Reproduce

import React from 'react';
import { renderToString } from 'react-dom/server';
import { Tweet } from 'mdx-embed';

const result = renderToString(<Tweet tweetLink="PaulieScanlon/status/1232982448310497286" />);

console.log(result);

Expected behaviour

Have an iframe with a Tweet embedded

Actual behaviour

It return an empty component : <div data-testid="general-observer" class="mdx-embed"><div style="height:0;width:100%"></div></div>

Additional context

node version : v12.21.0

[PaulieScanlon]

Hey @johackim thanks for opening an issue. I haven't investigated @mdx-js/runtime could you share a little more info on how it might differ from @mdx-js/mdx

[johackim]

Hello @PaulieScanlon ! Thanks for your response :)

I use @mdx-js/runtime directly with nodejs. I build a cli tool to convert markdowns with mdx components to html.

[johackim]

Hello @PaulieScanlon, here a codesandbox to demonstrate the problem : https://codesandbox.io/s/mdx-embed-99hnm

PS: I remove @mdx-js/runtime, in fact, it's not a part of the issue.

[PaulieScanlon]

@johackim could it be related to this?

https://github.com/mdx-js/mdx/issues/558

The other thing I've been thinking is that all MDX Embed components rely on the Intersection Observer. E.g when a component enters the viewports the child embed script is loaded. Intersection observer is a browser API so it might be that the components are being passed correctly but they won't load because the intersection observer never enters the viewport. Does that make sense?

[johackim]

@PaulieScanlon,

Yes you're right, the isChildVisible is set to false by default and it is never set to true when used with nodejs (no browser).

[PaulieScanlon]

Thanks for the update. One thing we could do... and this will probably be part of the ongoing global config work is to allow some kind of config option to turn the intersection observer off. By default it should use intersection observers because this is what keeps MDX Embed "polite" but I guess there's no harm in turning this functionality off if required. I might be able to slip in a quick update that exposes an optional prop on a component that will do a similar thing.

Is there any single component you urgently need? Perhaps I could make a change to just the Tweet component and release an -alpha version for you to test with?

[johackim]

No, there is no urgent for a single component, a global config option to turn the observer off seems to be a good idea, I will wait for this update :)

Thanks @PaulieScanlon

[PaulMest]

I just ran into this problem one as well. I am using NextJS to update my blogs and migrate off of WordPress. Sometimes the embedded Tweets show up, others times they don't. It seems like the General Observer does not consistently fire. If I refresh the page, the Tweet always loads. However, if I navigate to a page a second time, the General Observer never loads. Though, I can trick it into loading again by scrolling down and then scrolling up.

Barring fixing the logic so that the General Observer always fires properly, I would definitely advocate for a "don't lazy load this embed option".

// simple example
<Tweet tweetLink="bernhardsson/status/1605357323643506695" lazyLoad={false} />

// or taking inspiration from the <Script> tag

// This seems to be the default now?
<Tweet tweetLink="bernhardsson/status/1605357323643506695" loadStrategy="lazyInViewport" /> 

// Some new options
<Tweet tweetLink="bernhardsson/status/1605357323643506695" loadStrategy="lazyOnload" />
<Tweet tweetLink="bernhardsson/status/1605357323643506695" loadStrategy="afterInteractive" />
<Tweet tweetLink="bernhardsson/status/1605357323643506695" loadStrategy="beforeInteractive" />