storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.69k stars 9.32k forks source link

Uncaught TypeError: dispatcher.useInsertionEffect is not a function #18327

Open nikhilfoxmula opened 2 years ago

nikhilfoxmula commented 2 years ago

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$/], }, ]; `

amalcaraz commented 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!

brandonwaring commented 2 years ago

I updated to react-dom@18, deleted node modules and it worked after reinstall.

anshumanbisoyi commented 2 years ago

npm i --save-dev react@18 react-dom@18

gavmck commented 4 months ago

This caught me out when dependabot updated react, but not react-dom. React dom update fixed it.

jherdman commented 2 months ago

This is a problem for my team. We're currently stuck on React 17 and this error blocks us from upgrading Storybook.

brandonwaring commented 2 months ago

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?

jherdman commented 2 months ago

Upgrading React is non-trivial for us, and also not on our roadmap at this point.

brandonwaring commented 2 months ago

React dom is a dependency. Try updating that.

jherdman commented 2 months ago

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.