Как избежать ошибки Invalid hook call при использовании UI библиотеки компонентов на хуках?

Question

[Absky]

Есть приложение на Next.js 12 с React 17.0.2 под капотом.

Есть библиотека ui компонентов написанная в функциональном подходе на TS с использованием хуков, так же на React 17.0.2. С пир депенденси на React 17.0.2.

Все компоненты билдятся в один index.js в dist.

При запуске приложения с этой библиотекой имею ошибку Invalid hook call с перечислением трех возможных причин и ссылкой на доку. Все правила использования хуков соблюдены.

Comments

[Alexandroppolus]

Все правила использования хуков соблюдены.

без примеров кода, на которые ругается реакт, это всего лишь слова.

[Absky]

Запросто предоставлю любой пример кода, если поможет делу, что именно нужно?

[Absky]

error - Error: 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.
at ce (C:\dev\life\node_modules\@frontend\uikit-rbc\dist\index.js:6:17199)
at Object.t.useState (C:\dev\life\node_modules\@frontend\uikit-rbc\dist\index.js:6:30072)
at exports.Shaker (C:\dev\life\node_modules\@frontend\uikit-rbc\dist\index.js:6:183307)
at processChild (C:\dev\life\node_modules\react-dom\cjs\react-dom-server.node.development.js:3353:14)
at resolve (C:\dev\life\node_modules\react-dom\cjs\react-dom-server.node.development.js:3270:5)
at ReactDOMServerRenderer.render (C:\dev\life\node_modules\react-dom\cjs\react-dom-server.node.development.js:3753:22)
at ReactDOMServerRenderer.read (C:\dev\life\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29)
at Object.renderToString (C:\dev\life\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27)
at Object.renderPage (C:\dev\life\node_modules\next\dist\server\render.js:680:46)
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.
at ce (C:\dev\life\node_modules\@frontend\uikit-rbc\dist\index.js:6:17199)
at Object.t.useState (C:\dev\life\node_modules\@frontend\uikit-rbc\dist\index.js:6:30072)
at exports.Shaker (C:\dev\life\node_modules\@frontend\uikit-rbc\dist\index.js:6:183307)
at processChild (C:\dev\life\node_modules\react-dom\cjs\react-dom-server.node.development.js:3353:14)
at resolve (C:\dev\life\node_modules\react-dom\cjs\react-dom-server.node.development.js:3270:5)
at ReactDOMServerRenderer.render (C:\dev\life\node_modules\react-dom\cjs\react-dom-server.node.development.js:3753:22)
at ReactDOMServerRenderer.read (C:\dev\life\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29)
at Object.renderToString (C:\dev\life\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27)
at Object.renderPage (C:\dev\life\node_modules\next\dist\server\render.js:680:46)
at Object.defaultGetInitialProps (C:\dev\life\node_modules\next\dist\server\render.js:350:67) {
page: '/'
}

[Absky]

export const Shaker: React.FC<ShakerProps> = (props) => {
  const { items, loadMore, style, className, customLink } = props;

  const [componentState, setComponentState] = React.useState<ShakerState>({
  ...
  });

  return (
   <ShakerSlideItem
      cards={componentState.cards}
      isActionDisabled={componentState.isActionDisabled}
      showMoreClickHandler={showMoreClickHandler}
      description={getCurrentDescription(componentState.cards)}
      style={style}
      className={className}
      customLink={customLink}
    />
  );
};

[Absky]

Используется компонент Shaker внутри функционального дамб компонента.

[szQocks]

Absky, что в

const [componentState, setComponentState] = React.useState<ShakerState>({
  ... тут ?
  });

[Absky]

szQocks, там просто объект длинный
{
cards: {
itemOne: {
order: 1,
isSlided: false,
slideData: items[3],
},
itemTwo: {
order: 2,
isSlided: false,
slideData: items[2],
},
itemThree: {
order: 3,
isSlided: false,
slideData: items[1],
},
itemFour: {
order: 4,
isSlided: false,
slideData: items[0],
},
},
newItem: items[4],
isActionDisabled: false,
clickCount: 4, // т.к. четыре элемента картоек уже в наборе выше
}

[szQocks]

Absky, понял, вроде бы я вспомнил почему может вылететь такая ошибка, скорее всего у тебя этот компонент рендериться в компонент выше - в котором после условия - ты обновляешь стейт, покажи где этот компонент отрисовывается, раз ты думаешь что ошибка в нём

[szQocks]

Absky, где сам shaker отрисовывается, или покажи весь компонент shaker если там условия есть, но ты их сюда не написал в вопросе

[szQocks]

Absky, кароч посмотри есть ли у тебя компоненты где ты после условия - манипулируешь какими-либо хуками например

const Component = ({ name }) => {
 if(!name) return null;
 React.useEffect(() => {
 ... тут вылетает ошибка как раз таки та что у тебя в косоле, если не ошибаюсь
}, [])

типа если после условия есть хуки то жди беды

[Absky]

szQocks, Я не думаю что ошибка в компоненте где используется Shaker, т.к. там вообще условий минимум

export const SpecialBlockSlider: React.FC<SpecialBlockSliderProps> = ({ block }) => {
  const somePropsUndefined =
    !block || !block?.item || !block?.item?.publisher || !block?.item?.publisher?.items || !block?.item?.publisher?.items?.length;

  if (somePropsUndefined) {
    return null;
  }

  const {
    rubric, title,
  } = block.item;
  const itemsProps = getSlides({
    publisherItems: block.item.publisher.items, rubric,
  });


  return (
    <article className="gutter gutter-t-0 ov-h">
      <SectionHeader title={title} type="l" />

      <div className="gutter-b">
        <Shaker items={itemsProps} loadMore={() => null} customLink={Link} />
      </div>
    </article>
  );
};

[szQocks]

Absky, смотри у тебя после условия идёт какая-то функция, попробуй условия в конец убрать , пусть они там по порядку будут, может и на функцию так реагирует, честно не знаю

const {
    rubric, title,
  } = block.item;
  const itemsProps = getSlides({
    publisherItems: block.item.publisher.items, rubric,
  });

    return null;
  }

  if (somePropsUndefined) {
    return null;
  }

[szQocks]

Absky, кстати

return null;
  }

с этим вообще не понятно, это что опечатка ? в общем разберись с компонетом этим, смотри что бы после условий небыло хуков и функций каких-либо

[Absky]

szQocks, Спасибо, вероятно где-то закралась ошибка в порядке использования хуков и условий, буду копать в эту сторону.

[szQocks]

Absky, может полезно будет, почитай как-нибудь https://webformyself.com/rasprostranennye-oshibki-...