"getStaticProps is not defined" with mdx files

Bug report

I’m trying to use nextjs and mdx to build a simple site. When I export getStaticProps, I get an “undefined” error. It looks like an issue that happens client side.

To Reproduce

I followed the “with-mdx” example to add mdx pages to my application. https://github.com/zeit/next.js/tree/canary/examples/with-mdx

I try to generate static props from the mdx using exports (https://mdxjs.com/getting-started#exports)

// src/pages/index.mdx

# Helloworld

Content is here!

export function getStaticProps() {
    return {
        props: {hello: 'world'}
    }
}

// src/_app.tsx
...

export default function App(app: AppProps) {
  const { Component, pageProps } = app;

  return (<MDXProvider components={components}>
      <pre>{JSON.stringify(pageProps)}</pre>
      <Component {...pageProps} />
    </MDXProvider>
  );
}

I get an undefined error:

ReferenceError: getStaticProps is not defined
Module../src/pages/index.mdx
./src/pages/index.mdx:25
  22 | const layoutProps = {
  23 |   layout,
  24 | hello,
> 25 | getStaticProps
  26 | };
  27 | const MDXLayout = "wrapper"
  28 | export default function MDXContent({

The <pre>{hello: "world"}</pre> appears on my webpage. It looks like this error is client side only, and the code behave as expect on the server.

Screenshot of the full error below.

Expected behavior

I expect to see the props and the content.

Screenshots

System information

• OS: macOS
• Version of Next.js: 9.3.4
• Version of Node.js: 12.14.0

    "@mdx-js/loader": "^1.5.8",
    "@next/mdx": "^9.3.5",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "isomorphic-unfetch": "^3.0.0",
    "next": "^9.3.4",
    "pg": "^8.0.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "swr": "^0.2.0",
    "unfetch": "^4.1.0"

Thanks for supporting this project!

[aralroca]

I get a similar issue, but with async, after writing:

export async function getStaticProps(){
   return { props: { data: await myData() } }
}

Rewriting to:

export const getStaticProps = async () => {
   return { props: { data: await myData() } }
}

Just the same as you:

[silvenon]

You have to export getStaticProps from the MDX page itself, not layout.

There is one syntax that seems to circumvent this incompatibility between MDX and Next.js:

export { getStaticProps } from 'path/to/module'

# Title

Your MDX content...

But I’d say that it’s somewhat of a bug in MDX that this works because all exports are meant to be passed as props to layout, e.g. export const meta = { ... } is a common pattern, and I’d expect export { meta } from './other-data to behave the same, but it doesn’t.