实现 react-ssr-adsense 包的问题答案

【问题标题】：Problem implementing react-ssr-adsense package实现 react-ssr-adsense 包的问题
【发布时间】：2021-10-18 00:33:44
【问题描述】：

我正在尝试让 google adsense 与我的应用程序一起使用。我有一个 react SSR 应用程序，所以我正在尝试实现 react-ssr-adsense 包。要实施的代码更改包括安装软件包、使用下面显示的脚本标记更新 ssr 模板的 head 部分，然后添加下面的 Adsense 代码。 Adsense 组件已添加到我要呈现广告的页面上主要组件下方的 div 中。

// Coded added to template.js
<head>
<script data-ad-client="ca-pub-999999999999" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head>


// Added to each component where I want ads to appear
import AdSense from 'react-ssr-adsense';
   
            <AdSense //FullWidthSquareAd
              client='ca-pub-999999999999'
              slot='xxxxxxxxxx'
              style={{ display: 'block' }}
              format='auto'
              responsive='true'
              layoutKey='-xx-1+yy-zz+vv'
            />

当我运行应用程序并点击 Adsense 组件时，我收到以下错误：

无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：

您可能有不匹配的 React 版本和渲染器（例如 React DOM）
您可能违反了 Hooks 规则
您可能在同一个应用中拥有多个 React 副本

由于我的代码更改很简单，我假设我的问题是 1 或 3。我通过运行 npm 命令“npm outdated”和“npm ls react-dom”进行了一些分析。这表明我有两个过时的包和两个版本的 react。第二个 react 版本 17.0.2 是由于安装了 react-ssr-adsense。

然后我更新了我的所有包，删除了我的节点模块目录，然后运行 npm install 来刷新所有包。然后我重新运行“npm outdated”，可以看到我所有的包都与“Wanted”包内联。在我的 package.json 文件中，反应版本是 17.0.2。当我运行“npm ls react-dom”时，我收到以下消息：

PS C:\Users\jterr\Documents\NodeProjects\TeachLearnGame> npm ls react-dom
trainlearngame@2.0.0 C:\Users\jterr\Documents\NodeProjects\TeachLearnGame

+-- 未满足的对等依赖 react-dom@17.0.2

`-- react-ssr-adsense@1.0.1

`-- react-dom@17.0.2

npm 错误！ peer dep 缺失：react-dom@^16.8.0，@material-ui/icons@4.9.1 需要

npm 错误！ peer dep 缺失：react-dom@^16.3.0，material-auto-rotating-carousel@3.0.2 需要

npm 错误！缺少对等部门：react-dom@^15.0.0 || ^16.0.0，react-hot-loader@4.12.20 需要

我不知道如何解释这个回复。感谢任何关于我需要做些什么来协调和让组件工作的建议。我需要做些什么来解决这些错误以及我在尝试呈现 Adsense 代码时遇到的“Invalid Hooks”错误？后者的要求更为紧迫。

这是 npm outdated 命令的输出包裹当前通缉最新位置 @babel/core 7.9.0 7.9.0 7.15.8 教学游戏

@babel/preset-env 7.9.0 7.9.0 7.15.8 教学游戏

@babel/preset-react 7.9.4 7.9.4 7.14.5 教学游戏

@hot-loader/react-dom 16.13.0 16.13.0 17.0.1 教学游戏

@material-ui/icons 4.9.1 4.9.1 4.11.2 教学游戏

babel-loader 8.1.0 8.1.0 8.2.2 教学游戏

express-jwt 5.3.1 5.3.1 6.1.0 教学游戏

文件加载器 6.0.0 6.0.0 6.2.0 教学游戏

头盔 3.22.0 3.22.0 4.6.0 教学游戏

lodash 4.17.15 4.17.15 4.17.21 教学游戏

猫鼬 5.13.11 5.13.11 6.0.11 教学游戏

nodemon 2.0.2 2.0.2 2.0.13 教学游戏

react-hot-loader 4.12.20 4.12.20 4.13.0 教学游戏

react-resizable 1.11.1 1.11.1 3.0.4 教学游戏

react-router 5.1.2 5.1.2 5.2.1 教学游戏

react-router-dom 5.1.2 5.1.2 5.3.0 教学游戏

react-swipeable-views 0.13.9 0.13.9 0.14.0 教学游戏

webpack 4.46.0 4.46.0 5.58.2 教学游戏

webpack-cli 3.3.11 3.3.11 4.9.0 教学游戏

webpack-dev-middleware 3.7.3 3.7.3 5.2.1 教学游戏

webpack-node-externals 1.7.2 1.7.2 3.0.0 教学游戏

【问题讨论】：

我应该补充一点，在删除节点模块目录后运行 npm install 之前，我没有删除 package-lock.json。我读到我不应该这样做，因为它可能会导致问题 (newbedev.com/…) 但也许我应该这样做，因为讨论的问题发生在多个用户身上，而且我是唯一的开发人员，所以这不会成为问题。如果有人对此步骤有良好的经验以及他们会提供什么建议，我会很感兴趣？

标签： reactjs npm ads adsense react-ssr

【解决方案1】：

如前所述，我必须将 react 升级到 17.0.2 版本才能使 react-ssr-adsense 包工作并确保我只有一个版本的 react 运行。这些步骤如上所述。

我能够清除控制台日志中显示的错误（“无效的挂钩调用。挂钩只能在函数组件的主体内调用。这可能由于以下原因之一发生：... ") 但删除 package-lock.json 文件，删除 node_modules 文件夹，然后重新运行 npm install。进行这些更改后，我在本地运行应用程序，每当广告尝试呈现时都会出现错误。我已将我的应用程序移至网络（托管在 Heroku），并要求对其进行审核以供批准。当 adunits 尝试渲染时，我仍然收到错误消息。错误如下...

L {message: 'adsbygoogle.push() error: No slot size for availableWidth=0', name: 'TagError', pbr: true, stack: 'TagError: adsbygoogle.push() error: No slot size f …esyndication.com/pagead/js/adsbygoogle.js:78:107)'}

我认为这是因为我尚未获得 Google 的批准，但如果有人能够提供任何建议以帮助获得 Google 的批准，我将不胜感激。

【讨论】：