Gatsby: [V2] Hot reload doesn't work on pages deleted and created by onCreatePage

[tcerdaITBA]

Description

Hot reload fails when updating pages deleted and created by deletePage and createPage inside onCreatePage. It renders correctly after npm start but it fails to hot reload. Updating any other type of file works correctly.

It actually updates correctly but it attempts to refresh the page after 1 second and then it fails.

The idea is to replace pages inside src/pages by their i18n version. So / is deleted and replaced by a component which redirects to /es/ and /en/. The relevant code is:

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage, deletePage } = actions;

  if (page.path.includes('404') || page.context.locale) {
    return;
  }

  const redirect = path.resolve('src/i18n/redirect.js');

  const redirectPage = {
    ...page,
    component: redirect,
    context: {
      languages,
      locale: '',
      routed: false,
      redirectPage: page.path,
    }
  };

  deletePage(page);
  createPage(redirectPage);

  languages.forEach(({ value }) => {
    const localePage = {
      ...page,
      originalPath: page.path,
      path: `/${value}${page.path}`,
      context: {
        languages,
        locale: value,
        routed: true,
        originalPath: page.path,
      }
    };

    createPage(localePage);
  });
};

Steps to reproduce

1. Clone https://github.com/tcerdaITBA/SurvivalRecipes
2. git checkout a5dff2c4bf3d4fdcc2a05c59294734832a421d3b
3. npm install
4. npm start
5. Navigate to localhost:8000
6. Modify src/pages/index.jsx

Expected result

It should render the updated changes without refreshing the page.

Actual result

404-development page is rendered and restarting application is required to fix.

Environment

  System:
    OS: macOS 10.14.3
    CPU: (4) x64 Intel(R) Core(TM) i5-4250U CPU @ 1.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 11.5.0 - ~/.nvm/versions/node/v11.5.0/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.7.0 - ~/.nvm/versions/node/v11.5.0/bin/npm
  Languages:
    Python: 3.6.4 - /usr/local/bin/python
  Browsers:
    Firefox: 65.0.1
    Safari: 12.0.3
  npmPackages:
    gatsby: ^2.1.18 => 2.1.18 
    gatsby-image: ^2.0.20 => 2.0.25 
    gatsby-plugin-favicon: ^3.1.5 => 3.1.5 
    gatsby-plugin-manifest: ^2.0.9 => 2.0.12 
    gatsby-plugin-offline: ^2.0.24 => 2.0.24 
    gatsby-plugin-react-helmet: ^3.0.7 => 3.0.7 
    gatsby-plugin-sharp: ^2.0.22 => 2.0.22 
    gatsby-plugin-styled-components: ^3.0.6 => 3.0.6 
    gatsby-source-filesystem: ^2.0.23 => 2.0.23 
    gatsby-transformer-remark: ^2.2.0 => 2.2.0 
    gatsby-transformer-sharp: ^2.1.14 => 2.1.14 
  npmGlobalPackages:
    gatsby-cli: 2.4.8

Additional Information

This started to happen since Gatsby 2.1.10, related to #11831.

I have already tried fixing the React hot load warning but the error persisted.

Thank you very much for your help.

[wardpeet]

This might be why it starts failing
https://github.com/gatsbyjs/gatsby/pull/11831

[tcerdaITBA]

Yes, I can confirm that is the reason. Gatsby 2.1.9 hot reload works fine but 2.1.10 fails, which is the version which corresponds to the merge #11831.

I can't exactly say why is the reason though. The page refreshes by itself and renders 404-development after the hot reload.

[tcerdaITBA]

I found a way around it that is to only include the pages/recipes directory in the gatsby-source-filesystem plugin, which is the only directory I actually need to read files from. Therefore the index.jsx and every other page which is deleted and recreated for each language due to translation is excluded from the filesystem plugin.

Gatsby config

Before

{
  resolve: 'gatsby-source-filesystem',
  options: {
    name: 'pages,
    path: `${__dirname}/src/pages`
  }
}

Now

{
  resolve: 'gatsby-source-filesystem',
  options: {
    name: 'recipes',
    path: `${__dirname}/src/pages/recipes`
  }
}

[jaymdq]

Any update on this? I 'm facing the same problem with gatsby 2.1.20
The hot reload fails whenever I edit my pages and the solution is to run gatsby develop again.

[morloy]

Same issue here. Luckily, the workaround from https://github.com/gatsbyjs/gatsby/issues/12143#issuecomment-468815458 proved really helpful. Thanks, @tcerdaITBA.

[detj]

Just bumped into this issue while using with [email protected]. Recreated with gatsby-starter-mdx-basic and by upgrading gatsby to v2.1.23

I created a source-filesystem-entry

   {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `examples`,
        path: `${__dirname}/src/pages/examples`,
      },
    }

And created an mdx file at src/pages/examples/Alert.mdx. Ran npm run start and now on editing the Alert.mdx file leads to / page getting deleted. So, the default 404 page is showed up.

$ npx gatsby-cli info

 System:
    OS: macOS 10.14.3
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.15.2 - ~/n/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/n/bin/npm
  Languages:
    Python: 2.7.15 - /usr/local/bin/python
  Browsers:
    Chrome: 72.0.3626.121
    Firefox: 65.0.1
    Safari: 12.0.3
  npmPackages:
    gatsby: 2.0.83 => 2.0.83
    gatsby-image: ^2.0.31 => 2.0.31
    gatsby-mdx: ^0.4.2 => 0.4.2
    gatsby-plugin-manifest: ^2.0.22 => 2.0.22
    gatsby-plugin-offline: ^2.0.24 => 2.0.24
    gatsby-plugin-react-helmet: ^3.0.8 => 3.0.8
    gatsby-plugin-sharp: ^2.0.25 => 2.0.25
    gatsby-source-filesystem: ^2.0.23 => 2.0.23
    gatsby-transformer-sharp: ^2.1.15 => 2.1.15

[toxsick]

Having the same issue. Rolling back to Gatsby v2.1.9 works for now. Thanks @tcerdaITBA

[wardpeet]

I've added #12480 to our roadmap so we'll try to fix this asap. If there are any takers we're open to that as well 😄

[jcbaey]

The issue comes from the line

const timestamp = new Date().toJSON()

that has been updated to

  const timestamp = Date.now()

The comparison is now working and pages are deleted (which was not the case in 2.1.09):

if (!_.includes(statefulPlugins, page.pluginCreatorId) && page.updatedAt < timestamp) {
  deleteComponentsDependencies([page.path]);
  deletePage(page);
}

https://github.com/gatsbyjs/gatsby/pull/11831/files/863acf14c81b792aca18e3e1e9df5390ade3907c#diff-deed9a141e906a882e5f3b2d2c4e21ae

[jcbaey]

One workaround (not sure about all the side effects) is to add a dummy exported function createPagesStatefully in your gatsby-node.js file so that gatsby-source-filesystem will be listed in the statefulPlugins in page-hot-reloader.js:

exports.createPagesStatefully = () => {};

or just rename your exports.createPages in exports.createPagesStatefully in your gatsby-node.js

[pieh]

I've opened PR with fix https://github.com/gatsbyjs/gatsby/pull/12671
The workaround from @jcbaey have potential of side effects of not deleting stale pages create in createPages API, but that issue is less problematic than deleting pages from src/pages - so I would advise to use that at least until that PR is merged