I am trying to include Google Adsense in a React component using 'react-adsense'.
I have followed the creator's instructions here.
I am getting the following error:
{message: 'adsbygoogle.push() error: No slot size for availableWidth=0', name: 'TagError', pbr: true, stack: 'TagError: adsbygoogle.push() error: No slot size f…oogle.js?client=ca-pub-1034524975771842:102:1098)'}
I have looked into this error and tried the suggestions here, here, and here.
From what I can tell it has something to do with a parent div's width. I've gone through and made sure everything has a set width but no luck. Am I overlooking something super obvious??
REACT COMPONENT
import React from 'react';
import '../styles/ads.css';
import AdSense from 'react-adsense';
const Ads = () => {
return (
<div className='ads'>
<AdSense.Google
client='ca-pub-1034524975771842'
slot='3468851388'
style={{ display: 'block' }}
format='auto'
responsive='true'
layoutKey='-gw-1+2a-9x+5c'
/>
</div>
);
};
export default Ads;
APP.JS
import './styles/app.css';
import React from 'react';
import Ads from './components/Ads';
function App() {
return (
<div className='app'>
<Ads />
</div>
);
}
export default App;
Related
here In my home component I have my sheet title stated down which I exported and I am using Swipe able Bottom Sheet to create a bottom sheet
import React from 'react'
import BottomSheet from '../components/Bottom Sheet';
const HOME = () => {
return (
<div>
<BottomSheet
sheet Title="start room"
/>
</div>
)
}
export default HOME
Importing it in this component, I am trying to set my full Screen by using my props to get access to sheet title and set a conditional of true or false statement like this
import React from 'react'
import SwipeableBottomSheet from "react-swipeable-bottom-sheet"
const BottomSheet = (props) => {
return (
<div>
<SwipeableBottomSheet
FullScreen={props.sheetTitle == 'room detail' ? true : false}>
</SwipeableBottomSheet>
</div>
)
}
export default BottomSheet
This is the error that I am getting TypeError: Cannot assign to read only property 'name' of object '#object
I'm learning Next.js and I'm trying to integrate the #react-aria/overlays package in my project. I have a layout component, where I'm simply invoking the usePreventScroll method like this:
usePreventScroll({
isDisabled: true
});
This layout component is used in my _app.js.
import { useEffect } from 'react'
import { useRouter } from 'next/router'
import * as gtag from '../lib/gtag'
import 'styles/vendor.scss';
import 'styles/globals.scss';
import Layout from 'components/layout';
import { SSRProvider } from '#react-aria/ssr';
const App = ({ Component, pageProps }) => {
return (
<SSRProvider>
<Layout>
<Component {...pageProps} />
</Layout>
</SSRProvider>
)
}
export default App;
When going to my browser and loading a page, it gives me the following error:
Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
at Layout (/home/bas/projects/test-website/build/server/pages/_app.js:718:3)
at div
at $c5f9596976ab8bd94c5879001549a3e$var$OverlayContainerDOM (/home/bas/projects/test-website/node_modules/#react-aria/overlays/dist/main.js:864:7)
at ModalProvider (/home/bas/projects/test-website/node_modules/#react-aria/overlays/dist/main.js:810:5)
at OverlayProvider
at SSRProvider (/home/bas/projects/test-website/node_modules/#react-aria/ssr/dist/main.js:33:13)
at UIContextProvider (/home/bas/projects/test-website/build/server/pages/_app.js:1144:74)
at ManagedUIContext (/home/bas/projects/test-website/build/server/pages/_app.js:1105:3)
at App (/home/bas/projects/test-website/build/server/pages/_app.js:5171:3)
at AppContainer (/home/bas/projects/test-website/node_modules/next/dist/next-server/server/render.js:23:748)
What's the problem here and how would I be able to solve it?
I tried wrapping the the Layout component in the packages <SSRProvider>.
You can dynamically load the component and disable SSR:
import dynamic from 'next/dynamic'
const DynamicComponentWithNoSSR = dynamic(
() => import('../components/hello3'),
{ ssr: false }
)
function Home() {
return (
<div>
<Header />
<DynamicComponentWithNoSSR />
<p>HOME PAGE is here!</p>
</div>
)
}
export default Home
The code example has been taken from the NextJS docs. If that's not your thing, you can call the hook or render the component as long as processs.browser is true.
Next js is computes your 1st page on server. so it does not understand browser scroll or localstorage or other browser api.
you can add a check in your code block if window object is present or execution is running in server and then execute usePreventDefault.
import {useIsSSR} from '#react-aria/ssr';
function Layout() {
let isSSR = useIsSSR();
useEffect(() => {
!isSSR && usePreventScroll({ ... })
}, [isSSR])
}
MasonryPost
src/components/common/masonry-post.js:4
import React from 'react'
export default function MasonryPost ({post, tagsOnTop}) {
const style = {backgroundImage: `url("${require(`../../assets/images/${post.image}`)}")`};
return (
<a className="masonry-post overlay" style={style} href={post.link}>
Answer
How about url(`${require(../../assets/images/${post.image})}`)}
I mena back tick > `
I have the following component:
import React from 'react';
import {
Header
} from 'semantic-ui-react';
import SummaryTable from '../SummaryTable/SummaryTable';
import SummaryFilters from '../SummaryFilters/SummaryFilters';
function TabSummary() {
return (
<>
<Header as="h2">
Blah blah
</Header>
<SummaryFilters />
<SummaryTable />
</>
);
}
export default TabSummary;
How can I write a test for this component to check if the SummaryFilter component exists. SummaryFilter is a connected/smart component and the following test:
it('should display <SummaryFilters /> when page is first loaded', () => {
console.log(wrapper.debug());
expect(wrapper.find('SummaryFilters').exists()).toBeTruthy();
});
throws the following error:
Invariant Violation: Could not find "store" in the context of "Connect(SummaryFilters)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(SummaryFilters) in connect options.
What do I need to add/change to run this test successfully?
Appreciate any guidance
Changing expect(wrapper.find('SummaryFilters').exists()).toBeTruthy();
to:
expect(wrapper.find('Connect(SummaryFilters)').exists()).toBeTruthy();
resolved the error and made the test work as expected.
Please bear with me because I am a javascript newbie, and just starting to learn react.
I am trying to make a small app but I keep getting an error that one of my files is not found... specifically this:
bundle.js:56 Uncaught Error: Cannot find module "./components/search_bar"
My file structure is that I have my index.js in a folder called src, then my search bar(search_bar.js) in a folder called components. I have triple checked the spelling on them but I continue to get this error.
This is my index.js
import SearchBar from './components/search_bar';
import React from 'react';
import ReactDOM from 'react-dom';
//Create a componant (some /HTML)
const API_KEY = 'AIzaSyC3Z3qTpvAacDLYEIxaueKflFJbWvdIHsw';
const App = () => {
return (
<div>
<SearchBar />
</div>
);
}
// Put that componant on the page (the DOM)
ReactDOM.render(<App />, document.querySelector('.container'));
And this is my search_bar.js
import React, { Component } from 'react';
class SearchBar extends Component {
contructor(props) {
super(props);
// when user updates the search bar this term will get updated.
this.state = { term: ''};
}
render() {
//update state
//use set state everywhere besides constructor!!
return (
<div>
<input onChange={event => this.setState({term: event.target.value})}
/>
Value of the input: {this.state.term}
</div>
);
}
}
export default SearchBar;
Any Ideas as to what I am doing wrong here?
Can you confirm the following directory structure?
my_project/src/index.js
my_project/src/components/search_bar.js
It seems like your current directory structure might instead look like this:
my_project/src/index.js, my_project/components/search_bar.js
AHHH I left an 's' out of constructor... so search_bar.js was unable to compile. I have been looking at this for about an hour now...