gatsby-starter | Gatsby 2.0 starter with typescript and many cools

You may find this GitHub thread insightful. Following it, try using:

You can simply do : npm i gatsby-plugin-dark-mode --force

I could "gatsby develop" but I think when I'm adjusting photo data in "page-data.json" which stored public\page-data\index I "gatsby develop" won't start

You should never edit manually the content or the code inside the /public folder directly. Keep in mind how Gatsby works: when you run gatsby develop or gatsby build, webpack compiles and bundles everything under /src folder to create the /public one: this is autogenerated and it is rebuilt when you change anything on your /src folder. If you change anything inside the public folder manually without changing the source, it will be lost in the next compilation because the source doesn't includes the changes. So, all changes must be done in the /src folder.

In this case, the error is rising because you changed the public folder directly so the references of the assets page-data.json have changed.

To change the coffee.png image, you need to change the static folder. The static folder is a "special" folder that is cloned inside the public folder keeping the exact internal structure. As the name suggests, is very useful to use for static assets (the ones that rarely change).

Once you change the coffe.png image for your desired one, you just need to change the references of coffee.png to the new one (unless they are called the same).

That said, this kind of static change may force you to reload the gatsby develop (stop and rerun) process to see the changes. If the image still without changing, clean the cache by running gatsby clean before rerunning the gatsby develop command.

The problem is that you have Node 17.2.0. locally but in Netlify's environment, you are running a lower version (by default it's not set as 17.2.0). So the local environment is OK, Netlify environment is KO because of this mismatch of Node versions.

When Netlify deploys your site it installs and builds again your site so you should ensure that both environments work under the same conditions. Otherwise, both node_modules will differ so your application will have different behavior or eventually won't even build because of dependency errors.

You can easily play with the Node version in multiple ways but I'd recommend using the .nvmrc file. Just run the following command in the root of your project:

I think you need to install the peer dependencies due some mismatching between versions.

For example, React needs to be between ^15.0.0 and ^16.0.0 and found a 17.0.2:

You are mixing configurations between gatsby-node.js and gatsby-config.js. webpack-related configuration must be placed in gatsby-node.js while all plugin-related stuff must be placed in gatsby-config.js. Your final configuration should look like this:

In your gatsby-node.js:

As you can see in Adding a Custom webpack Config docs, stage value can mutate through:

• develop: when running the gatsby develop command. Has configuration for hot reloading and CSS injection into page

• develop-html: same as develop but without react-hmre in the babel config for rendering the HTML component.

• build-javascript: production JavaScript and CSS build. Creates route JavaScript bundles as well as common chunks for JavaScript and CSS.

• build-html: production build static HTML pages

So, yes, as you pointed, adding a simple condition should work to set the process/browse like:

In Gatsby, you can't define the webpack configuration like you did because Gatsby ships its own webpack.config.js as you can read in Gatsby's glossary.

However, Gatsby allows you to add a custom webpack configuration by exposing onCreateWebpackConfig method in your gatsby-node.js file.

So:

As you can see in Shadowing in Gatsby themes docs:

This feature allows users to replace a file in the src directory that is included in the webpack bundle with their own implementation. This works for React components, pages in src/pages, JSON files, TypeScript files, as well as any other imported file (such as .css) in your site.

The shadowing API uses a deterministic file structure approach to know which component should or shouldn't be rendered. In your case, you just can override the CSS props to display it as none, or you just shadow and return an empty component, since shadowing is used to extend Gatsby themes. Create a src/gatsby-theme-blog/components/Switcher/Switcher.js in your project and do something like: