Bug: Local development example projects - "you are breaking the rules of react"

[blakewilson]

Environment

• @faustwp/core version: N/A
• @faustwp/cli version: N/A
• @faustwp/blocks version:
• @faustwp/block-editor-utils version:
• WordPress version: N/A
• Browser, OS, and other relevant software versions:

Description

In the monorepo, we are increasingly getting the "you are breaking the rules of React" error, when multiple versions of React are present.

This seems to be related to how NPM resolves dependencies, by the "hoisting" method. Other package managers like PNPM or yarn have ways to modify this, but that doesn't seem to be the case with NPM.

Steps to Reproduce

Expected vs. Actual Behavior

Expected: you should be able to start the example project regardless of the React version. Actual behavior: you recieve an error if using a different version of react

[blakewilson]

It looks like NPM did recently release a flag --install-strategy=linked (like pnpm) to address this:

npm install --install-strategy=linked

But it did not work in my testing.

https://github.com/npm/cli/issues/6040 https://nodejs.org/en/blog/release/v19.6.0/#upgrade-npm-to-9-4-0

[blakewilson]

It may be worth migrating our package.json scripts and workflows to use pnpm instead.

https://pnpm.io/workspaces

This seems to be what a lot of what other large open source monorepos are using

[theodesp]

@blakewilson to make this work you will need to delete the node_modules inside your example projects. but I agree pnpm is better.

[nerdypinkbooks]

I'm also trying to install using --install-strategy=linked; I have tried via both .npmrc and CLI. I have 2 apps and a shared component library I'm working with. Without installing with the linked strategy I had:

Root/node_nodes:
	- react
	- react-dom
	apps
		app-a
			node_modules:
				- no react
		app-b
			node_modules
				- no react
	packages
		library
			node_modules
			      -no react

Now that I'm installing with the linked strategy I am seeing:

Root/node_nodes:
	- react@16
	- react-dom
	apps
		app-a
			node_modules:
				- - react@17
		app-b
			node_modules
				- no react
	packages
		library
			node_modules
			     -no react

At the top level of my monorepo we do have a bunch of shared dependencies defined but I even moved anything react-related to the separate workspaces. I have deleted my node_modules and package-lock.json. Is this a me-issue or are others also having this problem?

[nerdypinkbooks]

@blakewilson to make this work you will need to delete the node_modules inside your example projects. but I agree pnpm is better.

Have you tried this personally and it resolved your issues? I seem to still see hoisting occurring and am trying to figure out why/where it's coming from

[theodesp]

@blakewilson to make this work you will need to delete the node_modules inside your example projects. but I agree pnpm is better.

Have you tried this personally and it resolved your issues? I seem to still see hoisting occurring and am trying to figure out why/where it's coming from

Yes. I had to clean all my node_modules inside the example projects and start them from the root folder. Since there is no node_modules there will be no confusion about the react versions used.