Can't npm install for current master version

[cshuphys]

I am a bit new to the node and nodejs. While I tried to build frontend myself, I encounter following error. Would appreciate some help. Thanks!

I tried to npm install at the current master branch at streamlit-agraph/streamlit_agraph/frontend

I am using npm 8.19.4 and npm is installed via nodejs 16.20.2 via asdf

Here is log of my error.

>>> npm install                                        
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: react-scripts@3.4.1
npm ERR! Found: typescript@4.7.4
npm ERR! node_modules/typescript
npm ERR!   dev typescript@"^4.6.2" from the root project
npm ERR!   peer typescript@">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta" from tsutils@3.21.0
npm ERR!   node_modules/tsutils
npm ERR!     tsutils@"^3.17.1" from @typescript-eslint/eslint-plugin@2.34.0
npm ERR!     node_modules/@typescript-eslint/eslint-plugin
npm ERR!       peer @typescript-eslint/eslint-plugin@"2.x" from eslint-config-react-app@5.2.1
npm ERR!       node_modules/eslint-config-react-app
npm ERR!         eslint-config-react-app@"^5.2.1" from react-scripts@3.4.1
npm ERR!         node_modules/react-scripts
npm ERR!       1 more (react-scripts)
npm ERR!     tsutils@"^3.17.1" from @typescript-eslint/typescript-estree@2.34.0
npm ERR!     node_modules/@typescript-eslint/typescript-estree
npm ERR!       @typescript-eslint/typescript-estree@"2.34.0" from @typescript-eslint/experimental-utils@2.34.0
npm ERR!       node_modules/@typescript-eslint/experimental-utils
npm ERR!         @typescript-eslint/experimental-utils@"2.34.0" from @typescript-eslint/eslint-plugin@2.34.0
npm ERR!         node_modules/@typescript-eslint/eslint-plugin
npm ERR!         1 more (@typescript-eslint/parser)
npm ERR!       1 more (@typescript-eslint/parser)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@"^3.2.1" from react-scripts@3.4.1
npm ERR! node_modules/react-scripts
npm ERR!   react-scripts@"3.4.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: typescript@3.9.10
npm ERR! node_modules/typescript
npm ERR!   peerOptional typescript@"^3.2.1" from react-scripts@3.4.1
npm ERR!   node_modules/react-scripts
npm ERR!     react-scripts@"3.4.1" from the root project
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 ~/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:

I am in the attempt to to separate functionality of DoubleClickedEvent vs the title that showed up when mouseover. Plan to add a field call link that only used for DoubleClickedEvent.

[cshuphys]

Another thing I noticed that we have node-modules files at frontend location. I notice that there are conflicting lines in the .gitignore. @ChrisDelClea maybe that is upload to the github by accident? Lines in the .gitignore

!/streamlit_agraph/frontend/node_modules/
/streamlit_agraph/frontend/node_modules/

[ChrisDelClea]

The error you're encountering during npm install is related to a dependency resolution conflict involving the typescript version. Specifically, your project is using typescript@4.7.4 which is conflicting with the version required by react-scripts@3.4.1, which expects typescript to be around version 3.9.10.

Solution

Step 1: Understanding the Conflict

react-scripts@3.4.1 requires a version of typescript that is less than 4.0.0, as indicated by the peer dependency requirement peerOptional typescript@"^3.2.1". However, your project has a higher version of typescript (4.7.4), which is not compatible with the required version range.

Step 2: Resolving the Dependency Conflict You have several options to resolve this issue:

Downgrade TypeScript

If your project can accommodate, consider downgrading typescript to a version compatible with react-scripts@3.4.1. This would be a version less than 4.0.0. You can install a compatible version by running:

npm install typescript@3.9.10 --save-exact
The --save-exact flag ensures that typescript is locked to version 3.9.10, which is within the expected range for react-scripts@3.4.1.

Upgrade React Scripts Another approach is to upgrade react-scripts to a version that supports typescript@4.7.4. The latest versions of react-scripts (e.g., 4.x or higher) are likely compatible with newer typescript versions. To upgrade react-scripts, run:

npm install react-scripts@latest

Use the --legacy-peer-deps Option If modifying versions is not suitable, you can instruct npm to ignore peer dependency conflicts by using the --legacy-peer-deps option when installing:

npm install --legacy-peer-deps

This tells npm to use the older dependency resolution algorithm that does not automatically exit on peer dependency conflicts. Use the --force Option As a last resort, you can use the --force flag to force npm to proceed with the installation despite conflicts:

npm install --force

Be aware that using --force can lead to unstable builds if dependencies are not actually compatible.

Step 3: Verify Installation After applying any of the above fixes, ensure to run your application or its tests to verify that all functionalities are working as expected without issues.

Final Recommendation I recommend trying the options in the order listed. Start with downgrading typescript if possible, as this keeps your project in alignment with the react-scripts version you're currently using. Upgrading react-scripts or using --legacy-peer-deps are good alternatives if downgrading typescript introduces other issues.

[cshuphys]

Thanks for the suggestions. I figured it out and update all dependencies. I also rewrote the code using the Functional hook since the code in the current repo doesn't work correctly with the library specified. Will find a time to post it and make a PR. Thanks for looking into this.

[vishhvak]

@cshuphys do you have a fork? I'm trying to make changes and can't build the frontend either

[cshuphys]

I push my version to my fork and made the pull request here https://github.com/ChrisDelClea/streamlit-agraph/pull/59