fix(gatsby-plugin-mdx): Raise error if MDXRenderer receives un… (#16555)

Author: johno

packages/gatsby-plugin-mdx/mdx-renderer.js

@@ -8,6 +8,10 @@ module.exports = function MDXRenderer({
   children,
   ...props
 }) {
+  if (!children) {
+    throw new Error(`MDXRenderer expected to receive an MDX String in children. Instead, it received: ${children}`)
+  }
+
   const mdxComponents = useMDXComponents(components);
   const mdxScope = useMDXScope(scope);
 

packages/gatsby-plugin-mdx/mdx-renderer.test.js

@@ -14,4 +14,14 @@ describe("mdx-renderer", () => {
 
     expect(result.toJSON()).toEqual({ type: "div", props: {}, children: null });
   });
+
+  test("provides a useful error message when no mdx is passed", () => {
+    const expectedErrorMessage = 'MDXRenderer expected to receive an MDX String in children. Instead, it received: undefined';
+
+    const renderUndefined = () => {
+      TestRenderer.create(<MDXRenderer scope={{ React: React }} />);
+    }
+
+    expect(renderUndefined).toThrowError(expectedErrorMessage);
+  });
 });