Hot reload not working for MDX files

[codepunkt]

Description

Hot reloading of mdx files is not working with gatsby develop.

Steps to reproduce

1. clone https://github.com/codepunkt/codepunkt.de
2. yarn install
3. yarn start
4. open http://localhost:8000/blog/react-as-a-ui-runtime/
5. update src/content/blog/react-as-a-ui-runtime/index.mdx

Expected result

Incremental recompile, browser should show the changes of the update in index.mdx

Actual result

Terminal:

info changed file at /codepunkt.de/src/content/blog/react-as-a-ui-runtime/index.mdx
ℹ ｢wdm｣: Compiling...
 DONE  Compiled successfully in 363ms

ℹ ｢wdm｣:
ℹ ｢wdm｣: Compiled successfully.

Browser console:

[HMR] bundle rebuilding
client.js:250 [HMR] bundle rebuilt in 363ms

However, page in browser doesn't update.

Environment

System:
OS: Linux 4.9 Debian GNU/Linux 9 (stretch) 9 (stretch)
CPU: (2) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
Shell: 4.4.12 - /bin/bash
Binaries:
Node: 10.16.0 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Languages:
Python: 2.7.13 - /usr/bin/python
npmPackages:
gatsby: ^2.13.15 => 2.13.15
gatsby-image: ^2.2.5 => 2.2.5
gatsby-plugin-catch-links: ^2.1.2 => 2.1.2
gatsby-plugin-emotion: ^4.1.2 => 4.1.2
gatsby-plugin-manifest: ^2.2.2 => 2.2.2
gatsby-plugin-mdx: ^1.0.11 => 1.0.11
gatsby-plugin-offline: ^2.2.2 => 2.2.2
gatsby-plugin-react-helmet: ^3.1.1 => 3.1.1
gatsby-plugin-react-svg: ^2.1.1 => 2.1.1
gatsby-plugin-sharp: ^2.2.4 => 2.2.4
gatsby-plugin-twitter: ^2.1.2 => 2.1.2
gatsby-plugin-typography: ^2.3.2 => 2.3.2
gatsby-remark-copy-linked-files: ^2.1.3 => 2.1.3
gatsby-remark-embedder: ^1.0.2 => 1.0.2
gatsby-remark-external-links: ^0.0.4 => 0.0.4
gatsby-remark-images: ^3.1.7 => 3.1.7
gatsby-remark-smartypants: ^2.1.2 => 2.1.2
gatsby-remark-vscode: ^1.0.6 => 1.0.6
gatsby-source-filesystem: ^2.1.4 => 2.1.4
gatsby-transformer-sharp: ^2.2.2 => 2.2.2

[johno]

After a quick glance I believe it might be due to the fact that you are passing the MDX body to your template. This causes it to only build once at runtime.

If you pass the post id and use a pageQuery this will enable hot reloading.

[codepunkt]

Stopped passing the MDX body to my template via context.
Added this pageQuery to my template instead:

export const query = graphql`
  query mdxPostDetails($id: String) {
    mdx(id: { eq: $id }) {
      body
      timeToRead
    }
  }
`

I tried this before and it didn't work, but that was probably some mistake on my end.

Works like a charm. Thank you, @johno!

[johno]

No worries! Thanks for adding in your solution for other folks in the future!

[codepunkt]

@johno One question that isn't answered yet: Why does this happen? Is it documented somewhere?

Also, can there be an automatic warning about this?
Are there other things that we can't pass to our mdx templates via context?

[codepunkt]

When changing mdx content, quite often all the content is thrown away instead of reloaded.

When this happens, the graphql queried frontmatter consists only of empty strings and null values and the body is this (basically also without content):

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

/* @jsx mdx */
var _frontmatter = {};

var makeShortcode = function makeShortcode(name) {
  return function MDXDefaultShortcode(props) {
    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");
    return mdx(\"div\", props);
  };
};

var layoutProps = {
  _frontmatter: _frontmatter
};
var MDXLayout = \"wrapper\";
return function MDXContent(_ref) {
  var components = _ref.components,
      props = _objectWithoutProperties(_ref, [\"components\"]);

  return mdx(MDXLayout, _extends({}, layoutProps, props, {
    components: components,
    mdxType: \"MDXLayout\"
  }));
}
;
MDXContent.isMDXComponent = true;

[gatsbot]

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

[gatsbot]

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!

[loke-dev]

I also experience issues when changing a MDX file and it will run all queries, but then the frontmatter for that file is null and usually crashes the site.