Gatsby doesn't update theme when modified in node_modules

Question

I'm developing my own gatsby.js theme (actually I've forked and modified another theme, then created new npm package for it). When I change any theme file in node_modules, for example footer.js, I don't see any changes while running gatsby develop until I delete cache with gatsby clean. In the past (2 years ago) when I was making first changes to my npm module, everything was updating as it should. I must also mention that I've cleaned node_modules and updated all dependencies with yarn to the latest available versions.

For example, I'm making this change:

<p className="text-lead"><b>Last modified</b> {lastUpdate}</p>

to

<p className="text-lead"><b>Last change</b> {lastUpdate}</p>

Then gatsby develop detects change:

success onPreExtractQueries - 0.004s
success extract queries from components - 0.128s
success write out requires - 0.003s
success Re-building development bundle - 0.198s
success Writing page-data.json and slice-data.json files to public directory - 0.014s - 0/1 73.40/s

But I see no change in the browser window until I run gatsby clean.

Here's part of my gatsby-config.js at root project folder:

...
plugins: [
      {
        resolve: "@arturthemaslov/gatsby-theme-intro-maslov",
        options: {
          basePath: pathPrefix,
          contentPath: "content/",
          showThemeLogo: false,
          theme: "gh-inspired",
        },
      },
...

Also, I've noticed this warning when running gatsby develop:

warn The @arturthemaslov/gatsby-theme-intro-maslov plugin has generated no Gatsby nodes. Do you need it? This could also suggest the plugin is misconfigured.

Maybe that's something to do with this problem? I've also tried ghosting parts of theme plugin by putting theme files into root src folder, but no luck.

DᴀʀᴛʜVᴀᴅᴇʀ · Answer 1 · 2022-11-29T21:15:15.013

0

Reason why it isn't working is because you shouldn't be modifying anything in the node_modules directory and when you:

I must also mention that I've cleaned node_modules and updated all dependencies with yarn to the latest available versions.

You just reverted or updated every dependency within the node_modules directory and if you updated to the latest you need to go through every dependency and see if you have any conflicts which you likely do.

Do note you're also using a theme with Gatsby "^2.20.12" and Gatsby is now on version "^5.2.0".

You also mentioned in the comments you're updated the NPM package while the repository source code is dated a few years. Do not think this is a good approach and you should look at building a release and using the Github Action NPM Publish

edited Nov 29 '22 at 21:15

answered Nov 29 '22 at 20:06

DᴀʀᴛʜVᴀᴅᴇʀ

7,681
17
73
127

I'm updating my npm package accordingly, and it has latest dependencies. Github is out of date :) https://www.npmjs.com/package/@arturthemaslov/gatsby-theme-intro-maslov – Neone Nov 29 '22 at 20:11
So, how should I update theme files then if neither ghosting nor node_modules change isn't reflected in the browser? – Neone Nov 29 '22 at 20:12
1) Not a good practice to have a public repo outdated and to only have the NPM package updated. 2) I would assume to build the theme follow the docs and create YAML files as it specifies, reference [Edit Content](https://github.com/neone35/gatsby-theme-intro-maslov#edit-content) – DᴀʀᴛʜVᴀᴅᴇʀ Nov 29 '22 at 20:23
1

Would suggest looking to implement the Github Action: [NPM Publish](https://github.com/marketplace/actions/npm-publish) – DᴀʀᴛʜVᴀᴅᴇʀ Nov 29 '22 at 20:34
But why did it work 2 years ago by editing node_modules and now it doesn't? I was publishing npm package straight from node_modules. What changes were made to gatsby? – Neone Nov 29 '22 at 20:55
You updated everything in `node_modules` with yarn so any security updates for those versions were updated. Would suggest learning about what can be updated in a package.json dependency tree: https://stackoverflow.com/a/25861938/1952287 – DᴀʀᴛʜVᴀᴅᴇʀ Nov 29 '22 at 21:10
I've just noticed that HMR starts to work after I change theme gatsby-config.js. Until this no matter what file I change, for example footer.js, I see no output neither in cmd nor browser console. Is it some kind of bug or what? I just make like 1 char change and revert. – Neone Nov 30 '22 at 18:15

Gatsby doesn't update theme when modified in node_modules

1 Answers1