Clean Gatsby 5.2 Install throwing `NPM WARN` flags for `react-server-dom-webpack`

Question

After a clean Gatsby 5.2 install using the Gatsby CLI, I need help understanding my terminal output, which shows a multitude of NPM WARN flags.

I have three questions;

1. What is the cause of these errors?
2. Why are these errors happening with a clean install?
3. What is the preferred method for resolving issues like these?

I'm asking these questions here on S.O. because I'd like to pre-emptively learn how to understand and deal with them correctly.

I read up on some similar questions here on S.O., and some recommend using the --legacy-peer-deps flag.

I understand why someone might use the --legacy-peer-deps flag in general, but I'm struggling to understand why a new release, I.e. (Gatsby 5.0), needs to use the --legacy-peer-deps.

NPM errors are still a pain point for me, so I'm looking for easy-to-understand reading material. Or a well-rounded explanation if possible.

After running: gatsby info --clipboard

% gatsby info --clipboard

  System:
    OS: macOS 13.0.1
    CPU: (16) x64 Intel(R) Xeon(R) W-2140B CPU @ 3.20GHz
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
  Browsers:
    Chrome: 108.0.5359.98
    Safari: 16.1
  npmPackages:
    gatsby: ^5.2.0 => 5.2.0
    gatsby-plugin-image: ^3.2.0 => 3.2.0
    gatsby-plugin-manifest: ^5.2.0 => 5.2.0
    gatsby-plugin-sharp: ^5.2.0 => 5.2.0
    gatsby-source-filesystem: ^5.2.0 => 5.2.0
    gatsby-transformer-sharp: ^5.2.0 => 5.2.0
  npmGlobalPackages:
    gatsby-cli: 5.2.0

%

The expected result after running: npm i

% npm i

removed 1505 packages, and audited 83 packages in 8s

20 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
% 

Actual result after running: npm i

% npm i
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   react@"^18.2.0" from the root project
npm WARN   10 more (react-dom, gatsby, gatsby-plugin-image, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"0.0.0-experimental-c8b778b7f-20220825" from [email protected]
npm WARN node_modules/react-server-dom-webpack
npm WARN   react-server-dom-webpack@"0.0.0-experimental-c8b778b7f-20220825" from [email protected]
npm WARN   node_modules/gatsby
npm WARN 
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"0.0.0-experimental-c8b778b7f-20220825" from [email protected]
npm WARN   node_modules/react-server-dom-webpack
npm WARN     react-server-dom-webpack@"0.0.0-experimental-c8b778b7f-20220825" from [email protected]
npm WARN     node_modules/gatsby
npm WARN deprecated [email protected]: No longer maintained. Use [lru-cache](http://npm.im/lru-cache) version 7.6 or higher, and provide an asynchronous `fetchMethod` option.
npm WARN deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.

added 1505 packages, and audited 1588 packages in 1m

325 packages are looking for funding
  run `npm fund` for details

15 moderate severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
% 

Answer 1

My Own Conclusion:

After some research, I found that Gatsby requires an experimental build of react-server-dom-webpack for partial hydration. This can be confirmed by examining the package.json file in node_modules/react-server-dom-webpack in my project.

Upon comparing it with the official package.json file, I noticed that the two files have different configurations. To better understand this, I created an issue in the Gatsby repository. You can find the issue here.

In summary, Gatsby is currently using an experimental version of react-server-dom-webpack, which sets an experimental version of React as a peer dependency.