Module not found: Can't resolve 'react-linkedin-login-oauth2' - reactjs

Question

I'm trying to install a 'Log in with LinkedIn' functionality into a React app. Therefore I've used npx create-react-app kekap and ran npm install nvh95/react-linkedin-login-oauth2#pull/42/head, considering the current version install of react-linkedin-login-oauth2 wasn't working. After adding the sample files as proposed in the GitHub readme as a means of testing the application can't seem to find the module.
Failed to compile.
./src/App.js
Module not found: Can't resolve 'react-linkedin-login-oauth2' in 'D:\workspaces\kekap\src'
My App.js:
import { Component } from 'react';
import { LinkedInPopUp } from 'react-linkedin-login-oauth2';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<BrowserRouter>
<Switch >
<Route exact path="/linkedin" component={LinkedInPopUp} />
</Switch>
</BrowserRouter>
</header>
</div>
);
}
}
export default App;
package.json:
{
"name": "kekap",
"homepage": "/wp-content/themes/screenr/templates/build/",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-linkedin-login-oauth2": "github:nvh95/react-linkedin-login-oauth2#pull/42/head",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"web-vitals": "^1.1.2"
},
"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"
]
}
}
npm audit is giving me 82 moderate severity vulnerabilities. Fixes however switch me between versions #4.0.3 (current) and #1.1.5 (required by outdated module I'm guessing) of react-scripts.
Does anyone know how to fix this? How could I troubleshoot this further? Until now I've only followed a React course on Coursera, so I have little experience beyond what a simple Google query can solve.
Much thanks in advance!

Answer 1

The following works fine on my local machine:
npx create-react-app kekap.
cd kekap.
Replaced the created App.js with your provided App.js.
Replaced the created package.json with your provided package.json.
npm install (just that, not npm install nvh95/react-linkedin-login-oauth2#pull/42/head).
After running the above, react-linkedin-login-oauth2 should be present under node_modules. If it isn't, you would probably get an error message saying that it wasn't installed (which may happen with earlier npm versions).
npm start.
Note that by "works fine" I mean that the react app is launched with no errors.
However, as opposed to the demo app, there's no Linkedin sign-in button.
The reason is that your provided App.js is different than the one in the demo App.js you linked to, which uses an additional component named LinkedInPage.
To make such a button appear, we nevertheless don't need that additional LinkedInPage component. All we need to do is use the provided LinkedIn component (which comes with the npm module), so App.js should become:
import { Component } from 'react';
import { LinkedIn, LinkedInPopUp } from 'react-linkedin-login-oauth2';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<BrowserRouter>
<Switch >
<Route exact path="/linkedin" component={LinkedInPopUp} />
<Route path="/">
<LinkedIn clientId="81lx5we2omq9xh" />
</Route>
</Switch>
</BrowserRouter>
</header>
</div>
);
}
}
export default App;

Answer 2

For anyone who has tried above steps.
If you still face the issue make sure you are using react 17 or above
In my case i was using react v 16, tried all these steps but wasn't able to fix the issue. But upgrading to v 17 fixed the issue..