Gatsby: Hot reloading is not working when extending gatsby-config with a require statement

[cyrilf]

Description

Given that I replaced my gatsby-config.js siteMetadata section with a require('content/site-metadata.json') statement, when modifying this json file, the hot-reloading isn't occurring.

The require statement and everything works nicely, only the hot-reloading is affected.
I don't know if this is due to an issue with the webpack config itself? I haven't extended my webpack config.

For info, I'm using this json file so that it can be easily edited by my CMS.

Steps to reproduce

In a standard Gatsby setup.
In your gatsby-config.js:

module.exports = {
-   siteMetadata: {
-     title: "Gatsby is awesome"
-   }
+  siteMetadata: require("./content/site-metadata.json"),
  ...
}

in the ./content/site-metadata.json:

{
  "title": "Gatsby is awesome"
}

Then, if you modify the title value in the site-metadata.json the hot-reloading won't happen.

Expected result

Hot-reloading should occur on every change to this json file.

Actual result

Hot-reloading doesn't pick up my changes to this json file.

Environment

System:
OS: Linux 5.3 Ubuntu 19.10 (Eoan Ermine)
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Shell: 5.7.1 - /usr/bin/zsh
Binaries:
Node: 13.9.0 - ~/.nvm/versions/node/v13.9.0/bin/node
npm: 6.13.7 - ~/.nvm/versions/node/v13.9.0/bin/npm
Languages:
Python: 2.7.17 - /usr/bin/python
Browsers:
Firefox: 73.0.1
npmPackages:
gatsby: ^2.19.7 => 2.19.7
gatsby-image: ^2.2.39 => 2.2.39
gatsby-plugin-eslint: ^2.0.8 => 2.0.8
gatsby-plugin-manifest: ^2.2.39 => 2.2.39
gatsby-plugin-offline: ^3.0.32 => 3.0.32
gatsby-plugin-postcss: ^2.1.20 => 2.1.20
gatsby-plugin-purgecss: ^4.0.1 => 4.0.1
gatsby-plugin-react-helmet: ^3.1.21 => 3.1.21
gatsby-plugin-react-svg: ^3.0.0 => 3.0.0
gatsby-plugin-sharp: ^2.4.3 => 2.4.3
gatsby-source-filesystem: ^2.1.46 => 2.1.46
gatsby-transformer-remark: ^2.6.53 => 2.6.53
gatsby-transformer-sharp: ^2.3.13 => 2.3.13
npmGlobalPackages:
gatsby-cli: 2.9.0

[herecydev]

I don't think that will work currently. There is a file watch on the gatsy-config.js but that's it

I'm not sure how feasible fixing it would be. Couple of solutions spring to mind:

1. Build an AST with something like https://github.com/dependents/node-detective-es6 and track deps
2. Pass some registration mechanism to allow the gatsby-config.js to register dependencies to watch

Both of these are really complex though. I think the best solution is to treat the gatsby-config.js as a simple means of stitching together which plugins/simple config is needed. If you need more than gatsby-source-filesystem can be used which will correctly apply file watches and perform hot reloading.

Hope that helps

[cyrilf]

Thanks for your quick answer.

Yes, I assumed the solution was going to be complex..

I used gatsby-source-filesystem to watch my json file already and the watch was working (I can see the log in the console), however gatsby-config doesn't seem to catch the changes (maybe because of the require statement? I don't know much about webpack behaviors).

Anyway, as a workaround, I'm using gatsby-transformer-json now to access my JSON data from a useStaticQuery in my components. This way I don't need the siteMetadata section from the gatsby-config.js file anymore. I don't know if it's a good approach but it meet my needs.

[herecydev]

It sounds like a great approach to me

[LekoArts]

Thank you for opening this!

As Dan already mentioned this is somewhat of a bad pattern to get your data. The config is read once at the beginning, afterwards you can't expect hot reloading. Using a useStaticQuery is totally valid and I would also recommend doing that.

We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!