Having difficulties to integrate reactjs-social-login into my app

[pdipietro]

Hi Nguyen,

I'm in trouble trying to integrate your component into my ReactJS application.

Here is what I've done:

I added the following lines to my package.json file:

    "react-social-login-buttons": "^3.6.0",
    "reactjs-social-login": "^1.5.2",

Then, I added the following lines to my .env.development and to my .env development:

NODE_ENV=development

REACT_APP_FB_APP_ID='1234567890'

REACT_APP_GG_APP_ID='1234567890.apps.googleusercontent.com'

REACT_APP_INSTAGRAM_APP_ID=
REACT_APP_INSTAGRAM_APP_SECRET=

REACT_APP_TWITTER_APP_ID='1234567890'
REACT_APP_TWITTER_API_KEY='kkkkkkkkkkkk'
REACT_APP_TWITTER_APP_SECRET='ssssssssssssss'
REACT_APP_TWITTER_TOKEN='AAAAAAAAAAAAAAAAAAAAA'

REACT_APP_AMAZON_APP_ID=

REACT_APP_MICROSOFT_APP_ID=

REACT_APP_LINKEDIN_APP_SECRET=
REACT_APP_LINKEDIN_APP_ID=

REACT_APP_GITHUB_APP_ID=
REACT_APP_GITHUB_APP_SECRET=

REACT_APP_PINTEREST_APP_ID=
REACT_APP_PINTEREST_APP_SECRET=

As you can see, my goal is to add social login only for facebook, twitter and google.

The I added the following instruction to my app.js :

import Login from './components/Login/Login.tsx';
......
              <Route path='/login' exact component={Login} />

I also added the following line to my header.js file:

            <Nav.Link className="effect1" href="/login">Login</Nav.Link>

Then I just copied your app.js file and renamed it as Login.tsx, just to avoid results

The result for this step has been a compilation error at the line const amazonRef = useRef<TypeCrossFunction>(null!): it doesn't like the '(null!)':

src/components/Login/Login.tsx
  Line 37:51:  Parsing error: Unexpected token, expected ","

  35 |   const [provider, setProvider] = useState('')
  36 |   const [profile, setProfile] = useState<any>()
> 37 |   const amazonRef = useRef<TypeCrossFunction>(null!)

I tried to ask on https://stackoverflow.com/questions/70822827/what-is-the-meaning-of-usereftypecrossfunctionnull-which-also-returns-a-co?noredirect=1#comment125203765_70822827 and it ended up with a downvoting and the following answer (on a comment):

Side note: const amazonRef = useRef<TypeCrossFunction>(null!) is really poor practice, you end up with a ref that thinks current is always a non-null value, but it starts out with a null value. – 
T.J. Crowder

I also made the following attempt:
I copied the Login.tsx as a Login.js and removed all the typescript extensions.
The result run only partially: it open the facebook login, but simply ignore the 'Google` one.

And so, my final question is:

`How can I use your component into my ReactJS application'?

[cuongdevjs]

oh, all you need to do is:

1. npm install reactjs-social-login
2. code example on this file: https://github.com/cuongdevjs/reactjs-social-login/blob/master/example/src/App.tsx
3. this code uses typescript, if you want to convert to javascript, don't hesitate to tell me, I'll willing to help

[pdipietro]

I just imported your code.
The user.js file returns:

Failed to compile.

src/components/Login/User.js
  Line 3:21:   Component definition is missing display name                      react/display-name
  Line 3:29:   'provider' is missing in props validation                         react/prop-types
  Line 3:39:   'profile' is missing in props validation                          react/prop-types
  Line 3:48:   'onLogout' is missing in props validation                         react/prop-types
  Line 5:14:   'profile.avatar' is missing in props validation                   react/prop-types
  Line 6:14:   'profile.avatar_url' is missing in props validation               react/prop-types
  Line 7:14:   'profile.picture' is missing in props validation                  react/prop-types
  Line 7:23:   'profile.picture.data' is missing in props validation             react/prop-types
  Line 7:29:   'profile.picture.data.url' is missing in props validation         react/prop-types
  Line 8:14:   'profile.profile_image_url_https' is missing in props validation  react/prop-types
  Line 17:42:  'provider.toUpperCase' is missing in props validation             react/prop-types

Search for the keywords to learn more about each error.

[cuongdevjs]

maybe you using prop-type validation of eslint, you need to add prop-type on User.js

[cuongdevjs]

something like this:

User.propTypes = {
    profile: PropTypes.object,
}

[cuongdevjs]

you can read more here: https://reactjs.org/docs/typechecking-with-proptypes.html

[cuongdevjs]

It just warnings

[pdipietro]

I'd like to suggest you some nice capabilities to integrate, if possible:

1. the possibility to have corresponding buttons for each social, but with the appropriate Icon and the text 'Logout'

2. the possibility to have corresponding buttons for each social, with Icon, username and User avatar
   for both of these capabilities, it should be easy to build a function able to create such two icons merging together the existing icons with the user data.

3. the possibility to integrate the full login component in an existing component:

Here is a fragment of the code which could be used, and where it is realistic to integrate the component:

const Header = ({
  sessionUuid, setSession,
  user, setUser
}) => {

  return (
    <Navbar bg="ligth" expand="md" fixed="top" >
      <Container fluid>

        <Navbar.Brand href="/home" style={{ display: 'flex', flexAlign: 'left' }}>
          <img
            src={logo}
            width={180}
            height={60}
            className="d-inline-block calign-top"
            alt="Nick, il tuo Sommelier virtuale"
          />
        </Navbar.Brand>

        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav" >
          <Nav className="me-auto">
          </Nav>

          <Nav className="main-header">
            <Nav.Link className="effect1" href="/">Home</Nav.Link>
            <Nav.Link className="effect1" href="/about">{t("misc.aboutUs")}</Nav.Link>
            <Nav.Link className="effect1" href="mailto:info@pikeen.com?subject=Info su pikeen!">{t("misc.contactUs")}</Nav.Link>

            {user !== ''
              ?
              <User user={user} onLogout={onLogout} />
              :
              <NavDropdown title="Login" id="basic-login-dropdown" className="effect1" >
                <NavDropdown.Item>
                  <LoginSocialFacebook
                    ref={facebookRef}
                    appId={process.env.REACT_APP_FB_APP_ID || ''}
                    onLoginStart={onLoginStart}
                    onLogoutSuccess={onLogoutSuccess}
                    onResolve={({ provider, data }) => { onLoginSuccess({ provider, data }) }}
                    onReject={(err) => { console.log(err) }}
                  >
                    <FacebookLoginButton />
                  </LoginSocialFacebook>
                </NavDropdown.Item>

                <NavDropdown.Divider />

                <NavDropdown.Item>
                  <LoginSocialGoogle
                    ref={googleRef}
                    client_id={process.env.REACT_APP_GG_APP_ID || ''}
                    onLogoutFailure={onLogoutFailure}
                    onLoginStart={onLoginStart}
                    onLogoutSuccess={onLogoutSuccess}
                    onResolve={({ provider, data }) => onLoginSuccess({ provider, data })}
                    onReject={(err) => { console.log(err) }}
                  >
                    <GoogleLoginButton />
                  </LoginSocialGoogle>
                </NavDropdown.Item>

... and so on ...

The interesting thing should be having the user data and a sessionUuid (or whatever else) to be used outside the component.

[cuongdevjs]

I appreciate your feedback. In 3 of your case above, you totally do it by code, I always want users can comfortably customize UI to suitable their requirements.
With 1, 2 parts, I understand here is you want me to build a separate file to show data after login with each button social, right?
On the last part, you can save user data after login to either redux or context or global state to use outside the component.

[pdipietro]

Yes, for part 1 should be nice to have something like

import {
    LoginSocialGoogle,
    LoginSocialAmazon,
    ...
} from "reactjs-social-logout";

and for part 2

import {
    LoginSocialGoogle,
    LoginSocialAmazon,
    ...
} from "reactjs-social-icons";

const userButton = (user, provider) => {
     return (
        <>
           <span className="userButton"  onClick={onLogout}>
                <img alt="51" src={providerIcon} />
                <span>{profile.fullName} />
                <img alt="51" src={avatar} />
          </span>
       </>
    )
}

[cuongdevjs]

Maybe that is you need: https://codesandbox.io/s/throbbing-glade-f9e59?file=/src/App.js

[cuongdevjs]

Please see files github.js and instagram.js

[pdipietro]

I saw those files, but they are for Login.

For part 1, I need the same buttons as your github and instagram example, but with the github/instagram icon and the label 'Logout' (or maybe something customizable). There should be something like GithubLogoutButton!!!

For Part 2, it could be an enhancement of part 1: instead of a social Icon and a Logout phrase, there could be the social icon, the user name and the user avatar, then it could be used both in a dropdown to let the user change his/her profile and to logout

[pdipietro]

The part

            {provider && profile && (
                <User provider={provider} profile={profile} onLogout={onLogout} />
            )}
            <NavDropdown title="Login" id="basic-login-dropdown" className={`effect1 App ${provider ? "hide" : ""}`}>

is a really nasty for me:

After a successfully login, I have both user data displayed and the Login button.

It could be provider && profile ? Logout : Login

[cuongdevjs]

Sorry, Maybe I make you confused. You need to make the logout button by yourself and use the function logout through useRef on each social button, like this: facebookRef.current?.onLogout. On my code, the logout button put inside User.js

One thing you need notable is on the component you put ref <LoginSocialFacebook ref={facebookRef} ... />, you can't destroy it because facebookRef needs it to use function onLogout. Instead, you can hide it by CSS after login success (check login success by provider & profile state)

[pdipietro]

Ok, understood why you just hide it.

[pdipietro]

What is the meaning or when and why is used REDIRECT_URI

const REDIRECT_URI = "https://7923-123-16-241-177.ap.ngrok.io/account/login";

???

[cuongdevjs]

redirect_uri is a URL that is redirected after login success. Imagine you click button fb, the popup shows up, after you log in success, REDIRECT_URI will be used to redirect to.

You need to configure redirect_uri in where you get APP_ID, for example https://developers.facebook.com/

Normally, REDIRECT_URI is the domain where you deploy the code. For example, your project deploy at abc.com, login URL is acb.com/login so you need to configure acb.com/login on app developer (https://developers.facebook.com/) and fill const REDIRECT_URI = "https://abc.com/login";

[cuongdevjs]

my example for facebook developer

[pdipietro]

Yes, I understand. And that is the domain I specified with both facebook and google.
It is not clear, for me, its meaning here:

When I do login not full page, but in a little view on my app, I just want to remain were I am, just changing the state from 'user known' to 'user unknown', and therefore, change the login button to a logout button and viceversa.

What if I don't specify the redirect url here? I used your URL with my app id and it runs!

[pdipietro]

Don't know why, my my application logins with fb and google just maintaining your REDIRECT_URI.
And yes, I defined my REDIRECT_URI in fb and google application definition

[cuongdevjs]

Yes, it is the mechanism of oAuth. You can read more further at https://www.oauth.com/oauth2-servers/redirect-uris/

The mechanism of OAuth requires params REDIRECT_URI to know the domain will be redirected after login success and also close popup login after login success.

[pdipietro]

As I'm having troubles with an infinite loop in React while deploying the Login component, can you please give a look at this question?
https://stackoverflow.com/questions/70896520/an-infinite-loop-in-react-depending-on-the-position-of-one-state-declaration

[cuongdevjs]

Personally, I think it's an issue about React. Maybe you need to spend a couple of hours learning about the core of React, Redux.

[cuongdevjs]

You can be made an example to codesandbox.com so I can help you.

[pdipietro]

I solved quite all of the issues installing the React LTS version.
There is the 'Twitter Login` which doesn't run, in you demo application too.
I opened an issue for that, so, if you can give it a look ....

[pdipietro]

I'm sorry to bother you, but I'm in troubles with a compile error.

I created a new application with npx create-react-app myapp, I loaded all the stuff related to reactjs-social-login.

This is the package.json file:

{
  "name": "kebrachatbotnew",
  "version": "1.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.25.0",
    "react": "^17.0.2",
    "react-bootstrap": "^2.1.2",
    "react-cookie": "^4.1.1",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "react-social-login-buttons": "^3.6.0",
    "reactjs-social-login": "^1.5.2",
    "uuid": "^8.3.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

This is the error I receive when I npm start:

> kebrachatbotnew@1.1.0 start
> react-scripts start

Starting the development server...

Failed to compile.

Attempted import error: 'LoginSocialFacebook' is not exported from 'reactjs-social-login' (imported as 'LoginSocialFacebook').
assets by path static/js/*.js 2.1 MiB
  asset static/js/bundle.js 2.09 MiB [emitted] (name: main) 1 related asset
  asset static/js/node_modules_web-vitals_dist_web-vitals_js.chunk.js 6.94 KiB [emitted] 1 related asset
asset index.html 1.67 KiB [emitted]
asset asset-manifest.json 458 bytes [emitted]
cached modules 2.04 MiB (javascript) 31.3 KiB (runtime) [cached] 472 modules

ERROR in ./src/components/Login/Login.js 146:41-60
export 'LoginSocialFacebook' (imported as 'LoginSocialFacebook') was not found in 'reactjs-social-login' (module has no exports)
 @ ./src/components/Header/Header.js 4:0-35 50:12-17
 @ ./src/App.js 7:0-48 20:35-41
 @ ./src/index.js 8:0-24 12:33-36

ERROR in ./src/components/Login/Login.js 180:41-58
export 'LoginSocialGoogle' (imported as 'LoginSocialGoogle') was not found in 'reactjs-social-login' (module has no exports)
 @ ./src/components/Header/Header.js 4:0-35 50:12-17
 @ ./src/App.js 7:0-48 20:35-41
 @ ./src/index.js 8:0-24 12:33-36

ERROR in ./src/components/Login/Login.js 214:41-61
export 'LoginSocialInstagram' (imported as 'LoginSocialInstagram') was not found in 'reactjs-social-login' (module has no exports)
 @ ./src/components/Header/Header.js 4:0-35 50:12-17
 @ ./src/App.js 7:0-48 20:35-41
 @ ./src/index.js 8:0-24 12:33-36

ERROR in ./src/components/Login/Login.js 250:41-59
export 'LoginSocialTwitter' (imported as 'LoginSocialTwitter') was not found in 'reactjs-social-login' (module has no exports)
 @ ./src/components/Header/Header.js 4:0-35 50:12-17
 @ ./src/App.js 7:0-48 20:35-41
 @ ./src/index.js 8:0-24 12:33-36

webpack 5.68.0 compiled with 4 errors in 1540 ms

the login.js file is the following one:

import React from "react";
import { v4 as uuid } from "uuid";
import { axios } from "axios";

import { useCookies } from "react-cookie";

import { NavDropdown } from "react-bootstrap";

import { User } from "./User";
import { useRef, useEffect } from "react";

import {
  LoginSocialGoogle,
  LoginSocialFacebook,
  LoginSocialInstagram,
  LoginSocialTwitter
} from "reactjs-social-login";

import {
  FacebookLoginButton,
  GoogleLoginButton,
  InstagramLoginButton,
  TwitterLoginButton
} from "react-social-login-buttons";

const REDIRECT_URI = "https://www.pikeen.com";

const Login = ({ user, setUser }) => {
  // eslint-disable-next-line no-unused-vars
  //    const [sessionUuid, setSessionUuid] = useState(undefined);
  const providerRef = useRef(null);

  // eslint-disable-next-line no-unused-vars
  const [cookies, setCookie, removeCookie] = useCookies([
    "sessionUuid",
    "userProvider",
    "userName",
    "userId",
    "userAvatar",
    "userExpires"
  ]);

  // eslint-disable-next-line no-undef
  const { REACT_APP_APP_SERVER } = process.env;
  const { REACT_APP_APPLICATION } = process.env;
  const application = REACT_APP_APPLICATION;
  // eslint-disable-next-line no-unused-vars
  const alivePath = REACT_APP_APP_SERVER + "/users/alive";
  const loginPath = REACT_APP_APP_SERVER + "/users/login";
  const logoutPath = REACT_APP_APP_SERVER + "/users/logout";

  const standardizedUserData = (prov, prof) => {
    var stdUD = {};
    stdUD.sessionUuid = uuid();
    stdUD.environment = application;
    switch (prov) {
      case "facebook":
        stdUD.provider = prov;
        stdUD.name = prof.name;
        stdUD.userId = prov + "-" + prof.id;
        stdUD.avatar = prof.picture.data.url;
        stdUD.expiresIn = prof.expiresIn;
        stdUD.data_access_expiration_time = prof.data_access_expiration_time;
        stdUD.expiresOnDate = new Date(prof.data_access_expiration_time * 1000);
        break;
      case "google":
        stdUD.provider = prov;
        stdUD.name = prof.name;
        stdUD.userId = prov + "-" + prof.id;
        stdUD.avatar = prof.avatar;
        stdUD.expiresIn = prof.expires_in;
        stdUD.data_access_expiration_time = prof.expires_at;
        stdUD.expiresOnDate = new Date(prof.data_access_expiration_time * 1000);
        break;
      case "instagram":
        stdUD.provider = prov;
        stdUD.name = prof.name;
        stdUD.userId = prov + "-" + prof.id;
        stdUD.avatar = prof.avatar;
        break;
      case "twitter":
        stdUD.provider = prov;
        stdUD.name = prof.name;
        stdUD.userId = prov + "-" + prof.id;
        stdUD.avatar = prof.avatar;
        break;
      default:
        stdUD = null;
        break;
    }
    return stdUD;
  };

  useEffect(() => {
    const createSession = () => {
      setCookie("sessionUuid", user.sessionUuid);
      setCookie("userId", user.userId);
      setCookie("userName", user.name);
      setCookie("userProvider", user.provider);
      setCookie("userAvatar", user.avatar);
      setCookie("userExpires", user.expiresOnDate);

      axios.put(loginPath, { data: [user] });
    };

    if (user !== "") createSession();
  }, [user, loginPath, setCookie, setUser]);

  function clearLogin() {
    removeCookie("sessionUuid");
    removeCookie("userId");
    removeCookie("userName");
    removeCookie("userProvider");
    removeCookie("userAvatar");
    removeCookie("userExpires");
  }

  const onLogoutFailure = () => {
    clearLogin();
  };

  const onLogout = () => {
    axios.put(logoutPath, { data: [user] }).catch((error) => {
      console.log("/logout error: " + error);
    });

    if (providerRef !== null) providerRef.current.onLogout();

    clearLogin();
  };

  //    if (user === '') clearLogin();

  return (
    <>
      {user !== "" && <User user={user} onLogout={onLogout} />}

      <div className={`${user !== "" ? "hide" : ""}`}>
        <NavDropdown title="Login" id="basic-login-dropdown">
          <NavDropdown.Item>
            <LoginSocialFacebook
              ref={providerRef}
              // eslint-disable-next-line no-undef
              appId={process.env.REACT_APP_FB_APP_ID || ""}
              fieldsProfile={
                "id,first_name,last_name,middle_name,name,name_format,picture,short_name,email,gender"
              }
              onResolve={({ provider, data }) => {
                setUser(standardizedUserData(provider, data));
              }}
              onReject={(err) => {
                console.log(err);
              }}
            >
              <FacebookLoginButton />
            </LoginSocialFacebook>
          </NavDropdown.Item>

          <NavDropdown.Divider />

          <NavDropdown.Item>
            <LoginSocialGoogle
              ref={providerRef}
              // eslint-disable-next-line no-undef
              client_id={process.env.REACT_APP_GG_APP_ID || ""}
              onLogoutFailure={onLogoutFailure}
              onResolve={({ provider, data }) => {
                setUser(standardizedUserData(provider, data));
              }}
              onReject={(err) => {
                console.log(err);
              }}
            >
              <GoogleLoginButton />
            </LoginSocialGoogle>
          </NavDropdown.Item>

          <NavDropdown.Divider />

          <NavDropdown.Item>
            <LoginSocialInstagram
              ref={providerRef}
              // eslint-disable-next-line no-undef
              client_id={process.env.REACT_APP_INSTAGRAM_APP_ID || ""}
              // eslint-disable-next-line no-undef
              client_secret={process.env.REACT_APP_INSTAGRAM_APP_SECRET || ""}
              redirect_uri={REDIRECT_URI}
              onResolve={({ provider, data }) => {
                setUser(standardizedUserData(provider, data));
              }}
              onReject={(err) => {
                console.log(err);
              }}
            >
              <InstagramLoginButton />
            </LoginSocialInstagram>
          </NavDropdown.Item>

          <NavDropdown.Divider />

          <NavDropdown.Item>
            <LoginSocialTwitter
              ref={providerRef}
              // eslint-disable-next-line no-undef
              client_id={process.env.REACT_APP_TWITTER_API_KEY || ""}
              // eslint-disable-next-line no-undef
              client_secret={process.env.REACT_APP_TWITTER_APP_SECRET || ""}
              redirect_uri={REDIRECT_URI}
              onResolve={({ provider, data }) => {
                setUser(standardizedUserData(provider, data));
              }}
              onReject={(err) => {
                console.log(err);
              }}
            >
              <TwitterLoginButton />
            </LoginSocialTwitter>
          </NavDropdown.Item>
        </NavDropdown>
      </div>
    </>
  );
};

export default Login;

Any help will be really appreciated.

Paolo

[cuongdevjs]

Hi. Is it happening on neither the local nor server?

[pdipietro]

I'm on my Linux Machine (Ubuntu 20.04.3 LTS) and I'm acting as a developer.

I created an exact copy of my application on https://codesandbox.io/s/reactjs-social-login-forked-dqui5?file=/package.json
This sandbox runs without those errors.
The code is exactly the same running on my machine, and the components are all at the same version level.

I tried two or three times to recreate from scratch with npx create-react-app myapp then installing all the components, as in the sandbox.

But the result in the react VSC terminal is the one you have seen above, while the result of running the application on localhost:3000 is the following:

Compiled with problems:X

ERROR in ./src/components/Login/Login.js 146:41-60

export 'LoginSocialFacebook' (imported as 'LoginSocialFacebook') was not found in 'reactjs-social-login' (module has no exports)


ERROR in ./src/components/Login/Login.js 180:41-58

export 'LoginSocialGoogle' (imported as 'LoginSocialGoogle') was not found in 'reactjs-social-login' (module has no exports)


ERROR in ./src/components/Login/Login.js 214:41-61

export 'LoginSocialInstagram' (imported as 'LoginSocialInstagram') was not found in 'reactjs-social-login' (module has no exports)


ERROR in ./src/components/Login/Login.js 250:41-59

export 'LoginSocialTwitter' (imported as 'LoginSocialTwitter') was not found in 'reactjs-social-login' (module has no exports)

That's all from my side!

[pdipietro]

I made a mistake, and changed my sandbox address: it is https://codesandbox.io/s/reactjs-social-login-forked-dqui5?file=/package.json . As I stated above, the code in the sandbox runs, but not on my machine, returning the error signaled in my previous comment.

Do you think you can help with this problem and with twitter? I'm stuck, because it doesn't compile. So I cannot use the component.

If we cannot solve, I'll must find a different solution, and I'm afraid for this because it looks like a great piece of software, but still with something to be refined for going in production!!!

[pdipietro]

BTW, I downloaded your sample from https://codesandbox.io/s/throbbing-glade-f9e59?file=/src/App.js:23-54 and when I npm i I received this error:

neo4j@neo4j:/experiment/sandbox$ npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: react-scripts@4.0.0
npm ERR! Found: typescript@4.1.3
npm ERR! node_modules/typescript
npm ERR!   dev typescript@"4.1.3" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@"^3.2.1" from react-scripts@4.0.0
npm ERR! node_modules/react-scripts
npm ERR!   react-scripts@"4.0.0" 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@4.0.0
npm ERR!   node_modules/react-scripts
npm ERR!     react-scripts@"4.0.0" 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 /home/neo4j/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/neo4j/.npm/_logs/2022-02-07T13_33_36_622Z-debug-0.log
neo4j@neo4j:/experiment/sandbox$ 

[pdipietro]

I think to have isolated the problem:

As I created a new application using 'npx create-react-app myapp'. it install the latest react-script that is 5.0. This is a change unsupported by your application: webpack is more severe.

I also tried to install run with react-script=4.0.0, but there also there are incompatibilities.

Can we somehow proceed? Is there any way I can help you to fix the problem?