{"id":783,"hash":"48865025575b8a1734e5851a47705c3d7463c9e08c5a33e345a9142039ddd0aa","pattern":"got Can&#39;t resolve &#39;react/jsx-runtime&#39; error while use try to create the shared component with storybook in react-typescript","full_message":"I tried to create a shared component using a storybook with react-redux. I am using rollup to create a shared component. due to some error unable to create the shared component.\npackage.json\n\n{\n  \"name\": \"story1\",\n  \"version\": \"0.1.0\",\n  \"private\": false,\n  \"main\": \"./build/index.js\",\n  \"module\": \"./build/index.es.js\",\n  \"peerDependencies\": {\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"dependencies\": {\n    \"@testing-library/jest-dom\": \"^5.11.4\",\n    \"@testing-library/react\": \"^11.1.0\",\n    \"@testing-library/user-event\": \"^12.1.10\",\n    \"@types/jest\": \"^26.0.15\",\n    \"@types/node\": \"^12.0.0\",\n    \"@types/react\": \"^16.9.53\",\n    \"@types/react-dom\": \"^16.9.8\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"react-scripts\": \"4.0.1\",\n    \"rollup\": \"2.30\",\n    \"typescript\": \"^4.0.3\",\n    \"web-vitals\": \"^0.2.4\"\n  },\n  \"scripts\": {\n    \"start\": \"start-storybook -p 6006 -s public\",\n    \"build\": \"rollup -c\",\n    \"test\": \"react-scripts test\",\n    \"eject\": \"react-scripts eject\",\n    \"build-storybook\": \"build-storybook -s public\"\n  },\n  \"eslintConfig\": {\n    \"extends\": [\n      \"react-app\",\n      \"react-app/jest\"\n    ]\n  },\n  \"browserslist\": {\n    \"production\": [\n      \">0.2%\",\n      \"not dead\",\n      \"not op_mini all\"\n    ],\n    \"development\": [\n      \"last 1 chrome version\",\n      \"last 1 firefox version\",\n      \"last 1 safari version\"\n    ]\n  },\n  \"devDependencies\": {\n    \"@rollup/plugin-commonjs\": \"^17.0.0\",\n    \"@rollup/plugin-node-resolve\": \"^11.0.1\",\n    \"@storybook/addon-actions\": \"^6.1.11\",\n    \"@storybook/addon-essentials\": \"^6.1.11\",\n    \"@storybook/addon-links\": \"^6.1.11\",\n    \"@storybook/node-logger\": \"^6.1.11\",\n    \"@storybook/preset-create-react-app\": \"^3.1.5\",\n    \"@storybook/react\": \"^6.1.11\",\n    \"rollup-plugin-peer-deps-external\": \"^2.2.4\",\n    \"rollup-plugin-typescript2\": \"^0.29.0\"\n  }\n}\n\nrollup.config.js\n\nimport commonjs from \"@rollup/plugin-commonjs\";\nimport resolve from \"@rollup/plugin-node-resolve\";\nimport peerDepsExternal from \"rollup-plugin-peer-deps-external\";\nimport typescript from \"rollup-plugin-typescript2\";\n\nimport packageJson from \"./package.json\";\n\n// eslint-disable-next-line import/no-anonymous-default-export\nexport default {\n  input: \"./src/index.ts\",\n  output: [\n    {\n      file: packageJson.main,\n      format: \"cjs\",\n      sourcemap: true\n    },\n    {\n      file: packageJson.module,\n      format: \"esm\",\n      sourcemap: true\n    }\n  ],\n  plugins: [peerDepsExternal(), resolve(), commonjs(), typescript()]\n};\n\nand I run the yarn add stroy1 command in my other repository.\n\nwhen I try to use this component I got an error\n\nERROR in ./node_modules/story1/build/index.es.js\nModule not found: Error: Can't resolve 'react/jsx-runtime' in '/Users/gowthamv/Documents/Workspace/my-app/node_modules/story1/build'\n @ ./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\n\nHow to fix this error?","ecosystem":"npm","package_name":"reactjs","package_version":null,"solution":"What the React version of the project you import the component?\n\nI got the same error and found 2 solutions\n\nUse React < 17 & Typescript < 4.1.0 with the following tsconfig change:\n\n\"jsx\": \"react\" // from jsx-react\n\nUse React 17 on both the library and the other repository with\n\n\"jsx\": \"react-jsx\"","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/65527359/got-cant-resolve-react-jsx-runtime-error-while-use-try-to-create-the-shared-c","votes":53,"created_at":"2026-04-19T04:51:42.997353+00:00","updated_at":"2026-04-19T04:51:42.997353+00:00"}