Traté de crear un componente compartido usando un libro de cuentos con react-redux. Estoy usando rollup para crear un componente compartido. debido a algún error al no poder crear el componente compartido. paquete.json
{ "name": "story1", "version": "0.1.0", "private": false, "main": "./build/index.js", "module": "./build/index.es.js", "peerDependencies": { "react": "^17.0.1", "react-dom": "^17.0.1" }, "dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "@types/jest": "^26.0.15", "@types/node": "^12.0.0", "@types/react": "^16.9.53", "@types/react-dom": "^16.9.8", "react": "^17.0.1", "react-dom": "^17.0.1", "react-scripts": "4.0.1", "rollup": "2.30", "typescript": "^4.0.3", "web-vitals": "^0.2.4" }, "scripts": { "start": "start-storybook -p 6006 -s public", "build": "rollup -c", "test": "react-scripts test", "eject": "react-scripts eject", "build-storybook": "build-storybook -s public" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@rollup/plugin-commonjs": "^17.0.0", "@rollup/plugin-node-resolve": "^11.0.1", "@storybook/addon-actions": "^6.1.11", "@storybook/addon-essentials": "^6.1.11", "@storybook/addon-links": "^6.1.11", "@storybook/node-logger": "^6.1.11", "@storybook/preset-create-react-app": "^3.1.5", "@storybook/react": "^6.1.11", "rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-typescript2": "^0.29.0" } }resumen.config.js
import commonjs from "@rollup/plugin-commonjs"; import resolve from "@rollup/plugin-node-resolve"; import peerDepsExternal from "rollup-plugin-peer-deps-external"; import typescript from "rollup-plugin-typescript2"; import packageJson from "./package.json"; // eslint-disable-next-line import/no-anonymous-default-export export default { input: "./src/index.ts", output: [ { file: packageJson.main, format: "cjs", sourcemap: true }, { file: packageJson.module, format: "esm", sourcemap: true } ], plugins: [peerDepsExternal(), resolve(), commonjs(), typescript()] }; y ejecuto el comando yarn add stroy1 en mi otro repositorio.
cuando trato de usar este componente me sale un error
ERROR in ./node_modules/story1/build/index.es.js Module not found: Error: Can't resolve 'react/jsx-runtime' in '/Users/gowthamv/Documents/Workspace/my-app/node_modules/story1/build' @ ./node_modules/story1/build/index.es.js 1:0-56 47:12-15 52:12-15 52:38-42 52:98-102 52:123-126 52:245-249 52:316-319 53:36-39 54:36-39 55:24-27 56:16-19 56:47-50 56:127-131 56:132-140 56:155-158 57:28-31 62:12-16 62:41-44 63:12-16 63:41-44 64:20-24 64:84-87 64:201-204 65:20-23 66:20-24 66:44-47 67:28-31 68:20-24 68:108-111 68:286-289 69:20-24 69:84-87 69:207-210 69:329-332 69:398-401¿Cómo arreglar este error?
¿Cuál es la versión React del proyecto que importa el componente?
Recibí el mismo error y encontré 2 soluciones.
Use React < 17 & Typescript < 4.1.0 con el siguiente cambio de tsconfig:
"jsx": "react" // from jsx-reactUse React 17 tanto en la biblioteca como en el otro repositorio con
"jsx": "react-jsx"Actualizar su versión de reacción posiblemente pueda resolver su problema. Línea de comando: npm install --save react@latest .
Si desea especificar una versión, debe ejecutar: npm install --save react@ , por ejemplo, npm install --save react@17.0.2
Tuve un problema similar que no pude averiguar la causa. Para resolver este problema yo
Y mi proyecto volvió a funcionar. Creo que seguir esto podría ayudar a alguien con un problema similar.
No entiendo cual fue la causa principal del error ya que ocurrió sin razón tangible ya que el proyecto estaba funcionando bien y de repente apareció el error. Creo que el archivo se corrompió, y creo que la nueva transformación jsx a partir de reaccionar 17 resolvió el problema, ya que tener reaccionar en el alcance ya no era una necesidad absoluta para la compilación jsx. Los detalles sobre la nueva transformación jsx se pueden leer en https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html .