Module not found: Error: Can't resolve 'util'

[WoodyWoodsta]

Describe the bug
With a fresh build of storybook using react, webpack 5 and yarn PnP, I get an error during build:

ERR! => Failed to build the manager
ERR! Module not found: Error: Can't resolve 'util' in '***/storybook-repro-1/.yarn/__virtual__/@storybook-ui-virtual-0f4525ad5e/4/.yarn/berry/cache/@storybook-ui-npm-6.5.5-c5b3ce8d48-8.zip/node_modules/@storybook/ui/dist/esm'
ERR!
ERR! BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
ERR! This is no longer the case. Verify if you need this module and configure a polyfill for it.
ERR!
ERR! If you want to include a polyfill, you need to:
ERR! 	- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
ERR! 	- install 'util'
ERR! If you don't want to include a polyfill, you can use an empty module like this:
ERR! 	resolve.fallback: { "util": false }

To Reproduce
Simple repro repository

All I did was:

1. yarn dlx sb@next repro --pnp
2. Choose react and react-typescript
3. yarn add -D webpack @storybook/builder-webpack5 @storybook/manager-webpack5
4. Change main.ts to include { "core": { "builder": "webpack5" } }
5. Run yarn build-storybook

System

Environment Info:

  System:
    OS: macOS 12.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 16.14.2 - /private/var/folders/71/z4j0sg3j26l87c_6nv7y7tz00000gn/T/xfs-6d56c161/node
    Yarn: 3.2.0 - /private/var/folders/71/z4j0sg3j26l87c_6nv7y7tz00000gn/T/xfs-6d56c161/yarn
    npm: 8.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 101.0.4951.64
    Edge: 100.0.1185.50
    Firefox: 100.0
    Safari: 15.5

Additional context
The same project, but with node-linker: node-modules enabled does not produce the error.

[Shubham567]

I am getting the same, after trying to upgrade storybook to 6.5.5 from 6.4.21. I ran upgrade using npx sb upgrade.

[Shubham567]

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }
resolve 'util' in 'C:\proj\node_modules\@storybook\router\dist\esm'
  Parsed request is a module
  using description file: C:\proj\node_modules\@storybook\router\package.json (relative path: ./dist/esm)     
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module

[leschdom]

We also got this error after changing our devDependency from @cypress/code-coverage to 3.10.0.

Before:

npm ls util
+-- @cypress/code-coverage@3.9.12
| `-- @cypress/browserify-preprocessor@3.0.2
|   +-- browserify@16.5.2
|   | +-- assert@1.5.0
|   | | `-- util@0.10.3
|   | `-- util@0.10.4
|   `-- watchify@4.0.0
|     `-- browserify@17.0.0
|       `-- util@0.12.4
`-- @storybook/addon-essentials@6.5.5
  `-- @storybook/core-common@6.5.5
    `-- webpack@4.46.0
      `-- node-libs-browser@2.2.1
        `-- util@0.11.1

After update to @cypress/code-coverage@3.10.0:

npm ls util
`-- @storybook/addon-essentials@6.5.5
  `-- @storybook/core-common@6.5.5
    `-- webpack@4.46.0
      `-- node-libs-browser@2.2.1
        +-- assert@1.5.0
        | `-- util@0.10.3
        `-- util@0.11.1

What seems to work is manually install util as a devDependency, so it can successfully be resolved. We are also using webpack 5 instead of 4. So in our case @storybook/ui/dist/esm has a dependency to util somehow which is not anymore polyfilled by webpack. Maybe this helps for further analysis?

[WoodyWoodsta]

@leschdom That seems to be a good workaround. It's not the first time I've had issues with Storybook and it's dependencies. I wonder what the root cause is here.

[vip30]

I believe this is related #17978 (comment)

[Andarist]

A fix is ready here: #18412

[WoodyWoodsta]

Thanks @Andarist.

[marcelgerber]

Thank you, this is now solved for me in Storybook 6.5.9 🎉

[shilman]

Jeepers creepers!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.2 containing PR #18412 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[fivaz]

I had the same error, i just installed util as devDependency yarn add -D util

[shilman]

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.10-alpha.0 containing PR #18412 that references this issue. Upgrade today to the @prerelease NPM tag to try it out!

npx sb upgrade --prerelease

[shilman]

Ooh-la-la!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.10 containing PR #18412 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

[oscarmrom]

@shilman I'm still getting this error on the latest v6.5.13 😞

doing a clean install following this: https://dev.to/alexeagleson/how-to-build-scalable-architecture-for-your-nextjs-project-2pb7#adding-storybook

Going to do this for the workaround: #18319 (comment)

[okonet]

Just ran into this one on the clean install of v7.0.0-rc.4 in the Next.js project after running npx storybook init

[GreenTea124]

Just ran into this one on the clean install of v7.0.0-rc.4 in the Next.js project after running npx storybook init

Same

[erosenberg]

I am also having this issue on v7.0.0-rc.10. @shilman - can you please reopen this if you are able to reproduce?

[GrumpyMeow]

I was able to resolve this error on v7.0.1 by adding "types": ["node"] to .storybook/tsconfig.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "types": ["node"]
  },
  "files": ["../src/polyfills.ts"],
  "exclude": ["../**/*.spec.ts"],
  "include": [
    "../src/**/*.stories.ts",
    "../src/**/*.stories.js",
    "../src/**/*.stories.jsx",
    "../src/**/*.stories.tsx",
    "../src/**/*.stories.mdx",
    "*.ts",
    "*.js"
  ]
}

[dohun-ably]

I got these error also, running in yarn storybook using yarn pnp.

It happens because of jest-util andgraceful-ts, they didn't write depedencies correctly

You can make PR to reqeust to update dependency correctly, but code-owner will never respond.

1. open yarnrc.yml

2. write packageExtendsions:

in your case:

packageExtensions:
  '@storybook-ui@*':
    dependencies:
      'util': '^0.12.5'

In my case:

packageExtensions:
  'jest-util@*':
    dependencies:
      'process': '^0.11.10'
      'url': '^0.11.1'
  'graceful-fs@*':
    dependencies:
      'util': '^0.12.5'

4. save and run yarn install