0

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:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. 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
teachlearngame@2.0.0 C:\Users\jterr\Documents\NodeProjects\TeachLearnGame

+-- UNMET PEER DEPENDENCY react-dom@17.0.2

`-- react-ssr-adsense@1.0.1

`-- react-dom@17.0.2

npm ERR! peer dep missing: react-dom@^16.8.0, required by @material-ui/icons@4.9.1

npm ERR! peer dep missing: react-dom@^16.3.0, required by material-auto-rotating-carousel@3.0.2

npm ERR! peer dep missing: react-dom@^15.0.0 || ^16.0.0, required by react-hot-loader@4.12.20

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

j-terranova
  • 539
  • 1
  • 10
  • 23
  • I should add that I did NOT delete package-lock.json before running the npm install after removing node modules directory. I read that I should not do that as it can cause problems (https://newbedev.com/deleting-package-lock-json-to-resolve-conflicts-quickly) but maybe I should as the problems discussed occur with multiple users and I am the only developer so that will not be an issue. I would be interested if anyone has sound experience with this step and what they would advise? – j-terranova Oct 18 '21 at 00:47

1 Answers1

0

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.

j-terranova
  • 539
  • 1
  • 10
  • 23