Invalid hook calls for SB v7 + webpack 5 + react 18.2.0 + pnpm

[ZhengRui]

I am writing a react lib with "react" and "react-dom" as peer dependency, then I have a seperate storybook project demoing the usage of the lib. It used to work well with SB v6.5 + react 17/18 + webpack5 + yarn, recently i upgraded to SB v7 + react 18 + webpack5 + pnpm, and i am facing the issue of not being able to call any react hooks in the lib.

The original comment i make on this issue, and here is a minimum reproduction of my situation. @shilman

[ZhengRui]

able to find the fix: remove react and react-dom from lib, only keep @types/react and pnpm link react to the storybook project's react.

[ZhengRui]

now comes another issue, when putting libA and storybook in one project libA's components works fine, but if libA's component imports a component from libB, then storybook will throw "invalid hook call" for libB. this is so frustrating!

[bigbunty]

Does this work now? Iam also facing similar issue with SB7 +react18.2.0+webpack5

[liaoyinglong]

After adding the following code to .storybook/main.js, it was fixed.

webpackFinal(config){
 config.resolve.alias = {
      ...config.resolve.alias,
      react: path.resolve(__dirname, '../node_modules/react'),
      'react-dom': path.resolve(__dirname, '../node_modules/react-dom'),
    };
return config
}

[felipeegasneris]

+1 @liaoyinglong solution

[AndrewSepic]

+1 @liaoyinglong 🙏

[sky247-app]

Sorry to hear that you're facing issues with calling React hooks in your React library after upgrading to Storybook v7, React 18, webpack 5, and pnpm. Here is a suggested comment for the issue:

I've been working on a React library that has "react" and "react-dom" as peer dependencies. Previously, everything was functioning well with Storybook v6.5, React 17/18, webpack 5, and yarn. However, I recently upgraded to Storybook v7, React 18, webpack 5, and pnpm, and now I'm encountering an issue where I'm unable to call any React hooks within the library.

I've prepared a minimal reproduction of the situation to help investigate the problem. It seems like there may be a compatibility issue update on Crecimiento organico between the upgraded dependencies and the hooks within the library.

Has anyone else experienced a similar issue or found a workaround? Any insights or suggestions would be greatly appreciated. Thank you!