Gatsby: [v2] Hot reloading (HMR) not working with Markdown

[karlhorky]

Description

With gatsby 2.0.0-beta.20 to 2.0.0-beta.38, updating Markdown files does not trigger a re-render. Even refreshing doesn't show the updated content.

Ref: https://github.com/gatsbyjs/gatsby/issues/6072#issuecomment-405158853
Ref: https://github.com/m-allanson/gatsby-barebones-markdown/pull/1#issuecomment-405280637

Steps to reproduce

1. Clone gatsby-barebones-markdown
2. Check out the commit m-allanson/gatsby-barebones-markdown@0eef913da54ef5b009790414ef43c1f432b28212
3. yarn
4. yarn develop
5. Navigate in a browser to page "b" (http://localhost:8000/b/)
6. Change something in the Markdown content of src/pages/b.md
7. Return to the browser. No hot reloading change will be visible.
8. Reload the browser. No change will be visible.

Expected result

The change should appear in the browser on file save (hot module replacement).

Actual result

No change appears in the browser.

Environment

  System:
    OS: macOS High Sierra 10.13.5
    CPU: x64 Intel(R) Core(TM) i7-6567U CPU @ 3.30GHz
    Shell: 5.5.1 - /usr/local/bin/zsh
  Binaries:
    Node: 10.6.0 - /usr/local/Cellar/node/10.6.0/bin/node
    Yarn: 1.7.0 - /usr/local/bin/yarn
    npm: 6.1.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 67.0.3396.99
    Firefox: 60.0.2
    Safari: 11.1.1
  npmPackages:
    gatsby: 2.0.0-beta.20 => 2.0.0-beta.20
    gatsby-plugin-react-helmet: next => 3.0.0-beta.2
    gatsby-source-filesystem: next => 2.0.1-beta.5
    gatsby-transformer-remark: next => 2.1.1-beta.3

File contents (if changed)

https://github.com/m-allanson/gatsby-barebones-markdown

[KyleAMathews]

Thanks for the bug report! This was fixed and published in [email protected]

[karlhorky]

No problem, thanks for the fix, works well!

[eallencreighton]

Hi, This is not working for me. I have tried both version 1 and version 2 starter kits, and updated my Gatsby version to "next".
_webpack_hmr shows (pending).

[karlhorky]

@eallencreighton did you verify that the installed version of Gatsby in node_modules is has version 2.0.0-beta.40 or higher in package.json? If not, maybe try reinstalling with yarn or npm to get the latest version.

If that's not the problem, where do you see the "_webpack_hmr shows (pending)" error? On the command line? In the browser?

If I remember correctly, for me, webpack just didn't recognize that the files changed at all.

[eallencreighton]

Hi, I have all next versions installed, including all dependencies. The "_webpack_hmr shows (pending)" is from browser inspect Network tab.

My terminal log always says things are compiling correctly. What's interesting, is when I make a new graphQL query, the data change DOES hot reload. It's just styles and HTML content that doesn't update (including react components).

[karlhorky]

Hm, interesting. Maybe this is a new bug.

Can you create an example repo (maybe based off of https://github.com/m-allanson/gatsby-barebones-markdown) that demonstrates this issue?

[eallencreighton]

Thanks @karlhorky
Here it is: https://github.com/eallencreighton/gatsby-hotreload-test

Steps to reproduce:
npm install
gatsby develop
view in http://localhost:8000/
Navigate to src\pages\index.js
Change some html content, save

• no hot reload

Navigate to src\pages\sweet-pandas-eating-sweets.md
Change content, save

• Changes hot reload instantly

[karlhorky]

Thanks for documenting this. Ok, so the issue is with saving JavaScript files after modifying JSX in the files (using [email protected]). This does sound like a new issue to me. The issue I reported was about hot reloading not working with Markdown files (.md files).

If you don't find any other issues that match this problem description, I suppose it would be good to open a new issue with your reproduction steps and repo link.

[khwkang]

I'm still having an issue with hot reloading not working for markdown files only.
I see the input on the terminal "info changed file at /Users/kangken/dev/scholars_ways/src/pages/about/index.md", but that is it. Browser won't hot reload.

Gatsby version = 2.0.0-beta.54
Bug occurred while I was migrating from gatsby v1 to v2
Github repo/branch: https://github.com/khwkang/scholars-way/tree/gatsby-v2

Any help would be appreciated!

[jonhorton]

@khwkang Were you able to sort this issue out? I've been migrating from v1 to v2 and this is my last remaining issue to resolve. I'm running Gatsby 2.0.76

[hexrcs]

I'm also having this issue recently, haven't tried to investigate yet. Symptoms are exactly like what @khwkang has described, but didn't notice this happening when my project was on a beta version of Gatsby v2.

Gatsby CLI version: 2.4.8 (noticed since 2.4.5)
Gatsby version: 2.0.59

[adamduren]

I'm seeing this out of the box when using examples/using-typescript with [email protected]

[adamduren]

Specifically it only happens when modifying a the hello variable value or renaming the variable in the pages/index.tsx file.

export default class IndexPage extends React.Component<IndexPageProps, {}> {
  // Changing the value has no effect until page refresh
  // Renaming the variable causes ` Typescript World!` to be displayed (value missing)
  readonly hello = `Hello`;
  public render() {
    const { siteName } = this.props.data.site.siteMetadata;
    return (
      <Layout>
        <h1>{this.hello} Typescript world!</h1>
        <p>
          This site is named <strong>{siteName}</strong>
        </p>
      </Layout>
    );
  }
}