未找到模块：无法解析“react-linkedin-login-oauth2”

Question

我试图安装一个登录与LinkedIn功能到React应用程序。因此，我使用了npx create-react-app kekap并运行了npm安装nvh95/react-领英-login-oAuth2#拉/42/head，考虑到当前版本的react-领英-login-oAuth2安装不工作。在添加了GitHub自述文件中建议的示例文件后，作为测试应用程序的一种手段，似乎找不到该模块。

编译失败。

./src/App。未找到js模块：无法解析“D:\workspace\kekap\src”中的“react-linkedin-login-oauth2”

我的应用程序。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;

包裹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": {
    "producthtml" target="_blank">ion": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

npm审计给了我82个中等严重的漏洞。但是修复了在版本@4.0.3（当前）和@1.1.5（我猜是过时的模块需要的）之间切换我。

有人知道怎么解决这个问题吗？我该如何进一步解决这个问题？到目前为止，我只在Coursera上学习了React课程，所以除了简单的谷歌查询可以解决的问题之外，我几乎没有什么经验。

非常感谢！

Answer 1

在我的本地计算机上，以下各项工作正常：

• npx创建反应应用程序kekap

请注意，“工作正常”是指react应用程序启动时没有错误。

然而，与演示应用相反，Linkedin没有登录按钮。原因是您提供了应用程序。js与演示应用程序中的js不同。您链接到的js，它使用名为LinkedInPage的附加组件。

要使这样一个按钮出现，我们不需要额外的LinkedInPage组件。我们需要做的就是使用提供的LinkedIn组件（npm模块附带），所以App。js应该变成：

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;