reactjs / react.dev

The React documentation website
https://react.dev/
Creative Commons Attribution 4.0 International
11.04k stars 7.54k forks source link

Unable to run reactjs.org project #5647

Open nagac121 opened 1 year ago

nagac121 commented 1 year ago

Followed below steps to install node_modules.

fork reactjs.org
cloned the fork to local
cd reactjs.org
yarn

expected result: install node_modules successfully actual result: getting following error.

Error occurring when ran command yarn

error c:\projects\open source\reactjs.org\node_modules\pngquant-bin: Command failed.
Exit code: 1
Command: node lib/install.js
Arguments:
Directory: c:\projects\open source\reactjs.org\node_modules\pngquant-bin
Output:
‼ read ECONNRESET
  ‼ pngquant pre-build test failed
  i compiling from source
  × Error: pngquant failed to build, make sure that libpng-dev is installed
    at c:\projects\open source\reactjs.org\node_modules\bin-build\node_modules\execa\index.js:231:11

after this error I still went ahead and ran Yarn dev and see below error

 ERROR

The gatsby-source-react-error-codes plugin has failed:
Error: read ECONNRESET

not finished source and transform nodes - 0.390s
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Environment: windows 11 using command prompt as well as powershell, both as admin

Judee-web commented 1 year ago

Hi there. I read your error log and found out you need to install libpng-dev. is it installed in your local machine? if you have not installed it: here is the command on how to install it on your machine using npm command;

npm install imagemin-pngquant --save // to install the latest

OR

npm install imagemin-pngquant@9.0.1 --save // to install a specific version

nagac121 commented 1 year ago

I installed libpng-dev and ran yarn dev, it did not work. then, I deleted node_modules and ran yarn and then yarn dev worked. now, my repo is up and running.

nagac121 commented 1 year ago

I am facing same issue. when I ran yarn dev, it gave

 ERROR

The gatsby-source-react-error-codes plugin has failed:
Error: read ECONNRESET

I deleted node_modules from the project ran yarn and then executed command npm install imagemin-pngquant --save which is giving following error.

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @reach/router@1.3.4
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"17.0.2" from react-dom@17.0.2
npm WARN   node_modules/react-dom
npm WARN     peer react-dom@"^15.0.0 || ^16.0.0 || ^17.0.0 " from react-hot-loader@4.13.0
npm WARN     node_modules/react-hot-loader
npm WARN     1 more (the root project)
npm WARN   3 more (react-helmet, react-hot-loader, the root project)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"15.x || 16.x || 16.4.0-alpha.0911da3" from @reach/router@1.3.4
npm WARN node_modules/@reach/router
npm WARN   @reach/router@"^1.3.4" from gatsby@2.24.63
npm WARN   node_modules/gatsby
npm WARN   4 more (gatsby, gatsby-react-router-scroll, gatsby-link, gatsby-react-router-scroll)
npm WARN
npm WARN Conflicting peer dependency: react@16.14.0
npm WARN node_modules/react
npm WARN   peer react@"15.x || 16.x || 16.4.0-alpha.0911da3" from @reach/router@1.3.4
npm WARN   node_modules/@reach/router
npm WARN     @reach/router@"^1.3.4" from gatsby@2.24.63
npm WARN     node_modules/gatsby
npm WARN     4 more (gatsby, gatsby-react-router-scroll, gatsby-link, gatsby-react-router-scroll)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @reach/router@1.3.4
npm WARN Found: react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN   peer react-dom@"^15.0.0 || ^16.0.0 || ^17.0.0 " from react-hot-loader@4.13.0
npm WARN   node_modules/react-hot-loader
npm WARN     react-hot-loader@"^4.12.21" from gatsby@2.24.63
npm WARN     node_modules/gatsby
npm WARN     1 more (gatsby)
npm WARN   1 more (the root project)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"15.x || 16.x || 16.4.0-alpha.0911da3" from @reach/router@1.3.4
npm WARN node_modules/@reach/router
npm WARN   @reach/router@"^1.3.4" from gatsby@2.24.63
npm WARN   node_modules/gatsby
npm WARN   4 more (gatsby, gatsby-react-router-scroll, gatsby-link, gatsby-react-router-scroll)
npm WARN
npm WARN Conflicting peer dependency: react-dom@16.14.0
npm WARN node_modules/react-dom
npm WARN   peer react-dom@"15.x || 16.x || 16.4.0-alpha.0911da3" from @reach/router@1.3.4
npm WARN   node_modules/@reach/router
npm WARN     @reach/router@"^1.3.4" from gatsby@2.24.63
npm WARN     node_modules/gatsby
npm WARN     4 more (gatsby, gatsby-react-router-scroll, gatsby-link, gatsby-react-router-scroll)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: create-react-context@0.3.0
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"17.0.2" from react-dom@17.0.2
npm WARN   node_modules/react-dom
npm WARN     peer react-dom@"^15.0.0 || ^16.0.0 || ^17.0.0 " from react-hot-loader@4.13.0
npm WARN     node_modules/react-hot-loader
npm WARN     1 more (the root project)
npm WARN   3 more (react-helmet, react-hot-loader, the root project)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from create-react-context@0.3.0
npm WARN node_modules/create-react-context
npm WARN   create-react-context@"0.3.0" from @reach/router@1.3.4
npm WARN   node_modules/@reach/router
npm WARN
npm WARN Conflicting peer dependency: react@16.14.0
npm WARN node_modules/react
npm WARN   peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from create-react-context@0.3.0
npm WARN   node_modules/create-react-context
npm WARN     create-react-context@"0.3.0" from @reach/router@1.3.4
npm WARN     node_modules/@reach/router
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: gatsby@2.24.63
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   peer react@"17.0.2" from react-dom@17.0.2
npm ERR!   node_modules/react-dom
npm ERR!     peer react-dom@"^15.0.0 || ^16.0.0 || ^17.0.0 " from react-hot-loader@4.13.0
npm ERR!     node_modules/react-hot-loader
npm ERR!       react-hot-loader@"^4.12.21" from gatsby@2.24.63
npm ERR!       node_modules/gatsby
npm ERR!         peer gatsby@"^2.0.0" from babel-plugin-remove-graphql-queries@2.9.19
npm ERR!         node_modules/babel-plugin-remove-graphql-queries
npm ERR!         22 more (gatsby-plugin-catch-links, gatsby-plugin-feed, ...)
npm ERR!       1 more (gatsby)
npm ERR!     react-dom@"^17.0.2" from the root project
npm ERR!   peer react@">=15.0.0" from react-helmet@5.2.1
npm ERR!   node_modules/react-helmet
npm ERR!     peer react-helmet@"^5.1.3 || ^6.0.0" from gatsby-plugin-react-helmet@3.3.11
npm ERR!     node_modules/gatsby-plugin-react-helmet
npm ERR!       gatsby-plugin-react-helmet@"^3.0.0" from the root project
npm ERR!     react-helmet@"^5.2.0" from the root project
npm ERR!   2 more (react-hot-loader, the root project)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.4.2" from gatsby@2.24.63
npm ERR! node_modules/gatsby
npm ERR!   peer gatsby@"^2.0.0" from babel-plugin-remove-graphql-queries@2.9.19
npm ERR!   node_modules/babel-plugin-remove-graphql-queries
npm ERR!     babel-plugin-remove-graphql-queries@"^2.9.19" from gatsby@2.24.63
npm ERR!     2 more (gatsby, gatsby-plugin-typescript)
npm ERR!   peer gatsby@"^2.0.0" from gatsby-plugin-catch-links@2.3.12
npm ERR!   node_modules/gatsby-plugin-catch-links
npm ERR!     gatsby-plugin-catch-links@"^2.0.0" from the root project
npm ERR!   21 more (gatsby-plugin-feed, gatsby-plugin-glamor, ...)
npm ERR!
npm ERR! Conflicting peer dependency: react@16.14.0
npm ERR! node_modules/react
npm ERR!   peer react@"^16.4.2" from gatsby@2.24.63
npm ERR!   node_modules/gatsby
npm ERR!     peer gatsby@"^2.0.0" from babel-plugin-remove-graphql-queries@2.9.19
npm ERR!     node_modules/babel-plugin-remove-graphql-queries
npm ERR!       babel-plugin-remove-graphql-queries@"^2.9.19" from gatsby@2.24.63
npm ERR!       2 more (gatsby, gatsby-plugin-typescript)
npm ERR!     peer gatsby@"^2.0.0" from gatsby-plugin-catch-links@2.3.12
npm ERR!     node_modules/gatsby-plugin-catch-links
npm ERR!       gatsby-plugin-catch-links@"^2.0.0" from the root project
npm ERR!     21 more (gatsby-plugin-feed, gatsby-plugin-glamor, ...)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Lenovo\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Lenovo\AppData\Local\npm-cache\_logs\2023-03-11T06_02_26_727Z-debug-0.log
Judee-web commented 1 year ago

You might want to use docker or learn about it for long term solution. Docker helps you work with different versions of an application using what is called containers to avoid package/dependency conflict.

You can try npm install --force to ignore dependency version conflict.

or

npm install -legacy-peer-deps

gurnoor-garry commented 1 year ago

Hi there

Can you please share your node js version.

nagac121 commented 1 year ago

Hi @gurnoor-garry Thanks for taking a look. My node version is v16.16.0

nagac121 commented 1 year ago

You might want to use docker or learn about it for long term solution. Docker helps you work with different versions of an application using what is called containers to avoid package/dependency conflict.

You can try npm install --force to ignore dependency version conflict.

or

npm install -legacy-peer-deps

Are there any steps on how to make this work using docker approach? but I still prefer norma npm i approach if it works!