Storybook: @storybook/[email protected] build failure

[michaelaflores]

Describe the bug
When running start-storybook, the following error occurs:

info => Loading 1 config file in "./.storybook"
info => Loading 7 other files in "./.storybook"
info => Adding stories defined in ".storybook/main.js"
ERR! Error: Cannot find module 'react/package.json'
...stacktrace
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

✖ ｢wdm｣: Hash: 99602bd3a64e5e0dd377
Version: webpack 4.44.2
Time: 94ms
Built at: 11/25/2020 9:58:18 AM

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/michaelflores/workspace/video-client/stories'

To Reproduce
Steps to reproduce the behavior:

1. Run start-storybook

Expected behavior
The build succeeds. Reverting to 6.0.28 fixes the issue.

Code snippets
main.js

module.exports = {
  stories: [
    "../**/*.stories.mdx",
    "../**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
    {
      name: "@storybook/addon-docs",
      options: {
        configureJSX: true,
      },
    },
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
  ],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      exclude: /node_modules/,
      use: {
        loader: "ts-loader",
        options: {
          compiler: 'ttypescript',
        }
      }
    });
    config.resolve.extensions.push('.ts', '.tsx');
    return config
  },
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
};

System

  System:
    OS: macOS 11.0.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v12.16.1/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
  Browsers:
    Chrome: 87.0.4280.67
    Firefox: 76.0.1
    Safari: 14.0.1

[shilman]

Do you have a repro repo you can share?

[shilman]

@merceyz this seems related to your changes, no?

[michaelaflores]

@shilman I unfortunately don't have this available on a public repo.

[merceyz]

@merceyz this seems related to your changes, no?

Shouldn't be, but without a repro who knows what's going on

[michaelaflores]

Fwiw this general build instability has been occurring since at least before the fix introduced for #13209. For both of these cases I could revert to 6.0.28 reliably. Let me see if I can host a reduced case for you.

[michaelaflores]

I haven't yet been able to stand up a repo for this but wanted to note that this also occurs on 6.1.9.

[fcalizobrandcoders]

Having the same issues here. I have react and react-dom in the peerDeps, and upgrading to the newest version of storybook (6.1.9) breaks, UNLESS i move react and react-dom to the normal dependencies.

As of now, reverting back to 6.0.28 (and keeping react and react-dom in peerDeps works.

[AleshaOleg]

I have an available repo to reproduce this - https://github.com/ubergrape/grape-ds

[steveoh]

https://github.com/agrc-widgets/kitchen-sink is a repro once upgraded

[katiawheeler]

Also having this issue with the same scenario - react and react-dom are peer dependencies. Was able to add them as dev dependencies for time being to get it to work.

[shilman]

@AleshaOleg Thanks for providing a repro. I was able to repro and fix by adding a react-dom dev dependency per @katiawheeler. This is not a breaking change because they were declared as peer dependencies in earlier versions of Storybook. I've added a note about it here:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-peer-dependencies

@katiawheeler That's the recommended fix, not a "for the time being" workaround. 😄 If we install our own version of React it opens us up to a world of pain, which is why we made the switch in the first place.

[katiawheeler]

@shilman awesome, I think that will work for me as long as that’s the recommended path forward and is documented for future developers! Appreciate the update!

[michaelaflores]

Thanks for looking into this and appreciate that docs update @shilman

[shilman]

Cool, going to close this one for now! 🚀