Did not expect server HTML to contain a <ins> in <ins> - AdSense ad within react hybrid

Question

I have a little problem with loading AdSense ads with react. The site is based on asp.net and I normally render react components on the server-side using @Html.React("name of the component") and then if I need I update components with fetch calls so essentially hybrid solution.

In the case of AdSense, unfortunately, I get this error:

Warning: Did not expect server HTML to contain a <ins> in <ins>

As I understand it complains that server-rendered markup has been changed on the client-side, obviously due to AdSense loading ads once the page is loaded in the browser. In the result, in Chrome I can't see ads but somehow it does manage to load them on Firefox :/

Unfortunately, I'm not sure how can I fix it... how can I let know react that this component is ok to be changed on client-side?

Here is component code:

import React from "react";

import { IAdSenseAdProps } from "./IAdSenseAdProps";

export class AdSenseAd extends React.Component<IAdSenseAdProps, {}> {
    constructor(props: IAdSenseAdProps) {
        super(props);
    }

    componentDidMount() {
        (window.adsbygoogle = window.adsbygoogle || []).push({});
    };

    render() {
        return (
            <ins
                className="adsbygoogle"
                data-adtest={this.props.dataAdTest}
                {...this.props.style != null && { "style": this.props.style }}
                {...this.props.dataAdFormat != null && { "data-ad-format": this.props.dataAdFormat }}
                {...this.props.dataAdLayoutKey != null && { "data-ad-layout-key": this.props.dataAdLayoutKey }}
                data-ad-client={this.props.dataAdClient}
                data-ad-slot={this.props.dataAdSlot}>
            </ins>
        );
    }
}

I fully appreciate that there are plenty of similar questions - I've seen them all but none of them seems to be solving this problem. Any help very appreciated :)

Answer 1

I think I have just managed to fix it. I know it's not the best solution but seems to be working. Hope will help others.

I essentially managed to cheat react and added fake HTML structure. Same html structure that AdSense is using so my code now looks like this:

import React from "react";

import { IAdSenseAdProps } from "./IAdSenseAdProps";

export class AdSenseAd extends React.Component<IAdSenseAdProps, {}> {
    constructor(props: IAdSenseAdProps) {
        super(props);
    }

    componentDidMount() {
        (window.adsbygoogle = window.adsbygoogle || []).push({});
    };

    render() {
        return (
            <ins
                className="adsbygoogle"
                data-adtest={this.props.dataAdTest}
                {...this.props.style != null && { "style": this.props.style }}
                {...this.props.dataAdFormat != null && { "data-ad-format": this.props.dataAdFormat }}
                {...this.props.dataAdLayoutKey != null && { "data-ad-layout-key": this.props.dataAdLayoutKey }}
                data-ad-client={this.props.dataAdClient}
                data-ad-slot={this.props.dataAdSlot}>
                <ins><ins><iframe></iframe></ins></ins>
            </ins>
        );
    }
}

I started getting a new error:

Extra attributes from the server: width,height,frameborder,marginwidth,marginheight,vspace,hspace,allowtransparency,scrolling,allowfullscreen,onload,id,name,style

but at least now ads are loading and working as expected :)