tremby
commented
2 years ago I run into the same error without instruction step 2 (i.e. the extra dependencies).
Open rajmasha opened 2 years ago
tremby
commented
2 years ago I run into the same error without instruction step 2 (i.e. the extra dependencies).
abe1272001
commented
2 years ago I have same issue. And in storybook clientsite open the console can see 'util' module_not_found error.
Uncaught Error: Cannot find module 'util'
at webpackMissingModule (vendors-node_modules_chakra-ui_storybook-addon_preset_register_dist_chakra-ui-storybook-addon-dbb44c.manager.bundle.js:31279:50)
at Object../node_modules/@storybook/router/dist/esm/index.js (vendors-node_modules_chakra-ui_storybook-addon_preset_register_dist_chakra-ui-storybook-addon-dbb44c.manager.bundle.js:31279:129)
at __webpack_require__ (runtime~main.manager.bundle.js:23:42)
at Object../node_modules/@storybook/core-client/dist/esm/manager/index.js (vendors-node_modules_chakra-ui_storybook-addon_preset_register_dist_chakra-ui-storybook-addon-dbb44c.manager.bundle.js:27817:11)
at __webpack_require__ (runtime~main.manager.bundle.js:23:42)
at __webpack_exec__ (main.manager.bundle.js:40:48)
at main.manager.bundle.js:41:237
at Function.__webpack_require__.O (runtime~main.manager.bundle.js:60:23)
at main.manager.bundle.js:42:56
at webpackJsonpCallback (runtime~main.manager.bundle.js:319:39)
pakage.json
"name": "web-demo",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "cross-env NODE_OPTIONS='--inspect' next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"prettier": "prettier --write .",
"prepare": "husky install",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"engines": {
"node": ">=14.0.0",
"yarn": ">=1.22.0",
"npm": "please-use-yarn"
},
"dependencies": {
"@chakra-ui/react": "^2.0.0",
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@reduxjs/toolkit": "^1.8.1",
"framer-motion": "^6.3.3",
"next": "12.1.6",
"react": "18.1.0",
"react-beautiful-dnd": "^13.1.0",
"react-dom": "18.1.0",
"react-grid-layout": "^1.3.4",
"react-hook-form": "^7.31.2"
},
"devDependencies": {
"@babel/core": "^7.18.2",
"@chakra-ui/storybook-addon": "^3.0.2",
"@commitlint/cli": "^17.0.1",
"@commitlint/config-conventional": "^17.0.0",
"@storybook/addon-actions": "^6.5.5",
"@storybook/addon-essentials": "^6.5.5",
"@storybook/addon-interactions": "^6.5.5",
"@storybook/addon-links": "^6.5.5",
"@storybook/builder-webpack5": "^6.5.5",
"@storybook/manager-webpack5": "^6.5.5",
"@storybook/react": "^6.5.5",
"@storybook/testing-library": "^0.0.11",
"babel-loader": "^8.2.5",
"cross-env": "^7.0.3",
"eslint": "8.15.0",
"eslint-config-next": "12.1.6",
"eslint-plugin-storybook": "^0.5.12",
"husky": "^8.0.1",
"prettier": "^2.6.2"
},
"resolutions": {
"webpack": "^5"
}
}```
shilman
commented
2 years ago @rajmasha Can you try forcing webpack5 resolutions/overrides to ensure that webpack5 is used everywhere?
In npm: "overrides": { "webpack": "^5" }
In yarn "resolutions": { "webpack": "^5" }
rajmasha
commented
2 years ago @shilman Sorry for the late reply. I tried with the webpack 5 override but still getting the same error.
promet99
commented
2 years ago This issue seems to be related to #15336
Adding typescript: { reactDocgen: false }, inside .storybook/main.js can solve the issue!
Below is yarn why webpack, showing why webpack4 is hoisted.
❯ yarn why webpack
=> Found "webpack@4.46.0"
info Has been hoisted to "webpack"
info Reasons this module exists
- Hoisted from "@storybook#addon-essentials#@storybook#core-common#webpack"
- Hoisted from "@storybook#react#@storybook#core#@storybook#core-server#webpack"
- Hoisted from "@storybook#react#@storybook#core#@storybook#core-server#@storybook#builder-webpack4#webpack"
- Hoisted from "@storybook#react#@storybook#core#@storybook#core-server#@storybook#manager-webpack4#webpack"I assume this is caused by dependency webpack@4 in storybook/lib/core-server/package.json
Is it even used in @storybook/core-server? if so, we can change dependency version to ^5, or just remove it from dependency
promet99
commented
2 years ago Also, using yarn, I have cloned and successfully started storybook in my desktop.
@rajmasha you may consider that as another solution too.
jsamr
commented
2 years ago @shilman @rajmasha Apparently overrides are not reliable before npm@8.6.0 (cf https://github.com/npm/cli/issues/4322#issuecomment-1087939307). Per the comment, if you are using an older version of npm (still > 8.3.0), you need to delete package-lock.json before overrides take effect.
misiyevich
commented
2 years ago Got the same error.
tchryssos
commented
1 year ago I found this thread due to a slightly different MODULE_NOT_FOUND error around some validator for react/isReactComponent after updating to storybook 7. Forcing webpack to resolve to 5 as stated above was indeed helpful and got storybook to actually START, but I still ran into issues with storybook crashing immediately with ModuleBuildErrors.
Investigating that led me to this thread which has a lot of discussion back and forth about blasting your yarn.lock file. For me that was possible (this was the start of a very small personal project, so doing something rash like deleting the lock file was fine), but I suspect for many of you that won't be a viable solution. Hopefully something in that thread helps, and given that "delete your lockfile" is a solution, its fair to say that this is about old (storybook?) dependencies conflicting with newer installs.
Describe the bug After installing Nextjs, Chakra-UI, and Storybook, when I ran
npm run storybook, I got an error MODULE_NOT_FOUNDTo Reproduce Link to GitHub repo - https://github.com/rajmasha/chakra-storybook-bug
Run the following commands to install and run:
System Environment Info:
System: OS: macOS 12.0.1 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Binaries: Node: 16.14.2 - /usr/local/bin/node Yarn: 1.22.18 - /usr/local/bin/yarn npm: 8.5.0 - /usr/local/bin/npm Browsers: Chrome: 101.0.4951.54 Firefox: 100.0 Safari: 15.1 npmPackages: @storybook/addon-actions: ^6.4.22 => 6.4.22 @storybook/addon-essentials: ^6.4.22 => 6.4.22 @storybook/addon-interactions: ^6.4.22 => 6.4.22 @storybook/addon-links: ^6.4.22 => 6.4.22 @storybook/builder-webpack5: ^6.4.22 => 6.4.22 @storybook/manager-webpack5: ^6.4.22 => 6.4.22 @storybook/react: ^6.4.22 => 6.4.22 @storybook/testing-library: ^0.0.11 => 0.0.11