Invariant Violation: Hooks can only be called inside the body of a function component.

Hello,

I am experiencing this error below. To give some context:

• In the ux lib:
  • I pass BasicText and BasicCheckbox to styled (styled-component) to override css.
  • I define a TextField and CheckboxField to display label and error. (See below).
• In the react app:
  • Form is defined and I use the render props to pass my form component that host the fields.

React and React dom => 16.8.0 informed => 2.1.9

ux lib:

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  margin: 0 0 20px;
`;

const TextField = asField(({ label, fieldState, ...props }) => (
  <Wrapper>
    <Input fieldState={fieldState} {...props} />
    {label && <LabelInput>{label}</LabelInput>}
    {fieldState.error && fieldState.touched && <Error>{fieldState.error}</Error>}
  </Wrapper>
));

export default TextField;

ux lib:

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  margin: 0 0 20px;
`;

const WrapperCheckbox = styled.div`
  display: inline-flex;
`;

const CheckboxField = asField(({ label, fieldState, ...props }) => (
  <Wrapper>
    <WrapperCheckbox>
      <Checkbox fieldState={fieldState} {...props} />
      {React.isValidElement(label) ? label : label && <LabelInput>{label}</LabelInput>}
    </WrapperCheckbox>
    {fieldState.error && fieldState.touched && <Error>{fieldState.error}</Error>}
  </Wrapper>
));

export default CheckboxField;

ux lib:

const Input = styled(BasicText);

export default Input;

ux lib:

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 20vw;
  min-width: 400px;
  @media (max-width: 768px) {
    width: 80%;
    min-width: 0px;
  }
`;

const ViewCheckbox = styled.div`
  display: inline-flex;
`;

const ViewLink = styled.div`
  color: #a2d2f5;
  display: inline;
  cursor: pointer;
`;

const CreateAccountForm = ({ errors, goToLogin, goToMentions }) => (
  <Wrapper>
    <Title align="center" margin="0 0 40px 0" size="19px" weight="600">
      Créer mon compte
    </Title>
    <TextField
      error={errors.email}
      field="email"
      label="E-mail"
      placeholder="[e-mail]"
      required
      type="email"
    />
    <TextField
      error={errors.password}
      field="password"
      label="Mot de passe"
      margin="0 0 20px 0"
      placeholder="********"
      type="password"
    />
    <TextField
      error={errors.confirmPassword}
      field="confirmPassword"
      label="Confirmation"
      margin="0 0 10px 0"
      placeholder="********"
      type="password"
    />
    <ViewCheckbox>
      <CheckboxField
        error={errors.cgu}
        field="cgu"
        label={
          <Text>
            J&#8217;ai lu et j&#8217;accepte les{' '}
            <ViewLink onClick={goToMentions}>
              <Bold>conditions générales d&#8217;utilisation du service</Bold>
            </ViewLink>
          </Text>
        }
      />
    </ViewCheckbox>
    {errors.form && <Error>{errors.form}</Error>}
    <Button color="primary" fontSize="19px" margin="10px auto 20px auto" type="submit">
      Créer mon compte
    </Button>
    <Text
      align="center"
      color="#a6a6a6"
      cursor="pointer"
      margin="5px"
      onClick={goToLogin}
      weight="600"
    >
      J&#8217;ai déjà un compte
    </Text>
  </Wrapper>
);

react app

class CreateAccountFormContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onValidateFields = ({ cgu, email, password, confirmPassword }) => ({
    cgu: cguValidator(cgu),
    email: emailValidator(email),
    password: passwordValidator(password),
    confirmPassword:
      password === confirmPassword ? null : 'Les deux mots de passe ne correspondent pas.',
  });

  render() {
    const { error, onSubmit } = this.props;
    return (
      <Form
        onSubmit={onSubmit}
        render={({ formState }) => (
          <CreateAccountForm errors={{ form: error, ...formState.errors }} {...this.props} />
        )}
        validateFields={this.onValidateFields}
      />
    );
  }
}

Invariant Violation: Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)
    at invariant (http://localhost/static/js/main.chunk.js:121537:23)
    at resolveDispatcher (http://localhost/static/js/main.chunk.js:122922:36)
    at useRef (http://localhost/static/js/main.chunk.js:122956:28)
    at useStateWithGetter (http://localhost/static/js/main.chunk.js:39121:71)
    at useField (http://localhost/static/js/main.chunk.js:39161:35)
    at http://localhost/static/js/main.chunk.js:39417:27
    at renderWithHooks (http://localhost/static/js/0.chunk.js:70682:22)
    at mountIndeterminateComponent (http://localhost/static/js/0.chunk.js:72686:17)
    at beginWork (http://localhost/static/js/0.chunk.js:73237:20)
    at performUnitOfWork (http://localhost/static/js/0.chunk.js:77166:16)
    at workLoop (http://localhost/static/js/0.chunk.js:77207:28)
    at renderRoot (http://localhost/static/js/0.chunk.js:77287:11)
    at performWorkOnRoot (http://localhost/static/js/0.chunk.js:78232:11)
    at performWork (http://localhost/static/js/0.chunk.js:78142:11)
    at performSyncWork (http://localhost/static/js/0.chunk.js:78116:7)
    at requestWork (http://localhost/static/js/0.chunk.js:77971:9)
    at scheduleWork (http://localhost/static/js/0.chunk.js:77778:9)
    at scheduleRootUpdate (http://localhost/static/js/0.chunk.js:78482:7)
    at updateContainerAtExpirationTime (http://localhost/static/js/0.chunk.js:78508:14)
    at updateContainer (http://localhost/static/js/0.chunk.js:78576:14)
    at ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (http://localhost/static/js/0.chunk.js:78889:7)
    at http://localhost/static/js/0.chunk.js:79041:18
    at unbatchedUpdates (http://localhost/static/js/0.chunk.js:78359:14)
    at legacyRenderSubtreeIntoContainer (http://localhost/static/js/0.chunk.js:79037:9)
    at Object.render (http://localhost/static/js/0.chunk.js:79112:16)
    at boot (http://localhost/static/js/main.chunk.js:207505:52)
    at http://localhost/static/js/main.chunk.js:207517:10

[joepuzzo]

For others that run inot issue where npm linking informed throws this error, add the following to your webpack config.

resolve: {
    alias: {
      react: require.resolve('react')
    }
  }

[ppinel]

Hello, I have fixed the issue by setting react, react-dom and informed at the root level of my mono repository. I am not using webpack anymore for my ui library but babel. Thank you @joepuzzo for your help.