Tengo un proyecto Webpack 5 React que contiene un componente de ejemplo en src/component/Simple.jsx :

 import React from 'react'; const Simple = () => { return ( <div> <h1>Simple</h1> </div> ) } export default Simple;

y desde src/lib.js lo importo y exporto por defecto:

 import Simple from "./components/Simple"; const lib = {Simple}; export default lib;

En la configuración del paquete web, uso src/lib.js como entrada y salida como

 output: { filename: '[name].js', path: path.join(__dirname, 'dist'), library: "mms", libraryTarget: "umd", },

Además, react y react-dom son peerDependencies y tienen alias para path.resolve y externals entry.

después de ejecutar webpack para una compilación, ejecuto una vez npm link en la raíz de la carpeta y npm link <package_name> en un nuevo proyecto que creé con la herramienta create-react-app .

Funciona bien y puedo importar el componente desde mi paquete.

El problema aparece cuando para mi paquete lib quiero usar un botón que se importa de una biblioteca de terceros, por ejemplo, carbon-components-react (https://github.com/carbon-design-system/carbon-components-react )

Agregué carbon-components-react a las dependencias de package.json (digamos que quiero enviarlo incluido), y agregué el componente <Button> al componente Simple y ejecuté build.

Ahora, en la aplicación cra , aparece este error:

 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 app

Entonces, si el componente de terceros usa un gancho... ¿Hay alguna forma de superarlo? o es el problema de más de una copia de React?

Los consejos son bienvenidos.