Gatsby: DefaultLayouts for MDX Don't Work

[rawkode]

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

[rawkode]

Layout works manually:

Code / Live

Layout doesn't work as default:

Code / Live

[universse]

Can you try this instead default: require.resolve('./src/components/Layout.js')? There's not supposed to be any .default at the end.

[rawkode]

I have tried that, it causes a React 130 error (I lost a lot of time on that one 😂)

https://twitter.com/rawkode/status/1175000975419092993?s=19

[LekoArts]

It works in the notes theme: https://github.com/gatsbyjs/gatsby/blob/9b7c054a3ca6cad72144065e94dd33f6c32cb5d0/themes/gatsby-theme-notes/gatsby-config.js#L15-L16

Please try that.

[rawkode]

As already discussed, this causes the error mentioned in the linked Tweet.

[rawkode]

For the sake of clarity, I tried it again

9:17:24 AM: error #95313  Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
9:17:24 AM: Building static HTML failed for path "/article/2019/09/hello-world/"
9:17:24 AM: See our docs page for more info on this error: https://gatsby.dev/debug-html
9:17:24 AM: 
9:17:24 AM:   Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder  .html?invariant=130&args[]=undefined&args[]= for the full message or use the n  on-minified dev environment for full errors and additional helpful warnings.
9:17:24 AM:   
9:17:24 AM:   - react-dom-server.node.production.min.js:47 a.render
9:17:24 AM:     [repo]/[react-dom]/cjs/react-dom-server.node.production.min.js:47:349
9:17:24 AM:   
9:17:24 AM:   - react-dom-server.node.production.min.js:44 a.read
9:17:24 AM:     [repo]/[react-dom]/cjs/react-dom-server.node.production.min.js:44:161
9:17:24 AM:   
9:17:24 AM:   - react-dom-server.node.production.min.js:55 renderToString
9:17:24 AM:     [repo]/[react-dom]/cjs/react-dom-server.node.production.min.js:55:83
9:17:24 AM:   
9:17:24 AM:   - render-page.js:11017 Module../.cache/static-entry.js.__webpack_exports__.def    ault
9:17:24 AM:     /opt/build/repo/website/public/render-page.js:11017:28
9:17:24 AM:   
9:17:24 AM:   - render-html.js:35 Promise
9:17:24 AM:     [repo]/[gatsby]/dist/utils/worker/render-html.js:35:36
9:17:24 AM:   
9:17:24 AM:   - debuggability.js:313 Promise._execute
9:17:24 AM:     [repo]/[bluebird]/js/release/debuggability.js:313:9
9:17:24 AM:   
9:17:24 AM:   - promise.js:488 Promise._resolveFromExecutor
9:17:24 AM:     [repo]/[bluebird]/js/release/promise.js:488:18
9:17:24 AM:   
9:17:24 AM:   - promise.js:79 new Promise
9:17:24 AM:     [repo]/[bluebird]/js/release/promise.js:79:10
9:17:24 AM:   
9:17:24 AM:   - render-html.js:31 Promise.map.path
9:17:24 AM:     [repo]/[gatsby]/dist/utils/worker/render-html.js:31:37
9:17:24 AM:   
9:17:24 AM:   - util.js:16 tryCatcher
9:17:24 AM:     [repo]/[bluebird]/js/release/util.js:16:23

[rawkode]

I do not believe there is anything wrong with my Layout.js. as this works fine with gatsby develop. This error only happens during gatsby build

So I believe this is a bug

[universse]

My guess is something to do with SSR and mixing of import/export + require().

[LekoArts]

When running gatsby develop I'm seeing this:

Can you please provide a minimal reproduction? I think the problem lies in your project and how you use the page creator plugin. It can surely be a bug but only a minimal reproduction could show that I think. Thanks a lot!

[rawkode]

Add .default to config and it works, and the bug is reproduced 😀

[LekoArts]

Yeah, but that doesn't happen with the notes theme I linked so my above comment is still valid :)

[rawkode]

Why? You asked for a reproducible bug, which I've provided?

I've given you a repo that displays the incorrect behaviour

[LekoArts]

Why? You asked for a reproducible bug, which I've provided?

Quoting "How to Make a Minimal Reproduction" here:

Your reproducible test case should contain the bare minimum features needed to clearly demonstrate the bug.

As written above by me I think it's reasonable to assume that the problem lies in how your project is set up and how you use thing like e.g. the page creator plugin. By creating a minimal reproduction you could add the current functionality you have step-by-step and maybe see it break at some point. It's often quicker than fiddling with the current project which can have too many intertwined functionalities.

Sure, you currently show a project where it breaks, however we have enough repositories where the functionality (you're assuming that is at fault) just functions correctly. Hence your project is not a good example of finding the real cause.

As I'm personally short on time this and following week I'd kindly ask you to create the reproduction. Thanks!

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[brycewray]

Pardon if this is a different issue, but is there yet a fix to the one where only the default among defaultLayouts is being used despite having multiple defaultLayouts set, e.g.:

        defaultLayouts: { 
          default: require.resolve("./src/components/layout.js"),
          about: require.resolve("./src/components/about.js"),
          posts: require.resolve("./src/components/singlepost.js"),
        },

[brycewray]

Since the example quoted by @LekoArts uses string literals and omits the .js at the end, is that known to work better? An article on alligator.io (https://alligator.io/gatsbyjs/mdx-in-gatsby/) said there currently is an issue with getting defaultLayouts to work if the .mdx files involved are in ./src/pages/, which has been my experience as well.

[universse]

Do you have a reproduction where having multiple layouts doesn't work? It's working fine for me.

[brycewray]

@universse Not a public repo, but I couldn’t get anything other than the default to work, as noted earlier in this topic.

[universse]

Maybe gatsby-config will do?

[brycewray]

@universse That excerpt I provided earlier was from my gatsby-config.js, of course. My understanding from reading other issues is that @ChristopherBiscardi is working on a change — https://github.com/gatsbyjs/gatsby/pull/18441 — that will eliminate this setting in favor of a different method, anyway, so I may simply wait for that. I have a working site up with just Markdown files rather than MDX. Maybe his change will soon be added to core, thus solving this. (I hope.)

[motleydev]

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

[universse]

Feel free.

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[brycewray]

I request this stay open and not become considered “stale.”

On Dec 1, 2019, at 6:07 PM, github-actions[bot] [e-mail] wrote:


Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.

[universse]

A reproduction would be appreciated.

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

[Flavyoo]

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

[balibebas]

Here are some debugging tips for those encountering this issue:

• Be sure you're using gatsby-source-filesystem to source the directory with the content. Currently this needs to be done for /pages too as noted in the docs. If you don't, you may see a warn during the development build and the defaultLayout option will not work:

  warn The gatsby-plugin-mdx plugin has generated no Gatsby nodes

• Add a non-default option such as pages in addition to the default.

• Pick a simple non-MDX starter and try adding your wrapper there to see if you have the same problem. If you do, provide the steps here to reproduce so maintainers have their minimal reproduction.