Webpack - Module not found Error Can't resolve '.storybook/preview.js-generated-config'

[rtturner]

Describe the bug

Earlier today I started having issues trying to build storybook. Receiving an error complaining about not being able to resolve .storybook/preview.js-generated-config-entry.js. I assumed it was something in our codebase but trying many older commits that were working is still failing.

I noticed that the latest commits in storybook were failing this check: ci/circleci: build-sandboxes

The error message within that check is very similar to what I am seeing.

Field 'browser' doesn't contain a valid alias configuration

Curious if this is a storybook issue

To Reproduce

No response

System

Environment Info:

  System:
    OS: macOS 12.3.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 18.12.1 - ~/.volta/tools/image/node/18.12.1/bin/node
    Yarn: 1.22.17 - ~/.volta/bin/yarn
    npm: 8.11.0 - ~/<redacted>/gdl_js/node_modules/.bin/npm
  Browsers:
    Chrome: 107.0.5304.110
    Firefox: 107.0
    Safari: 15.4
  npmPackages:
    @storybook/addon-a11y: 6.4.19 => 6.4.19 
    @storybook/addon-actions: 6.4.19 => 6.4.19 
    @storybook/addon-backgrounds: 6.4.19 => 6.4.19 
    @storybook/addon-console: 1.2.3 => 1.2.3 
    @storybook/addon-controls: 6.4.19 => 6.4.19 
    @storybook/addon-docs: 6.4.19 => 6.4.19 
    @storybook/addon-links: 6.4.19 => 6.4.19 
    @storybook/addon-measure: 6.4.19 => 6.4.19 
    @storybook/addon-outline: 6.4.19 => 6.4.19 
    @storybook/addon-storysource: 6.4.19 => 6.4.19 
    @storybook/addon-toolbars: 6.4.19 => 6.4.19 
    @storybook/addon-viewport: 6.4.19 => 6.4.19 
    @storybook/addons: 6.4.19 => 6.4.19 
    @storybook/builder-webpack5: 6.4.19 => 6.4.19 
    @storybook/manager-webpack5: 6.4.19 => 6.4.19 
    @storybook/react: 6.4.19 => 6.4.19

Additional context

No response

[yannbf]

Hey @rtturner thanks for opening this issue and investigating!

A few hours ago, there was a release of enhanced-resolve v5.11.0, which ended up breaking Storybooks that use Webpack. You might be experiencing this issue if you:

• Installed a fresh Storybook, regardless of version (could be 6 or 7)
• Do not use package lock files
• Deleted your package lock files and ran install

We notified the maintainers here, please upvote: webpack/enhanced-resolve#362

In the meantime, the workaround is to pin the version of enhanced-resolve to its previous working version in your package.json:

npm (if you're using npm 8 or higher)

{
  "overrides": {
    "enhanced-resolve": "5.10.0"
  }
}

Yarn

{
  "resolutions": {
    "enhanced-resolve": "5.10.0"
  }
}

pnpm

{
  "pnpm": {
    "overrides": {
      "enhanced-resolve": "5.10.0"
    }
  }
}

[pm0u]

I just did a fresh install of storybook and I'm running into an issue implementing this fix as there is also a dependency on webpack4 coming from "@storybook/[email protected]" that relies on "enhanced-resolve@^4.5.0" so setting a global resolution seems to break that dependency

[pm0u]

repro:

mkdir test
cd test
yarn add react react-dom @types/react typescript
npx sb init

Check the lockfile, there is enhanced-resolve@^4.5.0 and enhanced-resolve@^5.10.0 called out

https://github.com/pm0u/storybook-enhanced-resolve-repro

warning Resolution field "[email protected]" is incompatible with requested version "enhanced-resolve@^4.5.0"

[pm0u]

the following resolved the above error for me (yarn):

package.json

  "resolutions": {
    "webpack@5/enhanced-resolve": "5.10.0"
  }

edit: I'm not a yarn wizard, but possibly better:

  "resolutions": {
    "webpack@>=4.43.0 <6.0.0, webpack@^5.9.0/enhanced-resolve": "5.10.0"
  }

This more closely matches the package definition that is pulling in this package

[RowinVanAmsterdam]

Same issue after fresh install. The override didn't work for me unfortunately, while I'm on NPM 8+. A workaround if the override above not work is to comment out

 "core": {
    "builder": "@storybook/builder-webpack5"
  },

In .storybook/main.js

Edit:
Maybe it helps someone else: I had to update NPM to make the override work. I was on NPM version 8.1.2.

[vonny29]

I started getting a simular error after a fresh install.

Field 'browser' doesn't contain a valid alias configuration

ModuleNotFoundError: Module not found: Error: Can't resolve '{ROOT_DIR}/storybook-config-entry.js' in '{ROOT_DIR}'

This resolved it for me (yarn)

package.json

  "resolutions": {
    "webpack@>=4.43.0 <6.0.0, webpack@^5.9.0/enhanced-resolve": "5.10.0"
  }

Thank you @pm0u

[davidtranjs]

Please, please publish a new version of storybook with fixed version of broken package 😢

[kylegach]

This issue has been addressed by a new release of enhanced-resolved: webpack/enhanced-resolve#364.

We've confirmed that it works in a few sample projects, but please let us know if you continue to experience problems.

[DavidLeonard77]

New release fixes the issue. 😄 ❤️

[ndelangen]

First: This issue (yes urgent!) is actually resolved! It's not just closed "without further ado" that's simply not true.

---

Hey @wojtekxtx I'm sad to hear you feel this way. As a storybook maintainer it's never a great moment when a user voices their displeasure. But it happens, I understand. You feel somehow that this is our fault, that we should do better.

We try, but you know, sometimes building a project such as storybook, standing on the shoulders of giants, it's a blessing and a curse. We would not be where we are today without those giants! But these giants are moving, and new giants get created to stand upon.

I'm talking about webpack, which is exactly what this issue is about. Users want to use webpack, we support it; we have to.
It's a tool with 24+ million weekly installs.
We found out storybook was broken within 2 hours of the webpack team releasing a minor version of a package they depend on. This minor version change broke storybook in a unexpected way. The storybook team had no way of knowing this change was coming, we didn't choose to update to enhanced-resolve, in fact because it's a transitive dependency, we couldn't even fix it on our end, it was impossible.

Within 1 hour after discovery we had a PR up fixing the issue at the origin, we had ping'ed the author of the PR breaking and the package maintainer on multiple platforms.

The storybook team works hard to keep up with the ever changing landscape of bundles (new versions get released, new bundles come unto the scene) new UI frameworks, breaking changes in existing ones (hello react 18!). We try to support it all. It's a lot and complex work.

If you're looking for alternatives to storybook, there are a few actually. There's https://github.com/doczjs/docz https://previewjs.com/ https://react-styleguidist.js.org/ and a bunch more.
Building something yourself can also be great, I recommend it!

You mention that storybook has tons of open issues, and you're right. I feel guilty about this all the time.
As a team we have been looking for help and hiring people to help us put procedures in place to make sure this will get dealt with in the future!

I hope that whatever you do, whatever tool you use, fits your use-case, and makes your development better and more fun.

And if you ever feel like helping out with existing issues, I'd be happy to guide you on how to get started contributing in a 1-on-1 zoom meeting any time: https://calendly.com/chromaui <- schedule a meeting with me, and I'll show up.

[DavidLeonard77]

Very happy with the quick response time. Thanks!

[ndelangen]

I do not appreciate your tone of voice @wojtekxtx
In my humble opinion you're not giving constructive feedback, but rather, are lecturing. It seems to me you're not interested in actually improving the situation, but rather dragging it down. This is toxic behavior.

You say you are still having this exact issue? please supply a reproduction.

You say when you were trying this 4 hours ago you ran into a list of issues, please list them.
You say none of those issues get replies from maintainers, that seems unlikely to me, but if you list them we can actually know what issues you're running into.

You suggest we drop all existing code, and rewrite from scratch; uprooting the entire user-base, dropping backwards compatibility, giving users a very hard time waiting for this rewrite and then when it lands, migrate.
This is a terrible plan, I assume you know this; why you suggest this, is beyond me.

You seems to be of the impression that the storybook team is required to read all issues for you, is required to fix all bugs for you. You're acting in a way that makes open source maintainers lose interest and burn out. Please stop.

You might think you comment is helping, but it's not.
You've done none of the work required to make your comment actually useful to this project.

It's fine if you feel like an open source is not for you, but you should not go around open source project you don't like and actively try to make their maintainers feel bad.

If I see another toxic message from you, I'd feel forced to use the code of conduct, this message is a warning, and the next step would be a temp ban

[rtturner]

😮 sorry to ping a closed issue but just wanted to give thanks to the storybook team - you guys rock - real bummer this issue exploded into a temper tantrum but think you handled it well. Hope you all have a good holiday and happy new year 😄

[yyx990805]

just FYI: I fully agree with @wojtekLs, there's a mess and in my opinion his feedback was constructive.