I am trying to get google adsense to work with my application. I have a react SSR application so I am trying to implement the react-ssr-adsense package. Code changes to implement include installing the package, updating the head section of the ssr template with the script tag shown below and then adding the Adsense code below. The Adsense component has been added in a div just below the main component on the pages that I want to render ads.
// 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'
/>
When I run the application and it hits the Adsense component I get the following error:
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app
As my code changes were simply as stated I assumed my problem was either 1 or 3. I performed some analysis by running the npm commands, "npm outdated" and "npm ls react-dom". This showed that I had both outdated packages and two versions of react. The second react version, 17.0.2 was due to the install of react-ssr-adsense.
I then updated all my packages, deleted my node modules directory and then ran npm install to refresh all packages. I then reran "npm outdated" and can see that all of my packages are inline with the “Wanted” packages. In my package.json file the react version is 17.0.2. When I ran, "npm ls react-dom", I got the following message:
PS C:\Users\jterr\Documents\NodeProjects\TeachLearnGame> npm ls react-dom
[email protected] C:\Users\jterr\Documents\NodeProjects\TeachLearnGame
+-- UNMET PEER DEPENDENCY [email protected]
npm ERR! peer dep missing: react-dom@^16.8.0, required by @material-ui/[email protected]
npm ERR! peer dep missing: react-dom@^16.3.0, required by [email protected]
npm ERR! peer dep missing: react-dom@^15.0.0 || ^16.0.0, required by [email protected]
I am not sure how to interpret this response. Appreciate any suggestions on what I need to do to reconcile and get the component to work. What do I need to do to resolve these errors and the "Invalid Hooks" error I am getting when trying to render the Adsense code? The latter request is the more pressing.
Here is the output from the npm outdated command Package Current Wanted Latest Location @babel/core 7.9.0 7.9.0 7.15.8 teachlearngame
@babel/preset-env 7.9.0 7.9.0 7.15.8 teachlearngame
@babel/preset-react 7.9.4 7.9.4 7.14.5 teachlearngame
@hot-loader/react-dom 16.13.0 16.13.0 17.0.1 teachlearngame
@material-ui/icons 4.9.1 4.9.1 4.11.2 teachlearngame
babel-loader 8.1.0 8.1.0 8.2.2 teachlearngame
express-jwt 5.3.1 5.3.1 6.1.0 teachlearngame
file-loader 6.0.0 6.0.0 6.2.0 teachlearngame
helmet 3.22.0 3.22.0 4.6.0 teachlearngame
lodash 4.17.15 4.17.15 4.17.21 teachlearngame
mongoose 5.13.11 5.13.11 6.0.11 teachlearngame
nodemon 2.0.2 2.0.2 2.0.13 teachlearngame
react-hot-loader 4.12.20 4.12.20 4.13.0 teachlearngame
react-resizable 1.11.1 1.11.1 3.0.4 teachlearngame
react-router 5.1.2 5.1.2 5.2.1 teachlearngame
react-router-dom 5.1.2 5.1.2 5.3.0 teachlearngame
react-swipeable-views 0.13.9 0.13.9 0.14.0 teachlearngame
webpack 4.46.0 4.46.0 5.58.2 teachlearngame
webpack-cli 3.3.11 3.3.11 4.9.0 teachlearngame
webpack-dev-middleware 3.7.3 3.7.3 5.2.1 teachlearngame
webpack-node-externals 1.7.2 1.7.2 3.0.0 teachlearngame
As previously stated, I had to upgrade react to version 17.0.2 in order for the react-ssr-adsense package to work and to ensure I only had one version of react running. Those steps were as stated above.
I was able to clear up errors that showed up in the console log ("Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:...") but removing the package-lock.json file, removing the node_modules folder and then rerunning npm install. After making these changes I ran the application locally and had errors appeared whenever the ads tried to render. I have moved my application to the web (hosted at Heroku) and have requested it be reviewed for approval. I am still getting an error when the adunits try to render. The error is as follows...
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)'}
I assume this is because I have not yet been approved by google but would appreciate any advice someone might be able to provide in helping to get approval from Google.