Open nikhilfoxmula opened 2 years ago
I solved it by installing react-dom:
npm i --save-dev react@18 react-dom@18
Be sure that you have both deps "react" and "react-dom" in your "devDependencies" (not only on "peerDependencies") and you have installed them properly. Then run the storybook init script:
npx storybook init --builder webpack5
Hope it helps!
I updated to react-dom@18, deleted node modules and it worked after reinstall.
npm i --save-dev react@18 react-dom@18
This caught me out when dependabot updated react, but not react-dom. React dom update fixed it.
This is a problem for my team. We're currently stuck on React 17 and this error blocks us from upgrading Storybook.
This is a problem for my team. We're currently stuck on React 17 and this error blocks us from upgrading Storybook.
Did you try updating react dom?
Upgrading React is non-trivial for us, and also not on our roadmap at this point.
React dom is a dependency. Try updating that.
I mean, clearly... but you're talking about forcing a major version upgrade of a dependency in my application because of a minor version dependency in a tool. This seems like the sort of thing that should be reserved for a major version release of Storybook.
Describe the bug I'm created a project using rollup the project is basically a library out of which I'm exporting some reusable componnents. I tried installing storybook, did npx story book init after that I did npm run story book, It opened the browser with a blank white page when I opened console to check for errors I spot different types of errors coming up on console and the most repetitive one was Uncaught TypeError: dispatcher.useInsertionEffect is not a function. Apart from that few other errors were : vendors~main.manager.bundle.js:97153 The above error occurred in the component:
vendors~main.manager.bundle.js:97153 The above error occurred in the component:
My rollup.config.js `import resolve from "@rollup/plugin-node-resolve"; import commonjs from "@rollup/plugin-commonjs"; import typescript from "@rollup/plugin-typescript"; import dts from "rollup-plugin-dts"; import postcss from "rollup-plugin-postcss"; 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, }, ], plugins: [ resolve(), postcss({ minimize: true, modules: true, use: { sass: null, stylus: null, less: { javascriptEnabled: true }, }, extract: true, }), commonjs(), typescript({ tsconfig: "./tsconfig.json" }) ], }, { input: "dist/esm/types/index.d.ts", output: [{ file: "dist/index.d.ts", format: "esm" }], plugins: [dts()], external: [/.css$/], }, ]; `