Gatsby: MDX Page not being created through `createPage`

[wking-io]

Description

I am trying to programmatically generate pages from mdx files. It worked when I was using md files, but now the createPage seems to be failing and not referencing the template as a page and I am getting this warning and the blog post pages are broken:

warn The GraphQL query in the non-page component "/Users/wking/sites/wking-io/src/templates/article.js" will not be run.
Exported queries are only executed for Page components. It's possible you're
trying to create pages in your gatsby-node.js and that's failing for some
reason.

If the failing component(s) is a regular component and not intended to be a page
component, you generally want to use a <StaticQuery> (https://gatsbyjs.org/docs/static-query)
instead of exporting a page query.

If you're more experienced with GraphQL, you can also export GraphQL
fragments from components and compose the fragments in the Page component
query and pass data down into the child component — http://graphql.org/learn/queries/#fragments

Steps to reproduce

1. Clone and build repo here: https://github.com/wking-io/wking-io
2. See warning in output
3. Visit http://localhost:8000/content/articles/why-use-elm-in-wordpress/ to see page not being passed into template as defined in gatsby-node.js

Expected result

I expect the page to be generated inside of the template as seen here: https://www.wking.io/content/articles/wordpress-needs-a-frontend-framework/

Actual result

I get the warning in the build out put and the mdx file contents are just rendered on the apge as is.

Environment

System:
OS: macOS 10.14.5
CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
Yarn: 1.15.2 - /usr/local/bin/yarn
npm: 6.10.2 - ~/.nvm/versions/node/v10.15.3/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 75.0.3770.142
Firefox: 68.0.1
Safari: 12.1.1
npmPackages:
gatsby: 2.13.31 => 2.13.31
gatsby-image: 2.2.7 => 2.2.7
gatsby-plugin-manifest: ^2.1.1 => 2.1.1
gatsby-plugin-mdx: 1.0.18 => 1.0.18
gatsby-plugin-offline: ^2.1.3 => 2.1.3
gatsby-plugin-postcss: 2.1.0 => 2.1.0
gatsby-plugin-prefetch-google-fonts: 1.4.2 => 1.4.2
gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12
gatsby-plugin-sharp: 2.2.9 => 2.2.9
gatsby-source-filesystem: ^2.0.43 => 2.0.43
gatsby-transformer-json: 2.2.2 => 2.2.2
gatsby-transformer-remark: 2.6.7 => 2.6.7
gatsby-transformer-sharp: 2.2.5 => 2.2.5

[wking-io]

I was able to fix the issue by moving the .mdx files out of the src directory. However, not sure why that fixed it.

[lannonbr]

@wking-io Alright yeah I saw that you moved the content out of src/pages/. gatsby-plugin-mdx automatically creates pages from MDX inside src/pages, so you were trying to create pages that already existed, so the path you took of moving it out of src/pages/ is what we normally recommend.

Closing this as it was resolved.

[bayareacoder]

I believe the action here should be to document this a lot better in the Gatsby docs since, as the OP mentions, it works for a markdown plugin (i.e. you can have .md files under src/pages and still use createPage) but not for mdx plugin. I just spent hours stuck on this while transferring a site from markdown to mdx until I stumbled on this page. It should be made clear that you need to keep jsx files under src/pages and mdx files under src/content, if you want to use gatsby_node to programmatically create pages from mdx.

[Vintharas]

I've been stuck on the same issue for hours :(

[varughese]

I also had an issue with this. I think https://www.gatsbyjs.org/docs/mdx/programmatically-creating-pages/ should be explicitly updated such that it explains that the MDX plugin automatically configures the src/pages directory.

[khalstal]

Thank you for the posted solution