Hi All,
I was trying to implement the TextfieldValidation
example from the UI Kit Texfield reference page in a Confluence macro, per:
React dependencies are as follows:
"dependencies": {
"@atlaskit/css-reset": "^6.6.2",
"@forge/bridge": "4.2.0",
"react": "^16",
"react-app-rewired": "^2.2.1",
"react-dom": "^16"
},
However, when this component is initiialized I am persistently getting the following React error:
when the following line is called
const [error, setError] = useState(undefined);
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://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.
Having gone through the list of known causes nothing seems to be obvioulsy wrong.
Thanks and regards,
Andrew
Hi @AndrewTyson,
I am not hitting the same error as you. For reference, I am using the following dependencies while on the latest Forge version (10.13.2)
"dependencies": {
"@forge/bridge": "4.2.0",
"@forge/react": "10.10.1",
"@forge/resolver": "1.6.3",
"react": "^18.2.0"
},
Although I was not hitting the same error you did, I did change something in the code to get the value from the textfield
const validate = (event) => { // changed value -> event since this is a FormEvent
const value = event.target.value; // in the docs, `value` was undefined since we need to get it from the event
if (value.length === 0) {
setError('This field is required');
} else {
setError(undefined);
}
};
...
Cheers,
Ian
1 Like
The dependencies listed in the original post don’t include @forge/react
, which would be necessary at > 10 for the validation to work, I believe. Assuming you have that, it does depend on React 18, so it’s possible specifying React 16 in your dependencies is causing the error. Or it’s possible useState
isn’t at the top level of the functional component or something. 
2 Likes
Thanks @ianRagudo adn @AaronCollier - believe that the problem is that I am trying to use the custom component in the Config pane. I notice that only a subset of UI Kit components are supported with limited field event support.
1 Like
If that’s the case, you might want to look into custom configuration for macros, a relatively new feature that lets you use any UI Kit components.
3 Likes