Minified React error #321 in v4.0.0

[ThiloAschebrock]

There seems to be an issue with version 4.0.0 that can crash the parent React app:

Error trace:

react-archer.js:2 Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at z (react-archer.js:2:1)
at useState (react-archer.js:2:1)
at react-archer.js:2:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)

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

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

This is probably related to #167. I can't pinpoint the error nor give a short example how to reproduce it.

[pierpo]

Uh-oh. I had a look at the code, I don't see any suspicious hook call. It's supposed to be an invalid useState but I don't see how.
Have you investigated the other reasons? (mismatching version, copies of React etc.)

Any other details? Like when does the error trigger in your app?

[ThiloAschebrock]

@pierpo You can find a minimal example that utilizes the first example of this repository at:

https://codesandbox.io/s/funny-grass-h84j3i

The issue might be related to using React 18, but in principle React 18 should be backward compatible.

[Thomas101]

Here's a sandbox that reproduces the error... https://codesandbox.io/s/gifted-sunset-r5zwrq?file=/src/index.js

react 18.0.0
react-dom 18.0.0
react-archer 4.0.4

import { createRoot } from "react-dom/client";
import { ArcherContainer } from "react-archer";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <div>
    <ArcherContainer />
  </div>
);

[Thomas101]

@ThiloAschebrock you beat me to it with seconds to spare 🙈

[ThiloAschebrock]

@ThiloAschebrock you beat me to it with seconds to spare see_no_evil

Oh no, how unlucky :) But your example is even more minimal, which is nice 👍🏻

[pierpo]

Amazing, many thanks to both of you! I need to investigate this asap!

[pierpo]

I think I got it. Looks like the devDependency version of react in react-archer gets included in the bundle.

react-archer/package.json

Line 80 in 2258a2b

"react": "16.9.0",

So, two instances of React live side by side and it makes the hooks go crazy (as said in the docs).

I found a solution by adding React externals in the Webpack configuration, but somehow it still includes React if it is found in the node_modules.
I could try generate a build this way, but I'd like to understand why it only works if React is completely removed from the devDependencies of react-archer...

+  externals: {
+    react: 'react',
+    reactDOM: 'react-dom',
+  },

More generally, I should probably question the presence of the examples directory in the repo which shares the same package.json as the lib. This is the reason why react is needed as devDependencies.

[pierpo]

Looks like adding skipLibCheck to the build tsconfig solves the issue... I have no idea why. The lib uses babel to transpile Typescript, I didn't think tsconfig.json would have any impact on the final build.

+  "compilerOptions": {
+    "skipLibCheck": true
+  },

[pierpo]

I just released 4.0.1. The issue should be solved 😊

I'd love to hear from you if it's the case.

Sorry about the delay with this, I was on holiday last week!

[Thomas101]

I can confirm that 4.0.1 fixes it in my use case 👍 . Thank you & hope you had a good holiday

[ngocducdim]

Oh god thanks for the update

[ThiloAschebrock]

I can also confirm that it is working 👍🏻

[pierpo]

Thank you all! Sorry again about the delay, this was a critical one hahaha

(and I did have a great holiday, thank you 🤗 )