MODULE_NOT_FOUND error when running storybook on fresh project #18197

rajmasha · 2022-05-11T12:30:43Z

Describe the bug
After installing Nextjs, Chakra-UI, and Storybook, when I ran npm run storybook, I got an error MODULE_NOT_FOUND

➜  chakra-storybook-bug git:(main) ✗ npm run storybook

> chakra-storybook-bug@0.1.0 storybook
> start-storybook -p 6006

info @storybook/react v6.4.22
info 
info => Loading presets
info => Using implicit CSS loaders
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
9% setup compilation DocGenPluginnode:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module 'webpack/lib/util/makeSerializable.js'
Require stack:
- /Users/raj/code/chakra-storybook-bug/node_modules/@storybook/react-docgen-typescript-plugin/dist/dependency.js
- /Users/raj/code/chakra-storybook-bug/node_modules/@storybook/react-docgen-typescript-plugin/dist/plugin.js
- /Users/raj/code/chakra-storybook-bug/node_modules/@storybook/react-docgen-typescript-plugin/dist/index.js
- /Users/raj/code/chakra-storybook-bug/node_modules/@storybook/react/dist/cjs/server/framework-preset-react-docgen.js
- /Users/raj/code/chakra-storybook-bug/node_modules/@storybook/core-common/dist/cjs/presets.js
- /Users/raj/code/chakra-storybook-bug/node_modules/@storybook/core-common/dist/cjs/index.js
- /Users/raj/code/chakra-storybook-bug/node_modules/@storybook/core-server/dist/cjs/index.js
- /Users/raj/code/chakra-storybook-bug/node_modules/@storybook/core/dist/cjs/server.js
- /Users/raj/code/chakra-storybook-bug/node_modules/@storybook/core/server.js
- /Users/raj/code/chakra-storybook-bug/node_modules/@storybook/react/dist/cjs/server/index.js
- /Users/raj/code/chakra-storybook-bug/node_modules/@storybook/react/bin/index.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/raj/code/chakra-storybook-bug/node_modules/@storybook/react-docgen-typescript-plugin/dist/dependency.js:6:55)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at /Users/raj/code/chakra-storybook-bug/node_modules/@storybook/react-docgen-typescript-plugin/dist/plugin.js:108:42
    at Hook.eval [as call] (eval at create (/Users/raj/code/chakra-storybook-bug/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:374:1)
    at Hook.CALL_DELEGATE [as _call] (/Users/raj/code/chakra-storybook-bug/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/Users/raj/code/chakra-storybook-bug/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1122:26)
    at /Users/raj/code/chakra-storybook-bug/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1166:29 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/raj/code/chakra-storybook-bug/node_modules/@storybook/react-docgen-typescript-plugin/dist/dependency.js',
    '/Users/raj/code/chakra-storybook-bug/node_modules/@storybook/react-docgen-typescript-plugin/dist/plugin.js',
    '/Users/raj/code/chakra-storybook-bug/node_modules/@storybook/react-docgen-typescript-plugin/dist/index.js',
    '/Users/raj/code/chakra-storybook-bug/node_modules/@storybook/react/dist/cjs/server/framework-preset-react-docgen.js',
    '/Users/raj/code/chakra-storybook-bug/node_modules/@storybook/core-common/dist/cjs/presets.js',
    '/Users/raj/code/chakra-storybook-bug/node_modules/@storybook/core-common/dist/cjs/index.js',
    '/Users/raj/code/chakra-storybook-bug/node_modules/@storybook/core-server/dist/cjs/index.js',
    '/Users/raj/code/chakra-storybook-bug/node_modules/@storybook/core/dist/cjs/server.js',
    '/Users/raj/code/chakra-storybook-bug/node_modules/@storybook/core/server.js',
    '/Users/raj/code/chakra-storybook-bug/node_modules/@storybook/react/dist/cjs/server/index.js',
    '/Users/raj/code/chakra-storybook-bug/node_modules/@storybook/react/bin/index.js'
  ]
}

To Reproduce
Link to GitHub repo - https://github.com/rajmasha/chakra-storybook-bug

Run the following commands to install and run:

npx create-next-app@latest --typescript
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
npx sb init --builder webpack5
npm run storybook

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

The text was updated successfully, but these errors were encountered:

tremby · 2022-05-11T20:37:04Z

I run into the same error without instruction step 2 (i.e. the extra dependencies).

abe1272001 · 2022-05-26T08:57:19Z

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 · 2022-05-26T10:41:25Z

@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 · 2022-05-29T16:54:58Z

@shilman Sorry for the late reply. I tried with the webpack 5 override but still getting the same error.

promet99 · 2022-06-08T17:30:59Z

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 · 2022-06-08T17:48:23Z

Also, using yarn, I have cloned and successfully started storybook in my desktop.
@rajmasha you may consider that as another solution too.

storybookjs/storybook#18197

jsamr · 2022-06-25T21:31:12Z

@shilman @rajmasha Apparently overrides are not reliable before npm@8.6.0 (cf npm/cli#4322 (comment)). 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 · 2022-11-09T10:34:28Z

Got the same error.

tchryssos · 2023-04-17T18:10:30Z

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.

rajmasha added bug needs triage labels May 11, 2022

tremby mentioned this issue May 11, 2022

Error when starting, when using Typescript RyanClementsHax/storybook-addon-next#80

Closed

shilman added this to the 6.5 stabilization milestone May 30, 2022

pixelass added a commit to neuefische/capstone-serverless-template that referenced this issue Jun 20, 2022

chore: adjust storybook issue

e667f97

storybookjs/storybook#18197

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MODULE_NOT_FOUND error when running storybook on fresh project #18197

MODULE_NOT_FOUND error when running storybook on fresh project #18197

rajmasha commented May 11, 2022

tremby commented May 11, 2022

abe1272001 commented May 26, 2022 •

edited

shilman commented May 26, 2022

rajmasha commented May 29, 2022

promet99 commented Jun 8, 2022 •

edited

promet99 commented Jun 8, 2022

jsamr commented Jun 25, 2022

misiyevich commented Nov 9, 2022

tchryssos commented Apr 17, 2023

MODULE_NOT_FOUND error when running storybook on fresh project #18197

MODULE_NOT_FOUND error when running storybook on fresh project #18197

Comments

rajmasha commented May 11, 2022

tremby commented May 11, 2022

abe1272001 commented May 26, 2022 • edited

shilman commented May 26, 2022

rajmasha commented May 29, 2022

promet99 commented Jun 8, 2022 • edited

promet99 commented Jun 8, 2022

jsamr commented Jun 25, 2022

misiyevich commented Nov 9, 2022

tchryssos commented Apr 17, 2023

abe1272001 commented May 26, 2022 •

edited

promet99 commented Jun 8, 2022 •

edited