找不到模块：无法解析 'react-linkedin-login-oauth2'
找不到模块：无法解析 'react-linkedin-login-oauth2'
我正在尝试将“使用LinkedIn登录”功能安装到React应用程序中。因此，我使用了npx create-react-app kekap并运行了npm install nvh95/react-linkedin-login-oauth2#pull/42/head，因为当前版本的react-linkedin-login-oauth2不起作用。在按照GitHub自述文件中提供的示例文件添加到应用程序后，似乎无法找到该模块。\n
\n编译失败。\n./src/App.js\n找不到模块：无法解析 \'react-linkedin-login-oauth2\' 在 \'D:\\workspaces\\kekap\\src\' 中\n
\n我的App.js文件：\n
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 (
);
}
}
export default App;
\npackage.json文件：\n{\n \"name\": \"kekap\",\n \"homepage\": \"/wp-content/themes/screenr/templates/build/\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^5.12.0\",\n \"@testing-library/react\": \"^11.2.7\",\n \"@testing-library/user-event\": \"^12.8.3\",\n \"react\": \"^17.0.2\",\n \"react-dom\": \"^17.0.2\",\n \"react-linkedin-login-oauth2\": \"github:nvh95/react-linkedin-login-oauth2#pull/42/head\",\n \"react-router\": \"^5.2.0\",\n \"react-router-dom\": \"^5.2.0\",\n \"react-scripts\": \"^4.0.3\",\n \"web-vitals\": \"^1.1.2\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": [\n \"react-app\",\n \"react-app/jest\"\n ]\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n\nnpm audit显示82个中度的安全漏洞。修复操作在react-scripts的@4.0.3（当前）和@1.1.5（我猜是过时模块所需的版本）之间切换。\n有人知道如何解决这个问题吗？我应该如何进一步排除故障？到目前为止，我只参加了Coursera上的一个React课程，所以除了简单的谷歌查询外，我几乎没有经验。\n非常感谢！
问题出现的原因是在使用react应用时，找不到名为'react-linkedin-login-oauth2'的模块。解决方法是在项目中安装该模块并引入相应组件。
具体步骤如下：
1. 使用命令npx create-react-app kekap创建一个新的React应用。
2. 进入创建的应用目录，使用命令cd kekap。
3. 用提供的App.js替换原来创建的App.js文件。
4. 用提供的package.json替换原来创建的package.json文件。
5. 使用命令npm install安装项目所需的依赖。
6. 运行命令npm start启动应用。
需要注意的是，提供的App.js与演示中的App.js不同，演示中使用了一个名为LinkedInPage的额外组件。为了在应用中添加LinkedIn登录按钮，我们只需要使用提供的LinkedIn组件即可。因此，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 (
);
}
}
export default App;
如果按照OfirD的解决方案重试步骤，应用可以正常工作，但无法填写所需的clientId，导致LinkedInPopUp出现错误。但是，只要添加LinkedInPage组件，应用就会在导入linkedin时出错。在本地添加该文件并使用自己的LinkedIn clientId后，应用将正常工作并获取所需的授权令牌。
总之，你可以使用演示中的LinkedInPage，但是需要注意添加assets文件夹。但是，这不是必须的，你可以直接使用提供的LinkedIn组件并将clientid传递给它。你可以参考上面的代码示例。
另外，需要注意的是，当点击按钮时打开的“popup”实际上不是LinkedInPopUp，而是一个使用名为getPopupPositionProperties的函数构建的简单窗口。一旦用户登录到LinkedIn，就会打开LinkedInPopUp窗口并关闭该“popup”窗口。
希望对你有帮助，不客气！如果觉得有帮助，请考虑给予悬赏。