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

tcerda95 · 2019-02-27T13:31:47Z

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

Clone https://github.com/tcerdaITBA/SurvivalRecipes
git checkout a5dff2c4bf3d4fdcc2a05c59294734832a421d3b
npm install
npm start
Navigate to localhost:8000
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.

The text was updated successfully, but these errors were encountered:

wardpeet · 2019-02-28T10:41:33Z

This might be why it starts failing
#11831

tcerda95 · 2019-02-28T15:44:42Z

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.

tcerda95 · 2019-03-01T21:20:03Z

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 · 2019-03-04T19:47:46Z

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 · 2019-03-05T16:14:02Z

Same issue here. Luckily, the workaround from #12143 (comment) proved really helpful. Thanks, @tcerdaITBA.

detj · 2019-03-06T13:45:47Z

Just bumped into this issue while using with gatsby-mdx@0.4.2. 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 · 2019-03-13T08:05:11Z

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

wardpeet · 2019-03-13T11:30:11Z

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 · 2019-03-18T13:56:48Z

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 · 2019-03-18T14:16:45Z

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 · 2019-03-19T15:31:03Z

I've opened PR with fix #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

…r edits (#12671) If in `gatsby-node.js` we add ```js exports.onCreatePage = ({ actions, page }) => { actions.createPage(page) } ``` Next time any node update, pages created by `gatsby-plugin-page-creator` will be deleted. This is regression introduced by fix in #11831 (that fixed the problem of pages never getting deleted) The problem is that when we do `createPage` by plugin/site that isn't implementing `createPagesStatefully` it will be marked to be deleted. This change keeps track if original API was `createPages` or `createPagesStatefully` by using `traceId` instead of directly checking what plugin created the page in the end. Fixes #12143

wardpeet added the type: bug An issue or pull request relating to a bug in Gatsby label Feb 28, 2019

jeffrafter mentioned this issue Mar 1, 2019

gatsby develop can only serve 5 pages at a time #12225

Closed

jcbaey mentioned this issue Mar 18, 2019

Page won't rebuild after modification in develop mode #12554

Closed

pieh mentioned this issue Mar 19, 2019

fix(gatsby): keep track of pages created by stateful createPages after edits #12671

Merged

wardpeet closed this as completed in #12671 Mar 20, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

tcerda95 commented Feb 27, 2019 •

edited

Loading

wardpeet commented Feb 28, 2019

tcerda95 commented Feb 28, 2019

tcerda95 commented Mar 1, 2019

jaymdq commented Mar 4, 2019

morloy commented Mar 5, 2019

detj commented Mar 6, 2019 •

edited

Loading

toxsick commented Mar 13, 2019

wardpeet commented Mar 13, 2019

jcbaey commented Mar 18, 2019

jcbaey commented Mar 18, 2019 •

edited

Loading

pieh commented Mar 19, 2019

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

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

Comments

tcerda95 commented Feb 27, 2019 • edited Loading

Description

Steps to reproduce

Expected result

Actual result

Environment

Additional Information

wardpeet commented Feb 28, 2019

tcerda95 commented Feb 28, 2019

tcerda95 commented Mar 1, 2019

Gatsby config

Before

Now

jaymdq commented Mar 4, 2019

morloy commented Mar 5, 2019

detj commented Mar 6, 2019 • edited Loading

toxsick commented Mar 13, 2019

wardpeet commented Mar 13, 2019

jcbaey commented Mar 18, 2019

jcbaey commented Mar 18, 2019 • edited Loading

pieh commented Mar 19, 2019

tcerda95 commented Feb 27, 2019 •

edited

Loading

detj commented Mar 6, 2019 •

edited

Loading

jcbaey commented Mar 18, 2019 •

edited

Loading