Angular - Error: Cannot find module 'react/package.json' when build preview

[ihor-panasiuk95]

Hey all.
Facing with the error in Angular when trying to build storybook. For some reason it asks for 'react' in Angular project based on NX Workspace. What can be the reason? Can I somehow specify that Storybook engine should use Angular based build?
Now I see this during CI process in GitHub but sometimes I see this error locally as well.

Project stack:

• Angular 12
• NX Workspace 13
• Storybook 6.4.19

[samvloeberghs]

Seems like storybook has something wrong with its dependencies.

npm i --save-dev react react-dom fixes the issue.

but it should be the storybook dependency/package who has to install these dependencies and it should not be explictly part of your own package.json

[ihor-panasiuk95]

yes, it looks like it happened due to some dependencies. After re-installing packages via "npm i" I managed to make it work event with "npm ci" in CI\CD workflow. But this would work until someone install a new package to the project and we will have to do these manipulations again in order to generate correct package-lock.json

This would be nice to understand why exactly the Storybook decides to do something with react although there is no any react project in the workspace.

BTW: After installing react related packages I had lot's of "export/import" issues:

[shilman]

Storybook uses React as a peer dependency and this should be a regular dependency. @storybook/angular depends on React so that it can provide that peer dependency, but due to the changes npm8's handling of peer dependencies this breaks.

We will fix this in the next release. In the meantime, using --legacy-peer-deps as a workaround should fix the problem, as does installing react and react-dom in your project

[DerZyklop]

Has it really been fixed?

The issue has been reported by @ihor-panasiuk95 with version 6.4.19.
@shilman said »We will fix this in the next release«.

I have the same error Cannot find module 'react/package.json' with 6.5.9. The error disappears, if I do npm i --save-dev react react-dom as @samvloeberghs figured out.

[niki-04]

Doesn't work for me, I tried --legacy-peer-deps

[ziurr]

Still getting this issue in our NX monorepo as well

[Flaviu989]

I have the exact same issue but with Angular 13, NX Workspace 13, Storybook 6.4.12
Initially it worked after adding "allowJs": true to tsconfig.base.json, but now the error reappeared and I can't start storybook again...

[ihor-panasiuk95]

Thank you, will try.

[matheusbaumgart]

Also having this problem. Any luck?

[ihor-panasiuk95]

For those who still have this issue I manage to solve that. By investigating each file that storybook works with, I realized that my tsconfig.json that storybook was aimed to and main.js had incorrect setup. They pointed to incorrect paths. After setting the correct paths everything started to work.

[HackPoint]

@tsakalidiskostas seems that it's a secret path that only he knows.

I have the same issue with ng project.

[tsakalidiskostas]

I managed to get around this. I uninstalled global React and React Dom, cleaned cache, deleted node_modules, did an npm i, worked.

[ihor-panasiuk95]

@HackPoint @tsakalidiskostas sorry for long response, since I solved that problem for me I stopped tracking it :(
The problem was here:

For example, this path was '../somefolder//.stories.@(js|jsx|ts|tsx)'** in .storybook/main.js and '../somefolder//'** in .storybook/tsconfig.json but somefolder did not exist.
After pointing these paths to right folders the issue dissapeared. But I still think that some issue is still in storybook because when I setup storybook via NX workspace and I run npx nx someproject:storybook it complaints about react.

[ihor-panasiuk95]

I mean this guide
https://nx.dev/storybook/overview-angular

[ihor-panasiuk95]

I unmarked my answer since this is mysterious issue and what I proposed does not solve it for all

[chris-oliver-getvisibility]

This is still happening in 2023 after installing a new Angular project, installing Storybook, and using sb init.
It successfully detected that I was using Angular when doing this.
Does Storybook work with Angular?
I've never used Storybook before, but I was hoping it would be easy to setup.
Installing react dependencies in an Angular project isn't a solution as far as I'm concerned.

[EvanScott542]

March 2023 and still getting encountering this issue as well.

[milenig]

October 27, 2023 and the same problem keeps appearing

[valentinpalkovic]

@milenig, @EvanScott542 Please help me to understand the issue. As @shilman pointed out, react and react-dom are necessary peer-dependencies for Storybook. So either your package manager automatically installs them for you, or you must install them manually. We plan to remove these peer-dependencies in Storybook 8.

When Storybook is initiated freshly in a project, Storybook's CLI will automatically install these. Upgrading Storybook from 6 to 7 via npx storybook@latest upgrade should also take care of installing react and react-dom as a peer dependency. If this doesn't happen, you have to add these dependencies manually.

Is there still something unclear? Does the error occur, although react and react-dom are installed? If so, please try to provide a reproduction on Stackblitz

[valentinpalkovic]

I am closing this discussion for now. As mentioned in Storybook 7.x, react and react-dom are required peer-dependencies. We are actively working on a solution, though, to remove these peer-dependencies in Storybook 8. In the meantime, these dependencies have to be installed.

[valentinpalkovic]

Update: react and react-dom aren't necessary peer-dependencies in Storybook 8.0 anymore.