DefaultLayouts for MDX Don't Work

rawkode commented 5 years ago

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 commented 5 years ago

Layout works manually:

Code / Live

Layout doesn't work as default:

Code / Live

universse commented 5 years ago

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

rawkode commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

rawkode commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

LekoArts commented 5 years ago

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 commented 5 years ago

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

LekoArts commented 5 years ago

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

rawkode commented 5 years ago

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

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

LekoArts commented 5 years ago

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] commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

brycewray commented 4 years ago

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

universse commented 4 years ago

Maybe gatsby-config will do?

brycewray commented 4 years ago

@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 commented 4 years ago

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

universse commented 4 years ago

Feel free.

github-actions[bot] commented 4 years ago

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 commented 4 years ago

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

On Dec 1, 2019, at 6:07 PM, github-actions[bot] notifications@github.com 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 commented 4 years ago

A reproduction would be appreciated.

github-actions[bot] commented 4 years ago

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] commented 4 years ago

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] commented 4 years ago

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! 💪💜

flvyu commented 4 years ago

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

ghost commented 4 years ago

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.

kressaty commented 3 years ago

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!

gatsbyjs / gatsby