tsdx problem - creating a project with template react-with-stoybook FAILED

Question

I wanted to create UI components library with Storybook and React. It was my first time using Storybook and I just followed the instruction from the documentation： https://tsdx.io/#quick-start

I typed npx tsdx create my-components in the terminal
The terminal asked me to choose template and I chose react-with-storybook

The project started installing packaged and then got stuck during the installation process. I waited for around half an hour before it threw error message as below:

npm WARN   dev react-dom@"*" from the root project
npm WARN   5 more (react-element-to-jsx-string, @storybook/theming, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: mycomponents@0.1.0
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN   dev react@"*" from the root project
npm WARN   6 more (react-syntax-highlighter, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"17.0.2" from react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN   dev react-dom@"*" from the root project
npm WARN   5 more (react-element-to-jsx-string, @storybook/theming, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: mycomponents@0.1.0
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN   dev react@"*" from the root project
npm WARN   6 more (react-syntax-highlighter, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"17.0.2" from react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN   dev react-dom@"*" from the root project
npm WARN   5 more (react-element-to-jsx-string, @storybook/theming, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: mycomponents@0.1.0
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN   dev react@"*" from the root project
npm WARN   6 more (react-syntax-highlighter, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"17.0.2" from react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN   dev react-dom@"*" from the root project
npm WARN   5 more (react-element-to-jsx-string, @storybook/theming, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: mycomponents@0.1.0
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN   dev react@"*" from the root project
npm WARN   6 more (react-syntax-highlighter, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"17.0.2" from react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN   dev react-dom@"*" from the root project
npm WARN   5 more (react-element-to-jsx-string, @storybook/theming, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: mycomponents@0.1.0
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN   dev react@"*" from the root project
npm WARN   6 more (react-syntax-highlighter, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"17.0.2" from react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN   dev react-dom@"*" from the root project
npm WARN   5 more (react-element-to-jsx-string, @storybook/theming, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: mycomponents@0.1.0
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN   dev react@"*" from the root project
npm WARN   6 more (react-syntax-highlighter, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"17.0.2" from react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN   dev react-dom@"*" from the root project
npm WARN   5 more (react-element-to-jsx-string, @storybook/theming, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: mycomponents@0.1.0
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN   dev react@"*" from the root project
npm WARN   6 more (react-syntax-highlighter, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"17.0.2" from react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN   dev react-dom@"*" from the root project
npm WARN   5 more (react-element-to-jsx-string, @storybook/theming, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: mycomponents@0.1.0
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN   dev react@"*" from the root project
npm WARN   6 more (react-syntax-highlighter, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"17.0.2" from react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN   dev react-dom@"*" from the root project
npm WARN   5 more (react-element-to-jsx-string, @storybook/theming, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: mycomponents@0.1.0
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN   dev react@"*" from the root project
npm WARN   6 more (react-syntax-highlighter, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"17.0.2" from react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN   dev react-dom@"*" from the root project
npm WARN   5 more (react-element-to-jsx-string, @storybook/theming, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: mycomponents@0.1.0
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN   dev react@"*" from the root project
npm WARN   6 more (react-syntax-highlighter, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"17.0.2" from react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN   dev react-dom@"*" from the root project
npm WARN   5 more (react-element-to-jsx-string, @storybook/theming, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: mycomponents@0.1.0
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN   dev react@"*" from the root project
npm WARN   6 more (react-syntax-highlighter, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"17.0.2" from react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN   dev react-dom@"*" from the root project
npm WARN   5 more (react-element-to-jsx-string, @storybook/theming, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: mycomponents@0.1.0
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN   dev react@"*" from the root project
npm WARN   6 more (react-syntax-highlighter, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"17.0.2" from react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN   dev react-dom@"*" from the root project
npm WARN   5 more (react-element-to-jsx-string, @storybook/theming, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: mycomponents@0.1.0
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN   dev react@"*" from the root project
npm WARN   6 more (react-syntax-highlighter, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"17.0.2" from react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN   dev react-dom@"*" from the root project
npm WARN   5 more (react-element-to-jsx-string, @storybook/theming, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: mycomponents@0.1.0
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN   dev react@"*" from the root project
npm WARN   6 more (react-syntax-highlighter, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"17.0.2" from react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN   dev react-dom@"*" from the root project
npm WARN   5 more (react-element-to-jsx-string, @storybook/theming, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: mycomponents@0.1.0
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN   dev react@"*" from the root project
npm WARN   6 more (react-syntax-highlighter, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"17.0.2" from react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN   dev react-dom@"*" from the root project
npm WARN   5 more (react-element-to-jsx-string, @storybook/theming, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: mycomponents@0.1.0
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN   dev react@"*" from the root project
npm WARN   6 more (react-syntax-highlighter, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"17.0.2" from react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN   dev react-dom@"*" from the root project
npm WARN   5 more (react-element-to-jsx-string, @storybook/theming, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: mycomponents@0.1.0
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN   dev react@"*" from the root project
npm WARN   6 more (react-syntax-highlighter, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"17.0.2" from react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN   dev react-dom@"*" from the root project
npm WARN   5 more (react-element-to-jsx-string, @storybook/theming, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: mycomponents@0.1.0
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN   dev react@"*" from the root project
npm WARN   6 more (react-syntax-highlighter, ...)

As the error message was so long, I only copied and pasted part of it.

I updated node to 16.16.0 and npm 8.11.10.

Does anyone know what went wrong and how can I solve the problem?

I'm not sure what the issue could be, but you can check out https://github.com/moishinetzer/pbandj which solves the exact use-case you are describing — moishinetzer, Feb 15 '23 at 15:43

score 0 · Answer 1 · answered Jul 20 '22 at 00:36

0

I found out the solution last night. I used nvm to downgrade the Node version to 14.20.0 and just ran the same command npx tsdx create my-components and chose template react-with-storybook. The installation took a while but it was successfully installed.

answered Jul 20 '22 at 00:36

Chloezhang

39
4

I have same issue but i don't wont to downgrade Node version. Any idea why it happen and how to fix it? – Mikhail Danshin Sep 25 '22 at 04:57

tsdx problem - creating a project with template react-with-stoybook FAILED

1 Answers1