Estoy desarrollando una pequeña biblioteca de reacción ui. Estoy usando Rollup como paquete. y me enfrenté a un problema extraño:

 react.development.js:1476 Uncaught 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

Aquí está mi configuración de resumen:

 import babel from "rollup-plugin-babel"; import resolve from "@rollup/plugin-node-resolve"; import external from "rollup-plugin-peer-deps-external"; import { terser } from "rollup-plugin-terser"; import postcss from "rollup-plugin-postcss"; import typescript from "rollup-plugin-typescript2"; import peerDepsExternal from "rollup-plugin-peer-deps-external"; const packageJson = require("./package.json"); export default [ { input: ["./src/index.ts"], output: [ { file: packageJson.main, format: "cjs", sourcemap: true, }, { file: packageJson.module, format: "esm", sourcemap: true, }, ], globals: { react: "React", "react-dom": "ReactDOM", }, external: ["react", "react-dom"], plugins: [ peerDepsExternal({ includeDependencies: false }), postcss({ plugins: [], minimize: true, }), babel({ exclude: "node_modules/**", presets: ["@babel/preset-react"], }), external(), resolve(), typescript({ useTsconfigDeclarationDir: true }), terser(), ], }, ];

El componente en sí es muy simple. Nada especial, así que me estoy saltando su código. Cuando estoy publicando mi lib en NPM, todo funciona exactamente como se esperaba.

Pero cuando estoy haciendo una instalación local con

 npm i ../my-local-lib I have this error in console:

react.development.js:1476 Error no detectado: Llamada de gancho no válida. Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función. Esto podría suceder por una de las siguientes razones:

1. Es posible que tenga versiones que no coincidan de React y el renderizador (como React DOM)
2. Podrías estar rompiendo las Reglas de los Hooks
3. Es posible que tenga más de una copia de React en la misma aplicación

Mi expectativa era que el complemento peerDepsExternal manejaría este caso, pero obviamente me equivoqué en alguna parte.