gatsby: DefaultLayouts for MDX Don't Work

Description

I’ve gone through the documentation a dozen times now. I don’t think there’s anything I’ve missed, but I’ve been wrong before.

MDX is configured with

      {
        resolve: `gatsby-plugin-mdx`,
        options: {
          defaultLayouts: {
            default: require.resolve('./src/components/Layout.js').default
          }
        }
      },

But my Markdown files are rendered with no layout.

Layout works by manually importing in MDX, which I’d like to avoid.

Full source code is available here - preview available here

Steps to reproduce

Configuration as above. Create mdx file in a directory configured with source-filesystem plugin.

Expected result

Rendered page should use layout

Actual result

Rendered page doesn’t use layout

Environment

Netlify and local:

Local info:

  System:
    OS: Linux 5.3 Arch Linux undefined
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.10.0 - /usr/bin/node
    Yarn: 1.17.3 - /usr/bin/yarn
    npm: 6.11.3 - /usr/bin/npm
  Languages:
    Python: 3.7.4 - /usr/bin/python
  npmGlobalPackages:
    gatsby-cli: 2.7.7

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 31 (11 by maintainers)

Most upvoted comments

So I also had an issue here, and the fix that ended up working for me was re-ordering the plugins in gatsby-config.js.

Previously, I had the order as

  • gatsby-source-filesystem
  • gatsby-plugin-page-creator
  • gatsby-plugin-mdx

Everything worked fine once I swapped that to:

  • gatsby-plugin-mdx
  • gatsby-source-filesystem
  • gatsby-plugin-page-creator

Hopefully this is helpful to someone else!

I’m seeing the same issue. There really isn’t a specific way to reproduce this, other than following the gatsby MDX docs the way it is in this section

I have the same problem as @brycewray - are you still waiting on a reproduction? I’m happy to create one if so.