TextInput and Password components throwing Error: Invalid hook call.

[mgeeforce]

Running the Node Explorer front end w/o packaging using "npm start" is failing due to an invalid hook call error being thrown by the TextInput and Password components on the landing page.

Assuming that the code is not breaking the Rules of Hooks this means mismatched versions of React and ReactDom or multiple versions of React being included in the app - but I don't think I am seeing that.

Running node 17.2.0 with npm 8.3.0. Output of "npm ls react" and "npm ls react-dom" below.

Full disclosure - to get the build to succeed I had to modify r3-tooling-design-system/r3-tooling-design-system-dev/package.json by changing:

"prepare": "husky install",

to

"prepare": "cd ../.. && husky install",

as without this change the build would fail with a "no .git found" error but don't believe that should have adverse effects.

node-explorer$ npm ls react --depth=1
[email protected] /node-explorer
├─┬ @material-ui/[email protected]
│ └── [email protected] deduped
├─┬ @material-ui/[email protected]
│ └── [email protected] deduped
├─┬ r3-tooling-design-system@npm:@r3/[email protected] -> ./r3-tooling-design-system/r3-tooling-design-system-dev
│ └── [email protected]
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├── [email protected]
└─┬ [email protected]
  └── [email protected] deduped

node-explorer$ npm ls react-dom --depth=1
[email protected] /node-explorer
├─┬ @material-ui/[email protected]
│ └── [email protected] deduped
├─┬ @material-ui/[email protected]
│ └── [email protected] deduped
├─┬ r3-tooling-design-system@npm:@r3/[email protected] -> ./r3-tooling-design-system/r3-tooling-design-system-dev
│ └── [email protected]
├── [email protected]
└─┬ [email protected]
  └── [email protected] deduped

[pgrindean]

Having the same issue, did you find a way around it?

[mgeeforce]

No sorry - I gave up on it.

[pgrindean]

Found to be caused by the inconsistent versions of the "react" imports :

node-explorer/package.json: "react": "^16.12.0", "react-dom": "^16.12.0",

node-explorer/r3-tooling-design-system/r3-tooling-design-system-dev/package.json: "react": "^17.0.2", "react-dom": "^17.0.2"

Resolution:

Changed the node-explorer/package.json to use the 17.0.2 version also.

[pgrindean]

I also came upon a serialization issue manifested as below:

        net.corda.nodeapi.RPCApi$ServerToClient$FailedToDeserializeReply: Failed to deserialize RPC reply: Class "class net.corda.core.schemas.PersistentStateRef" is not on the whitelist or annotated with @CordaSerializable.
	        at net.corda.nodeapi.RPCApi$ServerToClient$Companion.fromClientMessage(RPCApi.kt:242) ~[corda-node-api-4.8.jar:na]
	        at net.corda.client.rpc.internal.RPCClientProxyHandler.artemisMessageHandler(RPCClientProxyHandler.kt:401) [corda-rpc-4.8.jar:na]
	        at net.corda.client.rpc.internal.RPCClientProxyHandler.access$artemisMessageHandler(RPCClientProxyHandler.kt:99) [corda-rpc-4.8.jar:na]

Resolution: whitelisted PersistentStateRef class:

• Definition:

            Kotlin:

                class MySerializationWhitelist: SerializationWhitelist {
                    override val whitelist = listOf(PersistentStateRef::class.java)
                } 

            Java:

                public class MySerializationWhitelist implements SerializationWhitelist {
                    public List<Class<?>> getWhitelist() {
                        return Arrays.asList(PersistentStateRef.class);
                    }
                }

• Declaration:

    by:
    ./node-explorer-server/src/main/resources/META-INF/services/net.corda.core.serialization.SerializationWhitelist

    with content:
    com.xxx.MySerializationWhitelist