react-lazy-load | React component that renders children elements | Frontend Framework library

You have to 'wait' for you component to be loaded, mounted and rendered. Are you using React Testing Library with Jest? If so, you can use waitFor, which would poll until the item is added to the DOM.

You're using incompatible versions of react-dom and react packages: the former is ^17.0.2, the latter is ^16.14.0. While the difference might seem subtle, it's substantial enough to break.

The solution is simple: either install a newer version of React (you should save it as a regular dependency, not as a dev one), or downgrade the rest of libraries to 16.x.

You are overkilling completely the issue. You don't need to create an instance in the gatsby-browser.js to "make the MDX understand". Your MDX is working perfectly since you are rendering an

and
• . You are only missing the styles.

  In the screenshot, you've shared, can be seen the following:

I found two solutions which helped -->

1. Was to hard style opacity:0 into the JSX and then upon styling injecting into DOM applying opacity: 1 !important onto any of the components displayed..

1. Whilst this was effective this morning I discovered at some point during my development I had incorrectly imported Head from next/head and used this in my _document.js rather than using the correct Head from next/documents..

Looks like there is not any good way to use react-lazyload and react-lazy-load without height prop. The solution was react-lazy-load-image-component for me. Although the name makes feel this is only for images, it is not.

You will have to add a property to each item of your books to handle the description visibility and change it when you click the button, this is a basic example

Two main observations:

1. There are two very large (3+MB) jpg images that I’d recommend seeing how you can optimize with a graphics program, even a simple one like Preview (MacOS), by reducing the dimensions or other means. These two are the biggest issues in your “Avoid enormous network payloads” report, but you might consider optimizing others as well.
2. Local serving of React (or other static) apps typically gives me significantly worse performance than my usual deployed environment behind a CDN. And so at this point I mainly run Lighthouse against the deployed environment, at least for the Performance report. In particular, an environment that supports HTTP/2, provides caching headers, and is generally built for performance (vs. a local server that’s usually not optimized for this purpose) might be worth considering to get you results that better reflect how things will look in production.

Lighthouse tries to do a good job of pointing out specifics, so once you’re running it against a production-like environment (if you choose to do that), I’d recommend closely reviewing the other sections, clicking through the “Learn more” links wherever things get confusing, and seeing where you can optimize further based on the advice Lighthouse gives.

Hope that helps!

I was importing People component as name while it's exported as default, thanks to @Brian Thompson .. it's fixed.