Estoy creando una biblioteca de componentes de reacción personalizada para compartir con otras aplicaciones. Estoy usando rollup y siguiendo este blog y algunos otros: https://dev.to/alexeagleson/how-to-create-and-publish-a-react-component-library-2oe
El fragmento relevante de mi configuración acumulativa es el siguiente:
export default [ { input: "src/index.ts", output: [ { file: packageJson.main, format: "esm", sourcemap: true } ], plugins: [ peerDepsExternal(), resolve(), terser() ], external: ["react", "react-dom"] } ]En mi paquete.json, moví react y react-dom de 'devDependencies' a 'peerDependencies'. Mi paquete abreviado.json:
{ "name": "custom components", "version": "1", "devDependencies": { ...stuff, (but not react/react-dom) }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" }, "main": "dist/esm/index.js", "files": ["dist"] } Luego, usando npm link mi biblioteca de componentes a otra aplicación que usa CRA y react-testing-library.
Hasta ahora esto funciona. Puedo renderizar mis componentes comunes como se esperaba.
Sin embargo, parece que mover react/react-dom fuera de devDependencies está haciendo que mis pruebas de broma fallen en ambos proyectos. En ambos casos broma no puede encontrar reaccionar. El resultado de Jest en mi CRA que importa los componentes es el siguiente:
Test suite failed to run Cannot find module 'react' from 'index.js' //<-- this is the index of the component library However, Jest was able to find: .../MyComponent.tsx You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['web.js',...etc] (defaults)Y cuando ejecuto mis pruebas en mi biblioteca de componentes comunes:
Test suite failed to run Cannot find module 'react' from 'MyComponent' import React from 'react'; ^No estoy seguro de cómo solucionar esto exactamente. Si muevo react/react-dom de regreso a devDependencies, las pruebas se ejecutarán correctamente, pero cualquier componente que use el estado de reacción no se procesará debido a las múltiples copias de React en el proyecto.
¿Podría ser un problema porque estoy usando el enlace npm en lugar de publicar la aplicación en npm e instalarla o es un problema con mi configuración acumulada/configuración de broma/paquete.json? Cualquier ayuda sería apreciada.
react y react-dom deben incluirse tanto en devDependencies como en peerDependencies de su biblioteca.
Incluirlos en devDependencies hace que estén disponibles al desarrollar (y al ejecutar pruebas), pero no se incluirán en la biblioteca cuando los empaque con Rollup (que es lo que desea).
Incluirlos en peerDependencies le dice a cualquier aplicación consumidora que "debe tener estas dependencias en el rango de versión especificado", pero nuevamente, Rollup no las incluye en el paquete de la biblioteca.
Si solo los incluye en peerDependencies , no se instalan cuando se desarrolla la biblioteca o se ejecutan las pruebas, aunque es posible que esto ya no sea cierto si usa npm v7 .
Puede encontrarse con el problema de tener múltiples versiones de React en su proyecto si su aplicación las incluye en una versión diferente a la de su biblioteca, pero si tanto la aplicación como la biblioteca tienen el mismo rango de versión, no debería tener ese problema.