diff --git a/packages/gatsby-plugin-mdx/loaders/__snapshots__/mdx-loader.test.js.snap b/packages/gatsby-plugin-mdx/loaders/__snapshots__/mdx-loader.test.js.snap
index 772d412259508..a3640f04edc8d 100644
--- a/packages/gatsby-plugin-mdx/loaders/__snapshots__/mdx-loader.test.js.snap
+++ b/packages/gatsby-plugin-mdx/loaders/__snapshots__/mdx-loader.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`mdx-loader snapshot [lessBabel=true] with body 1`] = `
+exports[`mdx-loader snapshot with body 1`] = `
 import * as React from "react";
 /* @jsx mdx */
 import { mdx } from "@mdx-js/react";
@@ -29,7 +29,7 @@ MDXContent.isMDXComponent = true;
 
 `;
 
-exports[`mdx-loader snapshot [lessBabel=true] with frontmatter 1`] = `
+exports[`mdx-loader snapshot with frontmatter 1`] = `
 import * as React from "react";
 /* @jsx mdx */
 import { mdx } from "@mdx-js/react";
@@ -62,7 +62,77 @@ MDXContent.isMDXComponent = true;
 
 `;
 
-exports[`mdx-loader snapshot [lessBabel=true] with frontmatter-layout 1`] = `
+exports[`mdx-loader snapshot with frontmatter-isDevelopStage 1`] = `
+import MDXContent from "/frontmatter-isDevelopStage?type=component";
+export default MDXContent;
+export * from "/frontmatter-isDevelopStage?type=component";
+
+export const _frontmatter = { one: "two", three: 4, array: [1, 2, 3] };
+
+`;
+
+exports[`mdx-loader snapshot with frontmatter-isDevelopStage 2`] = `
+import * as React from "react";
+/* @jsx mdx */
+import { mdx } from "@mdx-js/react";
+/* @jsx mdx */
+
+const layoutProps = {};
+const MDXLayout = "wrapper";
+export default function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout
+      {...layoutProps}
+      {...props}
+      components={components}
+      mdxType="MDXLayout"
+    >
+      <h1>{\`Some title\`}</h1>
+      <p>{\`a bit of a paragraph\`}</p>
+      <p>{\`some content\`}</p>
+    </MDXLayout>
+  );
+}
+MDXContent.isMDXComponent = true;
+
+`;
+
+exports[`mdx-loader snapshot with frontmatter-isDevelopStage-lessBabel 1`] = `
+import MDXContent from "/frontmatter-isDevelopStage-lessBabel?type=component";
+export default MDXContent;
+export * from "/frontmatter-isDevelopStage-lessBabel?type=component";
+
+export const _frontmatter = { one: "two", three: 4, array: [1, 2, 3] };
+
+`;
+
+exports[`mdx-loader snapshot with frontmatter-isDevelopStage-lessBabel 2`] = `
+import * as React from "react";
+/* @jsx mdx */
+import { mdx } from "@mdx-js/react";
+/* @jsx mdx */
+
+const layoutProps = {};
+const MDXLayout = "wrapper";
+export default function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout
+      {...layoutProps}
+      {...props}
+      components={components}
+      mdxType="MDXLayout"
+    >
+      <h1>{\`Some title\`}</h1>
+      <p>{\`a bit of a paragraph\`}</p>
+      <p>{\`some content\`}</p>
+    </MDXLayout>
+  );
+}
+MDXContent.isMDXComponent = true;
+
+`;
+
+exports[`mdx-loader snapshot with frontmatter-layout 1`] = `
 import * as React from "react";
 /* @jsx mdx */
 import { mdx } from "@mdx-js/react";
@@ -97,22 +167,92 @@ MDXContent.isMDXComponent = true;
 
 `;
 
-exports[`mdx-loader snapshot [lessBabel=true] with frontmatter-layout-namedExports 1`] = `
+exports[`mdx-loader snapshot with frontmatter-layout-isDevelopStage 1`] = `
+import MDXContent from "/frontmatter-layout-isDevelopStage?type=component";
+export default MDXContent;
+export * from "/frontmatter-layout-isDevelopStage?type=component";
+
+export const _frontmatter = { one: "two", three: 4, array: [1, 2, 3] };
+
+`;
+
+exports[`mdx-loader snapshot with frontmatter-layout-isDevelopStage 2`] = `
+import * as React from "react";
+/* @jsx mdx */
+import { mdx } from "@mdx-js/react";
+/* @jsx mdx */
+
+const layoutProps = {};
+
+const MDXLayout = ({ children, ...props }) => <div>{children}</div>;
+
+export default function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout
+      {...layoutProps}
+      {...props}
+      components={components}
+      mdxType="MDXLayout"
+    >
+      <h1>{\`Some title\`}</h1>
+      <p>{\`a bit of a paragraph\`}</p>
+      <p>{\`some content\`}</p>
+    </MDXLayout>
+  );
+}
+MDXContent.isMDXComponent = true;
+
+`;
+
+exports[`mdx-loader snapshot with frontmatter-layout-isDevelopStage-lessBabel 1`] = `
+import MDXContent from "/frontmatter-layout-isDevelopStage-lessBabel?type=component";
+export default MDXContent;
+export * from "/frontmatter-layout-isDevelopStage-lessBabel?type=component";
+
+export const _frontmatter = { one: "two", three: 4, array: [1, 2, 3] };
+
+`;
+
+exports[`mdx-loader snapshot with frontmatter-layout-isDevelopStage-lessBabel 2`] = `
+import * as React from "react";
+/* @jsx mdx */
+import { mdx } from "@mdx-js/react";
+/* @jsx mdx */
+
+const layoutProps = {};
+
+const MDXLayout = ({ children, ...props }) => <div>{children}</div>;
+
+export default function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout
+      {...layoutProps}
+      {...props}
+      components={components}
+      mdxType="MDXLayout"
+    >
+      <h1>{\`Some title\`}</h1>
+      <p>{\`a bit of a paragraph\`}</p>
+      <p>{\`some content\`}</p>
+    </MDXLayout>
+  );
+}
+MDXContent.isMDXComponent = true;
+
+`;
+
+exports[`mdx-loader snapshot with frontmatter-layout-lessBabel 1`] = `
 import * as React from "react";
 /* @jsx mdx */
 import { mdx } from "@mdx-js/react";
 /* @jsx mdx */
 
-export const meta = {
-  author: "chris",
-};
 export const _frontmatter = {
   one: "two",
   three: 4,
   array: [1, 2, 3],
 };
 const layoutProps = {
-  meta,
   _frontmatter,
 };
 
@@ -136,7 +276,7 @@ MDXContent.isMDXComponent = true;
 
 `;
 
-exports[`mdx-loader snapshot [lessBabel=true] with frontmatter-namedExports 1`] = `
+exports[`mdx-loader snapshot with frontmatter-layout-namedExports 1`] = `
 import * as React from "react";
 /* @jsx mdx */
 import { mdx } from "@mdx-js/react";
@@ -154,7 +294,9 @@ const layoutProps = {
   meta,
   _frontmatter,
 };
-const MDXLayout = "wrapper";
+
+const MDXLayout = ({ children, ...props }) => <div>{children}</div>;
+
 export default function MDXContent({ components, ...props }) {
   return (
     <MDXLayout
@@ -173,15 +315,26 @@ MDXContent.isMDXComponent = true;
 
 `;
 
-exports[`mdx-loader snapshot [lessBabel=true] with layout 1`] = `
+exports[`mdx-loader snapshot with frontmatter-layout-namedExports-isDevelopStage 1`] = `
+import MDXContent from "/frontmatter-layout-namedExports-isDevelopStage?type=component";
+export default MDXContent;
+export * from "/frontmatter-layout-namedExports-isDevelopStage?type=component";
+
+export const _frontmatter = { one: "two", three: 4, array: [1, 2, 3] };
+
+`;
+
+exports[`mdx-loader snapshot with frontmatter-layout-namedExports-isDevelopStage 2`] = `
 import * as React from "react";
 /* @jsx mdx */
 import { mdx } from "@mdx-js/react";
 /* @jsx mdx */
 
-export const _frontmatter = {};
+export const meta = {
+  author: "chris",
+};
 const layoutProps = {
-  _frontmatter,
+  meta,
 };
 
 const MDXLayout = ({ children, ...props }) => <div>{children}</div>;
@@ -204,7 +357,16 @@ MDXContent.isMDXComponent = true;
 
 `;
 
-exports[`mdx-loader snapshot [lessBabel=true] with layout-namedExports 1`] = `
+exports[`mdx-loader snapshot with frontmatter-layout-namedExports-isDevelopStage-lessBabel 1`] = `
+import MDXContent from "/frontmatter-layout-namedExports-isDevelopStage-lessBabel?type=component";
+export default MDXContent;
+export * from "/frontmatter-layout-namedExports-isDevelopStage-lessBabel?type=component";
+
+export const _frontmatter = { one: "two", three: 4, array: [1, 2, 3] };
+
+`;
+
+exports[`mdx-loader snapshot with frontmatter-layout-namedExports-isDevelopStage-lessBabel 2`] = `
 import * as React from "react";
 /* @jsx mdx */
 import { mdx } from "@mdx-js/react";
@@ -213,10 +375,8 @@ import { mdx } from "@mdx-js/react";
 export const meta = {
   author: "chris",
 };
-export const _frontmatter = {};
 const layoutProps = {
   meta,
-  _frontmatter,
 };
 
 const MDXLayout = ({ children, ...props }) => <div>{children}</div>;
@@ -239,7 +399,7 @@ MDXContent.isMDXComponent = true;
 
 `;
 
-exports[`mdx-loader snapshot [lessBabel=true] with namedExports 1`] = `
+exports[`mdx-loader snapshot with frontmatter-layout-namedExports-lessBabel 1`] = `
 import * as React from "react";
 /* @jsx mdx */
 import { mdx } from "@mdx-js/react";
@@ -248,12 +408,18 @@ import { mdx } from "@mdx-js/react";
 export const meta = {
   author: "chris",
 };
-export const _frontmatter = {};
+export const _frontmatter = {
+  one: "two",
+  three: 4,
+  array: [1, 2, 3],
+};
 const layoutProps = {
   meta,
   _frontmatter,
 };
-const MDXLayout = "wrapper";
+
+const MDXLayout = ({ children, ...props }) => <div>{children}</div>;
+
 export default function MDXContent({ components, ...props }) {
   return (
     <MDXLayout
@@ -272,13 +438,17 @@ MDXContent.isMDXComponent = true;
 
 `;
 
-exports[`mdx-loader snapshot with body 1`] = `
+exports[`mdx-loader snapshot with frontmatter-lessBabel 1`] = `
 import * as React from "react";
 /* @jsx mdx */
 import { mdx } from "@mdx-js/react";
 /* @jsx mdx */
 
-export const _frontmatter = {};
+export const _frontmatter = {
+  one: "two",
+  three: 4,
+  array: [1, 2, 3],
+};
 const layoutProps = {
   _frontmatter,
 };
@@ -301,18 +471,22 @@ MDXContent.isMDXComponent = true;
 
 `;
 
-exports[`mdx-loader snapshot with frontmatter 1`] = `
+exports[`mdx-loader snapshot with frontmatter-namedExports 1`] = `
 import * as React from "react";
 /* @jsx mdx */
 import { mdx } from "@mdx-js/react";
 /* @jsx mdx */
 
+export const meta = {
+  author: "chris",
+};
 export const _frontmatter = {
   one: "two",
   three: 4,
   array: [1, 2, 3],
 };
 const layoutProps = {
+  meta,
   _frontmatter,
 };
 const MDXLayout = "wrapper";
@@ -334,23 +508,28 @@ MDXContent.isMDXComponent = true;
 
 `;
 
-exports[`mdx-loader snapshot with frontmatter-layout 1`] = `
+exports[`mdx-loader snapshot with frontmatter-namedExports-isDevelopStage 1`] = `
+import MDXContent from "/frontmatter-namedExports-isDevelopStage?type=component";
+export default MDXContent;
+export * from "/frontmatter-namedExports-isDevelopStage?type=component";
+
+export const _frontmatter = { one: "two", three: 4, array: [1, 2, 3] };
+
+`;
+
+exports[`mdx-loader snapshot with frontmatter-namedExports-isDevelopStage 2`] = `
 import * as React from "react";
 /* @jsx mdx */
 import { mdx } from "@mdx-js/react";
 /* @jsx mdx */
 
-export const _frontmatter = {
-  one: "two",
-  three: 4,
-  array: [1, 2, 3],
+export const meta = {
+  author: "chris",
 };
 const layoutProps = {
-  _frontmatter,
+  meta,
 };
-
-const MDXLayout = ({ children, ...props }) => <div>{children}</div>;
-
+const MDXLayout = "wrapper";
 export default function MDXContent({ components, ...props }) {
   return (
     <MDXLayout
@@ -369,7 +548,16 @@ MDXContent.isMDXComponent = true;
 
 `;
 
-exports[`mdx-loader snapshot with frontmatter-layout-namedExports 1`] = `
+exports[`mdx-loader snapshot with frontmatter-namedExports-isDevelopStage-lessBabel 1`] = `
+import MDXContent from "/frontmatter-namedExports-isDevelopStage-lessBabel?type=component";
+export default MDXContent;
+export * from "/frontmatter-namedExports-isDevelopStage-lessBabel?type=component";
+
+export const _frontmatter = { one: "two", three: 4, array: [1, 2, 3] };
+
+`;
+
+exports[`mdx-loader snapshot with frontmatter-namedExports-isDevelopStage-lessBabel 2`] = `
 import * as React from "react";
 /* @jsx mdx */
 import { mdx } from "@mdx-js/react";
@@ -378,18 +566,10 @@ import { mdx } from "@mdx-js/react";
 export const meta = {
   author: "chris",
 };
-export const _frontmatter = {
-  one: "two",
-  three: 4,
-  array: [1, 2, 3],
-};
 const layoutProps = {
   meta,
-  _frontmatter,
 };
-
-const MDXLayout = ({ children, ...props }) => <div>{children}</div>;
-
+const MDXLayout = "wrapper";
 export default function MDXContent({ components, ...props }) {
   return (
     <MDXLayout
@@ -408,7 +588,7 @@ MDXContent.isMDXComponent = true;
 
 `;
 
-exports[`mdx-loader snapshot with frontmatter-namedExports 1`] = `
+exports[`mdx-loader snapshot with frontmatter-namedExports-lessBabel 1`] = `
 import * as React from "react";
 /* @jsx mdx */
 import { mdx } from "@mdx-js/react";
@@ -445,19 +625,58 @@ MDXContent.isMDXComponent = true;
 
 `;
 
-exports[`mdx-loader snapshot with layout 1`] = `
+exports[`mdx-loader snapshot with isDevelopStage 1`] = `
+import MDXContent from "/isDevelopStage?type=component";
+export default MDXContent;
+export * from "/isDevelopStage?type=component";
+
+export const _frontmatter = {};
+
+`;
+
+exports[`mdx-loader snapshot with isDevelopStage 2`] = `
 import * as React from "react";
 /* @jsx mdx */
 import { mdx } from "@mdx-js/react";
 /* @jsx mdx */
 
+const layoutProps = {};
+const MDXLayout = "wrapper";
+export default function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout
+      {...layoutProps}
+      {...props}
+      components={components}
+      mdxType="MDXLayout"
+    >
+      <h1>{\`Some title\`}</h1>
+      <p>{\`a bit of a paragraph\`}</p>
+      <p>{\`some content\`}</p>
+    </MDXLayout>
+  );
+}
+MDXContent.isMDXComponent = true;
+
+`;
+
+exports[`mdx-loader snapshot with isDevelopStage-lessBabel 1`] = `
+import MDXContent from "/isDevelopStage-lessBabel?type=component";
+export default MDXContent;
+export * from "/isDevelopStage-lessBabel?type=component";
+
 export const _frontmatter = {};
-const layoutProps = {
-  _frontmatter,
-};
 
-const MDXLayout = ({ children, ...props }) => <div>{children}</div>;
+`;
+
+exports[`mdx-loader snapshot with isDevelopStage-lessBabel 2`] = `
+import * as React from "react";
+/* @jsx mdx */
+import { mdx } from "@mdx-js/react";
+/* @jsx mdx */
 
+const layoutProps = {};
+const MDXLayout = "wrapper";
 export default function MDXContent({ components, ...props }) {
   return (
     <MDXLayout
@@ -476,18 +695,14 @@ MDXContent.isMDXComponent = true;
 
 `;
 
-exports[`mdx-loader snapshot with layout-namedExports 1`] = `
+exports[`mdx-loader snapshot with layout 1`] = `
 import * as React from "react";
 /* @jsx mdx */
 import { mdx } from "@mdx-js/react";
 /* @jsx mdx */
 
-export const meta = {
-  author: "chris",
-};
 export const _frontmatter = {};
 const layoutProps = {
-  meta,
   _frontmatter,
 };
 
@@ -511,7 +726,408 @@ MDXContent.isMDXComponent = true;
 
 `;
 
-exports[`mdx-loader snapshot with namedExports 1`] = `
+exports[`mdx-loader snapshot with layout-isDevelopStage 1`] = `
+import MDXContent from "/layout-isDevelopStage?type=component";
+export default MDXContent;
+export * from "/layout-isDevelopStage?type=component";
+
+export const _frontmatter = {};
+
+`;
+
+exports[`mdx-loader snapshot with layout-isDevelopStage 2`] = `
+import * as React from "react";
+/* @jsx mdx */
+import { mdx } from "@mdx-js/react";
+/* @jsx mdx */
+
+const layoutProps = {};
+
+const MDXLayout = ({ children, ...props }) => <div>{children}</div>;
+
+export default function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout
+      {...layoutProps}
+      {...props}
+      components={components}
+      mdxType="MDXLayout"
+    >
+      <h1>{\`Some title\`}</h1>
+      <p>{\`a bit of a paragraph\`}</p>
+      <p>{\`some content\`}</p>
+    </MDXLayout>
+  );
+}
+MDXContent.isMDXComponent = true;
+
+`;
+
+exports[`mdx-loader snapshot with layout-isDevelopStage-lessBabel 1`] = `
+import MDXContent from "/layout-isDevelopStage-lessBabel?type=component";
+export default MDXContent;
+export * from "/layout-isDevelopStage-lessBabel?type=component";
+
+export const _frontmatter = {};
+
+`;
+
+exports[`mdx-loader snapshot with layout-isDevelopStage-lessBabel 2`] = `
+import * as React from "react";
+/* @jsx mdx */
+import { mdx } from "@mdx-js/react";
+/* @jsx mdx */
+
+const layoutProps = {};
+
+const MDXLayout = ({ children, ...props }) => <div>{children}</div>;
+
+export default function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout
+      {...layoutProps}
+      {...props}
+      components={components}
+      mdxType="MDXLayout"
+    >
+      <h1>{\`Some title\`}</h1>
+      <p>{\`a bit of a paragraph\`}</p>
+      <p>{\`some content\`}</p>
+    </MDXLayout>
+  );
+}
+MDXContent.isMDXComponent = true;
+
+`;
+
+exports[`mdx-loader snapshot with layout-lessBabel 1`] = `
+import * as React from "react";
+/* @jsx mdx */
+import { mdx } from "@mdx-js/react";
+/* @jsx mdx */
+
+export const _frontmatter = {};
+const layoutProps = {
+  _frontmatter,
+};
+
+const MDXLayout = ({ children, ...props }) => <div>{children}</div>;
+
+export default function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout
+      {...layoutProps}
+      {...props}
+      components={components}
+      mdxType="MDXLayout"
+    >
+      <h1>{\`Some title\`}</h1>
+      <p>{\`a bit of a paragraph\`}</p>
+      <p>{\`some content\`}</p>
+    </MDXLayout>
+  );
+}
+MDXContent.isMDXComponent = true;
+
+`;
+
+exports[`mdx-loader snapshot with layout-namedExports 1`] = `
+import * as React from "react";
+/* @jsx mdx */
+import { mdx } from "@mdx-js/react";
+/* @jsx mdx */
+
+export const meta = {
+  author: "chris",
+};
+export const _frontmatter = {};
+const layoutProps = {
+  meta,
+  _frontmatter,
+};
+
+const MDXLayout = ({ children, ...props }) => <div>{children}</div>;
+
+export default function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout
+      {...layoutProps}
+      {...props}
+      components={components}
+      mdxType="MDXLayout"
+    >
+      <h1>{\`Some title\`}</h1>
+      <p>{\`a bit of a paragraph\`}</p>
+      <p>{\`some content\`}</p>
+    </MDXLayout>
+  );
+}
+MDXContent.isMDXComponent = true;
+
+`;
+
+exports[`mdx-loader snapshot with layout-namedExports-isDevelopStage 1`] = `
+import MDXContent from "/layout-namedExports-isDevelopStage?type=component";
+export default MDXContent;
+export * from "/layout-namedExports-isDevelopStage?type=component";
+
+export const _frontmatter = {};
+
+`;
+
+exports[`mdx-loader snapshot with layout-namedExports-isDevelopStage 2`] = `
+import * as React from "react";
+/* @jsx mdx */
+import { mdx } from "@mdx-js/react";
+/* @jsx mdx */
+
+export const meta = {
+  author: "chris",
+};
+const layoutProps = {
+  meta,
+};
+
+const MDXLayout = ({ children, ...props }) => <div>{children}</div>;
+
+export default function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout
+      {...layoutProps}
+      {...props}
+      components={components}
+      mdxType="MDXLayout"
+    >
+      <h1>{\`Some title\`}</h1>
+      <p>{\`a bit of a paragraph\`}</p>
+      <p>{\`some content\`}</p>
+    </MDXLayout>
+  );
+}
+MDXContent.isMDXComponent = true;
+
+`;
+
+exports[`mdx-loader snapshot with layout-namedExports-isDevelopStage-lessBabel 1`] = `
+import MDXContent from "/layout-namedExports-isDevelopStage-lessBabel?type=component";
+export default MDXContent;
+export * from "/layout-namedExports-isDevelopStage-lessBabel?type=component";
+
+export const _frontmatter = {};
+
+`;
+
+exports[`mdx-loader snapshot with layout-namedExports-isDevelopStage-lessBabel 2`] = `
+import * as React from "react";
+/* @jsx mdx */
+import { mdx } from "@mdx-js/react";
+/* @jsx mdx */
+
+export const meta = {
+  author: "chris",
+};
+const layoutProps = {
+  meta,
+};
+
+const MDXLayout = ({ children, ...props }) => <div>{children}</div>;
+
+export default function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout
+      {...layoutProps}
+      {...props}
+      components={components}
+      mdxType="MDXLayout"
+    >
+      <h1>{\`Some title\`}</h1>
+      <p>{\`a bit of a paragraph\`}</p>
+      <p>{\`some content\`}</p>
+    </MDXLayout>
+  );
+}
+MDXContent.isMDXComponent = true;
+
+`;
+
+exports[`mdx-loader snapshot with layout-namedExports-lessBabel 1`] = `
+import * as React from "react";
+/* @jsx mdx */
+import { mdx } from "@mdx-js/react";
+/* @jsx mdx */
+
+export const meta = {
+  author: "chris",
+};
+export const _frontmatter = {};
+const layoutProps = {
+  meta,
+  _frontmatter,
+};
+
+const MDXLayout = ({ children, ...props }) => <div>{children}</div>;
+
+export default function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout
+      {...layoutProps}
+      {...props}
+      components={components}
+      mdxType="MDXLayout"
+    >
+      <h1>{\`Some title\`}</h1>
+      <p>{\`a bit of a paragraph\`}</p>
+      <p>{\`some content\`}</p>
+    </MDXLayout>
+  );
+}
+MDXContent.isMDXComponent = true;
+
+`;
+
+exports[`mdx-loader snapshot with lessBabel 1`] = `
+import * as React from "react";
+/* @jsx mdx */
+import { mdx } from "@mdx-js/react";
+/* @jsx mdx */
+
+export const _frontmatter = {};
+const layoutProps = {
+  _frontmatter,
+};
+const MDXLayout = "wrapper";
+export default function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout
+      {...layoutProps}
+      {...props}
+      components={components}
+      mdxType="MDXLayout"
+    >
+      <h1>{\`Some title\`}</h1>
+      <p>{\`a bit of a paragraph\`}</p>
+      <p>{\`some content\`}</p>
+    </MDXLayout>
+  );
+}
+MDXContent.isMDXComponent = true;
+
+`;
+
+exports[`mdx-loader snapshot with namedExports 1`] = `
+import * as React from "react";
+/* @jsx mdx */
+import { mdx } from "@mdx-js/react";
+/* @jsx mdx */
+
+export const meta = {
+  author: "chris",
+};
+export const _frontmatter = {};
+const layoutProps = {
+  meta,
+  _frontmatter,
+};
+const MDXLayout = "wrapper";
+export default function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout
+      {...layoutProps}
+      {...props}
+      components={components}
+      mdxType="MDXLayout"
+    >
+      <h1>{\`Some title\`}</h1>
+      <p>{\`a bit of a paragraph\`}</p>
+      <p>{\`some content\`}</p>
+    </MDXLayout>
+  );
+}
+MDXContent.isMDXComponent = true;
+
+`;
+
+exports[`mdx-loader snapshot with namedExports-isDevelopStage 1`] = `
+import MDXContent from "/namedExports-isDevelopStage?type=component";
+export default MDXContent;
+export * from "/namedExports-isDevelopStage?type=component";
+
+export const _frontmatter = {};
+
+`;
+
+exports[`mdx-loader snapshot with namedExports-isDevelopStage 2`] = `
+import * as React from "react";
+/* @jsx mdx */
+import { mdx } from "@mdx-js/react";
+/* @jsx mdx */
+
+export const meta = {
+  author: "chris",
+};
+const layoutProps = {
+  meta,
+};
+const MDXLayout = "wrapper";
+export default function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout
+      {...layoutProps}
+      {...props}
+      components={components}
+      mdxType="MDXLayout"
+    >
+      <h1>{\`Some title\`}</h1>
+      <p>{\`a bit of a paragraph\`}</p>
+      <p>{\`some content\`}</p>
+    </MDXLayout>
+  );
+}
+MDXContent.isMDXComponent = true;
+
+`;
+
+exports[`mdx-loader snapshot with namedExports-isDevelopStage-lessBabel 1`] = `
+import MDXContent from "/namedExports-isDevelopStage-lessBabel?type=component";
+export default MDXContent;
+export * from "/namedExports-isDevelopStage-lessBabel?type=component";
+
+export const _frontmatter = {};
+
+`;
+
+exports[`mdx-loader snapshot with namedExports-isDevelopStage-lessBabel 2`] = `
+import * as React from "react";
+/* @jsx mdx */
+import { mdx } from "@mdx-js/react";
+/* @jsx mdx */
+
+export const meta = {
+  author: "chris",
+};
+const layoutProps = {
+  meta,
+};
+const MDXLayout = "wrapper";
+export default function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout
+      {...layoutProps}
+      {...props}
+      components={components}
+      mdxType="MDXLayout"
+    >
+      <h1>{\`Some title\`}</h1>
+      <p>{\`a bit of a paragraph\`}</p>
+      <p>{\`some content\`}</p>
+    </MDXLayout>
+  );
+}
+MDXContent.isMDXComponent = true;
+
+`;
+
+exports[`mdx-loader snapshot with namedExports-lessBabel 1`] = `
 import * as React from "react";
 /* @jsx mdx */
 import { mdx } from "@mdx-js/react";
diff --git a/packages/gatsby-plugin-mdx/loaders/mdx-loader.js b/packages/gatsby-plugin-mdx/loaders/mdx-loader.js
index d1aa22568fdbe..fdd574914b074 100644
--- a/packages/gatsby-plugin-mdx/loaders/mdx-loader.js
+++ b/packages/gatsby-plugin-mdx/loaders/mdx-loader.js
@@ -95,6 +95,8 @@ const hasDefaultExport = (str, options) => {
 }
 
 module.exports = async function mdxLoader(content) {
+  const callback = this.async()
+
   const {
     isolateMDXComponent,
     getNode: rawGetNode,
@@ -111,18 +113,21 @@ module.exports = async function mdxLoader(content) {
   if (isolateMDXComponent && !resourceQuery.includes(`type=component`)) {
     const { data } = grayMatter(content)
 
-    return `import MDXContent from "/${path.relative(
+    const requestPath = `/${path.relative(
       this.rootContext,
       this.resourcePath
-    )}?type=component";
-      
+    )}?type=component`
+
+    return callback(
+      null,
+      `import MDXContent from "${requestPath}";
 export default MDXContent;
+export * from "${requestPath}"
 
 export const _frontmatter = ${JSON.stringify(data)};`
+    )
   }
 
-  const callback = this.async()
-
   const options = withDefaultOptions(pluginOptions)
 
   let fileNode = getNodes().find(
diff --git a/packages/gatsby-plugin-mdx/loaders/mdx-loader.test.js b/packages/gatsby-plugin-mdx/loaders/mdx-loader.test.js
index 50c5ad44f438f..f6f72ee98ec48 100644
--- a/packages/gatsby-plugin-mdx/loaders/mdx-loader.test.js
+++ b/packages/gatsby-plugin-mdx/loaders/mdx-loader.test.js
@@ -34,16 +34,18 @@ some content`,
       input.namedExports ? code.namedExports : ``,
       code.body,
     ].join(`\n\n`),
+    isDevelopStage: input.isDevelopStage,
+    lessBabel: input.lessBabel,
   }
 }
 
 // generate a table of all possible combinations of genMDXfile input
-const fixtures = new BaseN([true, false], 3)
+const fixtures = new BaseN([true, false], 5)
   .toArray()
-  .map(([frontmatter, layout, namedExports]) =>
-    genMDXFile({ frontmatter, layout, namedExports })
+  .map(([frontmatter, layout, namedExports, isDevelopStage, lessBabel]) =>
+    genMDXFile({ frontmatter, layout, namedExports, isDevelopStage, lessBabel })
   )
-  .map(({ name, content }) => [
+  .map(({ name, content, isDevelopStage, lessBabel }) => [
     name,
     {
       internal: { type: `File` },
@@ -51,10 +53,11 @@ const fixtures = new BaseN([true, false], 3)
       absolutePath: `/fake/${name}`,
     },
     content,
+    isDevelopStage,
+    lessBabel,
   ])
 
-// temporarily skip those until final solution is done
-describe.skip(`mdx-loader`, () => {
+describe(`mdx-loader`, () => {
   expect.addSnapshotSerializer({
     print(val /* , serialize */) {
       return prettier.format(val, { parser: `babel` })
@@ -65,71 +68,56 @@ describe.skip(`mdx-loader`, () => {
   })
   test.each(fixtures)(
     `snapshot with %s`,
-    async (filename, fakeGatsbyNode, content) => {
-      const loader = mdxLoader.bind({
-        async() {
-          return (err, result) => {
-            expect(err).toBeNull()
-            expect(result).toMatchSnapshot()
-          }
-        },
-        query: {
-          getNodes(_type) {
-            return fixtures.map(([, node]) => node)
-          },
-          getNodesByType(_type) {
-            return fixtures.map(([, node]) => node)
-          },
-          pluginOptions: {
-            lessBabel: false, // default
+    async (filename, fakeGatsbyNode, content, isDevelopStage, lessBabel) => {
+      let err
+      let result
+
+      const createLoader = (opts = {}) =>
+        mdxLoader.bind({
+          async() {
+            return (_err, _result) => {
+              err = _err
+              result = _result
+            }
           },
-          cache: {
-            get() {
-              return false
+          query: {
+            getNodes(_type) {
+              return fixtures.map(([, node]) => node)
             },
-            set() {
-              return
+            getNodesByType(_type) {
+              return fixtures.map(([, node]) => node)
             },
-          },
-        },
-        resourcePath: fakeGatsbyNode.absolutePath,
-      })
-      await loader(content)
-    }
-  )
-
-  test.each(fixtures)(
-    `snapshot [lessBabel=true] with %s`,
-    async (filename, fakeGatsbyNode, content) => {
-      const loader = mdxLoader.bind({
-        async() {
-          return (err, result) => {
-            expect(err).toBeNull()
-            expect(result).toMatchSnapshot()
-          }
-        },
-        query: {
-          getNodes(_type) {
-            return fixtures.map(([, node]) => node)
-          },
-          getNodesByType(_type) {
-            return fixtures.map(([, node]) => node)
-          },
-          pluginOptions: {
-            lessBabel: true,
-          },
-          cache: {
-            get() {
-              return false
+            pluginOptions: {
+              lessBabel,
             },
-            set() {
-              return
+            cache: {
+              get() {
+                return false
+              },
+              set() {
+                return
+              },
             },
+            isolateMDXComponent: isDevelopStage,
           },
-        },
-        resourcePath: fakeGatsbyNode.absolutePath,
-      })
-      await loader(content)
+          resourcePath: fakeGatsbyNode.absolutePath,
+          resourceQuery: fakeGatsbyNode.absolutePath,
+          rootContext: `/fake/`,
+          ...opts,
+        })
+
+      await createLoader()(content)
+      expect(err).toBeNull()
+      expect(result).toMatchSnapshot()
+      err = result = undefined
+
+      if (isDevelopStage) {
+        await createLoader({
+          resourceQuery: `${fakeGatsbyNode.absolutePath}?type=component`,
+        })(content)
+        expect(err).toBeNull()
+        expect(result).toMatchSnapshot()
+      }
     }
   )
 })