@storybook/react@6.1.6 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! 🚀

[bugtype]

Hmm... I can't solve it by documentation. I solved it like below. Use it temporarily.

before

    "@storybook/react": "^6.1.11",

after

    "@storybook/react": "6.0.28",

[erikiva]

I had the same problem tried upgrading with npx sb upgrade but run into peer dependency problems that I fixed with the flag --legacy-peer-deps and then run into this. Fixed it the same way, going back to "6.0.28" is this something that will be fixed?

[shilman]

@bugtype @erikiva Do you have a repro repo you can share?

[erikiva]

I can't share the repo but I could share any individual files and show the errors I am getting. And I can try any suggestions and report back.

[chrisdrifte]

I got this error after adding a package with npm install instead of yarn add by accident -- leaving this note in case anyone else makes the same mistake

[jampack]

So it was working in external libraries in previous versions and now it wont :)

[SaraRavasio]

When I downgrade the version to 6.0.28 I can't run the storybook project, due to invalid hook calls.
But if I put back the 6.3.0 I get Cannot find module '@storybook/react'.

Do you have any updates?

For now I just removed the use of types Story and Meta from @storybook/react' but I really hope you can fix this 🙏

Thanks

[shilman]

@SaraRavasio we still don't have any reproduction. https://storybook.js.org/docs/react/contribute/how-to-reproduce

[JoeyFenny]

My error was for react-dom ERR! Error: Cannot find module 'react-dom/package.json'

Simply running npm install --save-dev react-dom fixed it for me.

[DigiBanks99]

Why is this fix needed for Angular projects? Can it not be a peer dependency for the @storybook/angular addon?

[shilman]

@DigiBanks99 this shouldn't be needed for angular projects. react-dom is a dependency of @storybook/angular

[Moalpima]

Just had the same problem in my Angular project. An update of storybook from 6.4.7 to 6.4.9 solved it. (no need to add react-dom)

[DigiBanks99]

For some reason, I had to add it as a dev dependency manually for storybook to work.

[michaelVictoriaDev]

@JoeyFenny Thanks man, Its work like a charm!