Lerna / React Hooks isssue (unsure)

I am still experiencing this issue—has a solution been implemented yet?

I have a very simple Lerna monorepo with 2 packages: xrc and xrc-app

xrc is the package I’m publishing to NPM and xrc-app is the docs website/app for xrc

xrc-app is private and uses react-static

https://github.com/wagerfield/xrc

I have purposefully removed react and react-dom as dependencies from both xrc and xrc-app to be absolutely sure that the issue I’m experiencing isn’t related to multiple versions of react being installed.

After running yarn from the root of the monorepo to install the dependencies, I then run yarn why react and get:

yarn why v1.16.0
[1/4] 🤔  Why do we have the module "react"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "react@16.8.6"
info Reasons this module exists
   - "_project_#xrc-app#react-static" depends on it
   - Hoisted from "_project_#xrc-app#react-static#react"
info Disk size without dependencies: "248KB"
info Disk size with unique dependencies: "564KB"
info Disk size with transitive dependencies: "648KB"
info Number of shared dependencies: 6

This clearly shows that I only have one version of react installed (16.8.6) which is the result of react-static listing it as a dependency.

Since the xrc-app lives inside the packages dir, it uses the local version of xrc rather than the one published to NPM. Therefore, before you can build the React Static site, you must run yarn bundle from the root of the monorepo. This will compile the TypeScript in the xrc package using Rollup into cjs and esm bundles in the xrc package that xrc-app can then import and use.

After running yarn bundle you can now run all of the app:* related scripts from the monorepo root.

When you run yarn app:start from the monorepo root, it will run the start script in the xrc-app package which in turn calls react-static start to start the development server. This works absolutely fine and you will be able to see the WIP site at localhost:5000

However, when you run yarn app:stage or yarn app:build from the monorepo root it will get as far as compiling all the JS bundles, but then it hangs and eventually fails when exporting the HTML.

I then get the error:

Invariant Violation: Failed exporting HTML Minified React error #321

https://reactjs.org/docs/error-decoder.html?invariant=321

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

As mentioned above, running yarn why react and yarn why react-dom from the monorepo root will show that only one version of both react and react-dom are installed and that they are the same version of 16.8.6.

Therefore I would assume that I’m not falling foul of point 1 or 3. Furthermore, I’m not using hooks anywhere in my application code.

If it is an issue with React hooks, then perhaps it’s coming from React Static?

The strange thing I have found is that if I copy and paste the xrc-app package onto my desktop so that it’s completely removed from the Lerna monorepo and run yarn or npm install inside the package so react-static et al are installed and xrc is pulled from NPM rather than the local monorepo version, then the build and stage scripts work.

I’ve been battling with this one all day and could really use some help please 😄

Thanks in advance!

_Originally posted by @wagerfield in https://github.com/nozzle/react-static/issues/1021#issuecomment-499607184_

[DBosley]

I came across this issue while debugging an unrelated problem. Maybe try hoisting the dependencies: lerna bootstrap —hoist

This comment right here led me on the path that let me bypass this issue. This issue seems to be due to react-static not working well with hoisted dependencies. In my case, we’re using yarn workspaces + lerna to handle our monorepo. Because all of our workspace packages use the same version of react and react-dom, it hoists the dependency files to REPO_ROOT/node_modules. I noticed that when I upgraded react and react-dom in the package that uses react-static but left it alone in others, it began building correctly. When I upgraded everything, it stopped working again.

So the solution I found was to specify react and react-dom to not be hoisted for this specific package. For yarn workspaces, this is as simple as adding this configuration to the package.json of the workspace project that uses react-static:

  "workspaces": {
    "nohoist": ["react","react/**","react-dom","react-dom/**"]
  },

I don’t know the correct way to do this if you aren’t using yarn or yarn workspaces, but hopefully this helps someone.

[danwbyrne]

@wagerfield I am running into this exact issue right now while migrating to rush https://github.com/neo-one-suite/neo-one/tree/rush (still using yarn). Has there been any development on this?

Using react-static@7.1.0 our website starts perfectly fine with react-static start however when trying to build with react-static build --staging it fails with the above invariant error. I have checked our yarn.lock for react/react-dom duplications but we definitely only have one version installed.

This is especially strange since if it WAS an honest invariant error, why would it not come up in our current version of the website (uses yarn workspaces) that uses the same component libraries?

Any pointers in the right direction would be appreciated.