[gatsby-plugin-netlify-cms]: admin doesn't update unless Gatsby is restarted

[SachaG]

Description

Using the NetlifyCMS plugin, I've noticed that the files used by the plugin don't update unless I stop and restart Gatsby. For example, I wanted to modify the CMS' preview templates or config.yml settings, and that doesn't actually do anything until the restart. cc @erquhart.

Steps to reproduce

Code: https://github.com/zenstokyo/ZensHomeBlog

Expected result

Code should either live reload, or at least update on page refresh.

Actual result

No changes are taken into account until hard restart.

Environment

System:
    OS: macOS 10.14.2
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.12.0 - ~/.nvm/versions/node/v8.12.0/bin/node
    Yarn: 1.7.0 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v8.12.0/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 63.0.1
    Safari: 12.0.2
  npmPackages:
    gatsby: ^2.0.66 => 2.0.66
    gatsby-image: ^2.0.23 => 2.0.23
    gatsby-mdx: ^0.2.0 => 0.2.0
    gatsby-plugin-netlify: ^2.0.6 => 2.0.6
    gatsby-plugin-netlify-cms: ^3.0.9 => 3.0.9
    gatsby-plugin-purgecss: ^2.4.0 => 2.4.0
    gatsby-plugin-react-helmet: ^3.0.4 => 3.0.4
    gatsby-plugin-sass: ^2.0.7 => 2.0.7
    gatsby-plugin-sharp: ^2.0.15 => 2.0.15
    gatsby-remark-copy-linked-files: ^2.0.7 => 2.0.7
    gatsby-remark-images: ^3.0.1 => 3.0.1
    gatsby-remark-relative-images: ^0.2.0 => 0.2.1
    gatsby-source-filesystem: ^2.0.12 => 2.0.12
    gatsby-source-graphql: ^2.0.7 => 2.0.7
    gatsby-transformer-remark: ^2.1.15 => 2.1.15
    gatsby-transformer-sharp: ^2.1.9 => 2.1.9
  npmGlobalPackages:
    gatsby-cli: 2.4.7

[sidharthachatterjee]

Thank you for opening @SachaG

Yeah, looks like the gatsby-plugin-netlify-cms just adds a custom entry point in webpack for the prebuilt cms module at the moment and doesn't listen on changes or setup hot module replacement

I can't login with Netlify Identity to your fork so can't test this myself but can you please try wrapping the registerPreviewTemplate imports with module.hot

From https://webpack.js.org/api/hot-module-replacement/

if (module.hot) {
  module.hot.accept('./library.js', function() {
    // Do something with the updated library module...
  });
}

[SachaG]

I updated my code like this:

import CMS from 'netlify-cms';

if (module.hot) {
  module.hot.accept('./preview-templates/BlogPostPreview', function() {
    const BlogPostPreview = require('./preview-templates/BlogPostPreview')
    CMS.registerPreviewTemplate('blog', BlogPostPreview);
  });
}

But it doesn't seem to work, sorry… I think the issue is that changes in cms.js itself are not taken into account?

[sidharthachatterjee]

@SachaG Never mind, it uses a separate webpack config and didn't have the hot module replacement plugin

Just added it in #10799

[sidharthachatterjee]

So turns that this is much harder to do than I initially thought

I managed to setup a separate instance of webpack-hot-middleware in the onCreateDevServer hook in gatsby-node.js for the plugin but it complains about multiple instances of webpack and doesn't work

Since this use case is pretty specific to this plugin, it looks like we'll have to put it on hold for the moment 🙁

Would you like to take a look at this @erquhart?

[anagrius]

I would be most interested in this too. It is painful to have to restart when developing Editor components and previews.

[erquhart]

Digging into this now.

[erquhart]

Hot reloading looks like it would be a hot mess to implement for our parallel webpack build, but I'm opening a PR to at least watch CMS files, so you can get changes by refreshing. Hope it helps!

[SachaG]

Yeah I don't think hot reloading is needed at all, refreshing is plenty, thanks!

[m-allanson]

Fix published in [email protected], thanks @erquhart 👍