web-dev-qa-db-fra.com

React hooks dans la bibliothèque react donnant une erreur d'appel de hook non valide

Je crée une bibliothèque React en utilisant https://www.npmjs.com/package/create-react-library Et je l'ai utilisé avec succès sur d'autres projets React. Mais quand J'ai essayé d'utiliser les fonctionnalités de react hooks dans la bibliothèque, cela me donne l'erreur suivante.

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

Ma bibliothèque J'ai juste essayé d'utiliser useState comme suit dans mon composant.

import React, { useState } from 'react'

const General = (props) => {

    const [count, setCount] = useState(0);
    return (
        <div>
           General component
        </div>
    )
}

export default General

J'utilise "react": "^16.8.6" et "react-dom": "^16.8.6"

Mon React APP Créé une application en utilisant https://github.com/facebook/create- react-app et utilisé au-dessus de la bibliothèque comme suit.

import Reactfrom 'react'
import { General } from 'my.lib'
const accountSummary = props => {

  return (
    <div>
      <General>
    </div>
  )
}

export default accountSummary

Les deux ont les mêmes versions de react et la bibliothèque a utilisé les mêmes versions de react-dom et react que peerDependencies

reactjsreact-router-domreact-hooks
8
Janith Widarshana

J'ai créé une bibliothèque React avec create-react-library cette bibliothèque est votre composant General. Je l'ai publié sur npm ici https://www.npmjs.com/package/stackoverflow-test et une application React pour l'utiliser ici https://codesandbox.io/s/mm7yl83o28 .

Cliquez simplement sur General component le texte et count seront incrémentés.

Je ne peux pas reproduire votre problème, utilisez simplement ce test pour vérifier votre implémentation.

1
F.bernal

J'incluais ma bibliothèque de composants (d'ailleurs n'importe quelle bibliothèque) dans mon application comme @Janith l'a fait en utilisant my-comp-lib:"file:../.." (Je ne veux pas publier à chaque fois que je veux tester) et j'ai rencontré le même problème.

Appel de raccordement non valide. Les crochets ne peuvent être appelés qu'à l'intérieur du corps d'un composant de fonction. Cela peut se produire pour l'une des raisons suivantes:

  1. Vous pouvez avoir des versions incompatibles de React et du moteur de rendu (tel que React DOM)
  2. Vous violez peut-être les règles des crochets
  3. Vous pouvez avoir plus d'une copie de React dans la même application. Voir react-invalid-hook-call pour des conseils sur la façon de déboguer et

résoudre ce problème

J'ai pu résoudre ce problème en faisant pointer mon application et ma bibliothèque vers le même emplacement de réactif (package).

Below are the steps I followed :
1. In Your Application:
a) cd node_modules/react && npm link
b) cd node_modules/react-dom && npm link

2. In Your Library
a) npm link react
b) npm link react-dom

3)Stop your dev-server and do `npm start` again.

Ça marche!!

Veuillez vous référer aux liens ci-dessous pour plus de détails.

https://github.com/facebook/react/issues/14721

https://github.com/facebook/react/pull/1469

https://github.com/facebook/react/issues/13991

Remarque: Ce problème ne se produira pas si vous publiez votre package sur artifactory et installez, car vous aurez react & react-dom en tant que dépendances entre pairs et ils ne seront pas inclus dans la distribution. Ainsi, votre package et votre application utilisent le même React qui est installé dans l'application.

10
Yugandhar Pathi

Peut-être que cela sera utile:

Lien - comment créer un package npm de composant React avec un exemple

1
Michał

Cela a fonctionné pour moi lorsque j'ai changé le lien de l'application vers la bibliothèque pour qu'il devienne "link: ../" au lieu de "file: ../", en plus de lier react et react-dom.

1
oligopol

Je viens de rencontrer le même problème. J'ai pu le corriger en pointant la même réaction dans mon exemple d'application que dans ma bibliothèque:

Structure de l'application

Root

  • Exemple
    • package.json
  • src (bibliothèque)
  • package.json

Donc, à partir de l'exemple> package.json, j'ai changé de réagir pour être:

    "react": "link:../node_modules/react",

Cela ressemble beaucoup au npm link répertorié ci-dessus, mais il ne disparaîtra pas à chaque installation de npm.

0
busyPixels