Page won't rebuild after modification in develop mode

[maru3l]

Description

When I start gatsby develop, every page is build and served. But when I edit a page in the pages folder, I'm redirect to the 404 page with the list of all pages but all the page in the pages folder is not part of this list anymore.

Steps to reproduce

1. Start gatsby develop
2. Open a page from pages folder in your browser
3. Edit the page in your code editor
4. Return to the browser, the page should now be the 404 page and your page should not be listed in the list

Expected result

React-hot-reload should reload the page with the changement.

Actual result

Redirect to the 404 page and the page don't exist anymore in the site path.
Also, the public folder only have the index page

Environment

System:
    OS: macOS 10.14.3
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Shell: 5.0.2 - /usr/local/bin/bash
  Binaries:
    Node: 11.10.1 - ~/.nvm/versions/node/v11.10.1/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.8.0 - ~/.nvm/versions/node/v11.10.1/bin/npm
  Languages:
    Python: 2.7.16 - /usr/local/bin/python
  Browsers:
    Chrome: 72.0.3626.121
    Firefox: 65.0.1
    Safari: 12.0.3
  npmPackages:
    gatsby: ^2.1.31 => 2.1.31 
    gatsby-image: ^2.0.33 => 2.0.33 
    gatsby-plugin-i18n: ^1.0.1 => 1.0.1 
    gatsby-plugin-mailchimp: github:benjaminhoffman/gatsby-plugin-mailchimp#3b50aa6 => 5.0.0 
    gatsby-plugin-netlify: ^2.0.12 => 2.0.12 
    gatsby-plugin-netlify-cache: ^1.1.0 => 1.1.0 
    gatsby-plugin-offline: ^2.0.25 => 2.0.25 
    gatsby-plugin-react-helmet: ^3.0.9 => 3.0.9 
    gatsby-plugin-sass: ^2.0.11 => 2.0.11 
    gatsby-plugin-sharp: ^2.0.28 => 2.0.28 
    gatsby-plugin-stripe: ^1.2.0 => 1.2.0 
    gatsby-source-filesystem: ^2.0.24 => 2.0.24 
    gatsby-source-graphql: ^2.0.14 => 2.0.14 
    gatsby-source-magento: ^1.4.2 => 1.4.2 
    gatsby-source-wordpress: ^3.0.44 => 3.0.44 
    gatsby-transformer-sharp: ^2.1.17 => 2.1.17 
  npmGlobalPackages:
    gatsby-cli: 2.4.15

[joperron]

This works fine with a fresh install, did you try to remove plugins to find the culprit? Perhaps gatsby-plugin-offline? Uninstall it with gatsby-plugin-remove-serviceworker.

[maru3l]

@joperron It didn't change anything.

I have some strange warning in the console

[HMR] bundle rebuilding client.js:234
[HMR] bundle rebuilt in 323ms client.js:242
[HMR] Checking for updates on the server... process-update.js:41
Ignored an update to unaccepted module ./.cache/pages.json -> ./.cache/app.js -> 0 NewsletterFormFooter.jsx:17
[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See https://webpack.js.org/concepts/hot-module-replacement/ for more details. commons.js:68871:9
[HMR]  - ./.cache/pages.json commons.js:68879:11
[HMR] Reloading page

I also have this record in the console
React-Hot-Loader: react-🔥-dom patch is not detected. React 16.6+ features may not work.

[joperron]

Can we see NewsletterFormFooter.jsx?

[maru3l]

shure

// vendors
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { injectIntl } from 'react-intl';
import addToMailchimp from 'gatsby-plugin-mailchimp';

// components
import Input from '../../Input';
import RoundedButton from '../../RoundedButton';

// styles
import './NewsletterFormFooter.scss';

// utils
import validateInput from '../../../utils/validateInput';

class NewsletterForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      siteFooterEmail: {
        title: 'labels.email',
        value: '',
        rules: ['email', 'required'],
        error: null,
      },
      isSubmitted: false,
      error: null,
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(e) {
    const {
      target: { value, name },
    } = e;
    this.setState(prevState => ({ [name]: { ...prevState[name], value } }));
  }

  async handleSubmit(e) {
    e.preventDefault();

    const {
      intl,
      intl: { locale },
    } = this.props;

    const { siteFooterEmail } = this.state;

    const errors = [];

    const emailError = validateInput(
      siteFooterEmail.value,
      siteFooterEmail.rules
    );
    if (emailError)
      errors.push({
        key: 'siteFooterEmail',
        error: intl.formatMessage({ id: emailError }),
      });

    const newState = this.state;

    newState.siteFooterEmail.error = null;
    newState.isSubmitted = false;
    newState.error = null;

    if (errors.length > 0) {
      errors.forEach(error => {
        newState[error.key].error = error.error;
      });

      this.setState(newState);
    } else {
      try {
        const result = await addToMailchimp(siteFooterEmail.value, {
          LANGUAGE: locale,
        });

        if (result.result === 'success') {
          newState.isSubmitted = true;
          this.setState(newState);
        } else {
          // TODO: Process the error correctly and display the correct error message
          newState.error = 'sentences.newsletter_form.error';
          this.setState(newState);
        }
      } catch (error) {
        console.error(error);
      }
    }
  }

  render() {
    const { siteFooterEmail, isSubmitted, error } = this.state;

    const { intl } = this.props;

    return (
      <section className="site-footer-newsletter-form">
        <p className="site-footer-newsletter-form__title">
          {intl.formatMessage({ id: 'sentences.subscribe_newsletter' })}
        </p>
        <form
          className="site-footer-newsletter-form__form"
          onSubmit={this.handleSubmit}
        >
          <Input
            placeholder={intl.formatMessage({ id: siteFooterEmail.title })}
            name="siteFooterEmail"
            type="email"
            className="site-footer-newsletter-form__input site-footer-newsletter-form__input--email"
            error={siteFooterEmail.error}
            onChange={this.handleChange}
            light
          />
          <div className="site-footer-newsletter-form__input site-footer-newsletter-form__input--submit">
            <RoundedButton onClick={this.handleSubmit} light>
              {intl.formatMessage({ id: 'labels.subscribe' })}
            </RoundedButton>
          </div>
          {isSubmitted && (
            <p className="site-footer-newsletter-form__message">
              {intl.formatMessage({
                id: 'sentences.newsletter_form.submitted',
              })}
            </p>
          )}
          {error && (
            <p className="site-footer-newsletter-form__message">
              {intl.formatMessage({ id: error })}
            </p>
          )}
        </form>
      </section>
    );
  }
}

NewsletterForm.propTypes = {
  intl: PropTypes.node.isRequired,
};

export default injectIntl(NewsletterForm);

[joperron]

Does it work if you dont import it?
Does if work if you do a full reload?

[maru3l]

No, I'm getting the same issue. But I found a old package.json on a other branch and I don't have the issue with this configuration. I will try to upgrade one package at the time to see with one make the issue.

System:
    OS: macOS 10.14.3
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Shell: 5.0.2 - /usr/local/bin/bash
  Binaries:
    Node: 11.10.1 - ~/.nvm/versions/node/v11.10.1/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.8.0 - ~/.nvm/versions/node/v11.10.1/bin/npm
  Languages:
    Python: 2.7.16 - /usr/local/bin/python
  Browsers:
    Chrome: 72.0.3626.121
    Firefox: 65.0.1
    Safari: 12.0.3
  npmPackages:
    gatsby: ^2.0.117 => 2.0.117 
    gatsby-image: ^2.0.29 => 2.0.29 
    gatsby-plugin-i18n: ^1.0.1 => 1.0.1 
    gatsby-plugin-mailchimp: https://github.com/benjaminhoffman/gatsby-plugin-mailchimp.git#gatsby-v2 => 3.3.0 
    gatsby-plugin-netlify: ^2.0.11 => 2.0.11 
    gatsby-plugin-netlify-cache: ^1.1.0 => 1.1.0 
    gatsby-plugin-offline: ^2.0.23 => 2.0.23 
    gatsby-plugin-react-helmet: ^3.0.6 => 3.0.6 
    gatsby-plugin-sass: ^2.0.10 => 2.0.10 
    gatsby-plugin-sharp: ^2.0.20 => 2.0.20 
    gatsby-source-filesystem: ^2.0.20 => 2.0.20 
    gatsby-source-graphql: ^2.0.10 => 2.0.10 
    gatsby-source-magento: ^1.4.2 => 1.4.2 
    gatsby-source-wordpress: ^3.0.33 => 3.0.33 
    gatsby-transformer-sharp: ^2.1.13 => 2.1.13 
  npmGlobalPackages:
    gatsby-cli: 2.4.15

[jcbaey]

I have exactly the same issue. Have you found the root cause?
Thanks

[jcbaey]

Ok just found that is linked to issue: #12143
I have just figured out that it is working properly on gatsby@2.1.9 and fails on gatsby@2.1.10

[maru3l]

solve with the PR #12671