TextfieldValidation - react error

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. :person_shrugging:

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