Property 'X' does not exist on type 'IntrinsicAttributes & InferPropsInner

Question

I am refactoring my .js file into .tsx in the code below

import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types'
import { checkMobile } from '../../utils/common'
import { animateScroll as scroll } from 'react-scroll'

import ErrorBoundary from '../../components/error-boundary'
import Section1 from './section1'
import Section2 from './section2'
import Section3 from './section3'
import Section4 from './section4'
import Section5 from './section5'
import Section6 from './section6'
import Section7 from './section7'

export default function Main (props) {
  const {
    bannerData
  } = props

  const [currentPage, setCurrentPage] = useState(0)
  const [isMobile, setIsMobile] = useState(false)

  const mainScrollFunc = () => {
    document.querySelector('header').classList.add('has-bg')

    if (document.querySelector('.mainScrollEvent')) {
      const scrollPosition = (document.body.scrollTop || document.documentElement.scrollTop) - (window.innerHeight / 1.5)
      const mainSections = document.querySelectorAll('.main-section')
      console.log('mainSections[0]', mainSections[0])
      const paddingTop = 90
      let toIndex = 0

      if (scrollPosition <= (mainSections[0] as HTMLElement).offsetTop - paddingTop) {
        toIndex = 0
      } else if (scrollPosition <= (mainSections[1] as HTMLElement).offsetTop - paddingTop) {
        toIndex = 1
      } else if (scrollPosition <= (mainSections[2] as HTMLElement).offsetTop - paddingTop) {
        toIndex = 2
      } else if (scrollPosition <= (mainSections[3] as HTMLElement).offsetTop - paddingTop) {
        toIndex = 3
      } else if (scrollPosition <= (mainSections[4] as HTMLElement).offsetTop - paddingTop) {
        toIndex = 4
      } else if (scrollPosition <= (mainSections[5] as HTMLElement).offsetTop - paddingTop) {
        toIndex = 5
      } else if (scrollPosition <= (mainSections[6] as HTMLElement).offsetTop - paddingTop) {
        toIndex = 6
      }

      for (let i = 0; i < 7; i++) {
        document.querySelectorAll('.main_pager_button')[i].classList.remove('selected')
      }
      document.querySelector('.pagerButton' + toIndex).classList.add('selected')

      if (toIndex === 0) {
        if (document.querySelector('.top-banner')) {
          document.querySelector('.top-banner').classList.add('is-active')
          document.body.classList.add('has-banner')
        }
      } else {
        if (document.querySelector('.top-banner')) {
          document.querySelector('.top-banner').classList.remove('is-active')
          document.body.classList.remove('has-banner')
        }
      }

      setCurrentPage(toIndex)
    }
  }

  const onScroll = () => {
    const scrTop = document.body.scrollTop || document.documentElement.scrollTop
    const windowHeight = window.innerHeight
    const scrollPoint = windowHeight - 150
    if (scrollPoint < scrTop) {
      if (document.querySelector('.top-banner')) {
        document.querySelector('.top-banner').classList.remove('is-active')
        document.body.classList.remove('has-banner')
      }
    } else {
      if (document.querySelector('.top-banner')) {
        document.querySelector('.top-banner').classList.add('is-active')
        document.body.classList.add('has-banner')
      }
    }
    if (document.body.classList.contains('is-active')) {
      const bodyTop = document.body.style.top.replace('px', '')
      const mainSection1 = document.querySelector<HTMLElement>('.main-section.visual').offsetHeight - 150
      const header = document.querySelector('header')
      if (Math.abs(parseInt(bodyTop)) > mainSection1) {
        if (document.querySelector('.top-banner')) {
          document.querySelector('.top-banner').classList.remove('is-active')
          document.body.classList.remove('has-banner')
        }
        if (header.classList.contains('is-white')) {
          document.querySelector('header').classList.remove('is-white')
          document.querySelector('header').classList.add('has-bg')
          document.querySelector('header').classList.add('has-white')
        }
      }
    }
  }

  const toMove = (e) => {
    if (e.target.classList[0] === 'main_pager_button') {
      e.preventDefault()

      const href = e.target.getAttribute('href')
      const offsetTop = document.querySelector(href).offsetTop

      scroll.scrollTo(offsetTop, { duration: 500, smooth: 'easeInOut' })
    }
  }

  useEffect(() => {
    if (typeof window !== 'undefined') {
      setIsMobile(!!checkMobile(window.innerWidth))
      if (document.querySelector('.mainScrollEvent')) {
        if (checkMobile(window.innerWidth)) {
          window.addEventListener('scroll', onScroll)
        } else {
          window.addEventListener('scroll', mainScrollFunc)
        }
      }
    }
    return () => {
      if (checkMobile(window.innerWidth)) {
        window.removeEventListener('scroll', onScroll)
      }
    }
  }, [])

  return (
    <>
      <div id="contentsWrap" className="contents-wrap mainScrollEvent">
        <Section1 isMobile={isMobile} bannerData={bannerData} />
        <Section2 currentPage={currentPage}/>
        <Section3 />
        <Section4 isMobile={isMobile} currentPage={currentPage}/>
        <Section5 isMobile={isMobile} currentPage={currentPage} />
        <ErrorBoundary>
          <Section6 currentPage={currentPage} />
        </ErrorBoundary>
        <ErrorBoundary>
          <Section7 isMobile={isMobile} currentPage={currentPage}/>
        </ErrorBoundary>
        <nav className="main_pager_box" onClick={toMove}>
          <a href="#visual" className="main_pager_button pagerButton0 selected"></a>
          <a href="#since" className="main_pager_button pagerButton1"></a>
          <a href="#poomgo" className="main_pager_button pagerButton2"></a>
          <a href="#advantage" className="main_pager_button pagerButton3"></a>
          <a href="#difference" className="main_pager_button pagerButton4"></a>
          <a href="#cooperate" className="main_pager_button pagerButton5"></a>
          <a href="#contents" className="main_pager_button pagerButton6"></a>
        </nav>
      </div>
      <button type='button' className='btn btn-hidden' onClick={() => {
        scroll.scrollToTop({ duration: 500, smooth: 'easeInOut' })
      }}>TOP</button>
    </>
  )
}

Main.propTypes = {
  bannerData: PropTypes.array
}

I am getting the following error in one line

<Section1 isMobile={isMobile} bannerData={bannerData} />

The error states

Type '{ isMobile: boolean; bannerData: any; }' is not assignable to type 'IntrinsicAttributes & InferPropsInner<Pick<{ bannerData: Requireable<any[]>; }, never>> & Partial<InferPropsInner<Pick<{ bannerData: Requireable<any[]>; }, "bannerData">>>'.
  Property 'isMobile' does not exist on type 'IntrinsicAttributes & InferPropsInner<Pick<{ bannerData: Requireable<any[]>; }, never>> & Partial<InferPropsInner<Pick<{ bannerData: Requireable<any[]>; }, "bannerData">>>'.ts(2322)

I believe this is because I am sending my isMobile state as my props . However, I don't understand why this error only occurs on Section1 and not the other Section4 , Section5 , or Section7 that have isMobile in their props .

I have tried adding isMobile into the const with bannerData , but then I get another error telling me that I cannot redeclare block-scoped variable isMobile . How do I solve this error?

*** EDIT ***

As requested, below is my Section1 code as a .js file

import React, { useState } from 'react'
import Image from 'next/image'
import PropTypes from 'prop-types'
import Slider from 'react-slick'
import useSWR from 'swr'
import { AxiosService } from '../../utils/axios-service'
import { getCloundFrontUrl } from '../../utils/common'

const axios = AxiosService.create()
const bannerUrl = '/banners?display=true&_sort=displayOrder:ASC'
export default function Section1 (props) {
  const { data: banners, error } = useSWR(bannerUrl, (url) => {
    return axios.get(url).then(res => res.data)
  }, {
    initialData: props.bannerData
  })
  const [currentSlide, setCurrentSlide] = useState(0)
  const settings = {
    arrows: true,
    infinite: true,
    autoplay: true,
    speed: 300,
    autoplaySpeed: 3600,
    slidesToShow: 1,
    slidesToScroll: 1,
    className: 'banner-list swiper-list',
    pauseOnHover: false,
    afterChange: (index) => {
      setCurrentSlide(index)
    }
  }
  if (!banners) {
    return <div>배너 읽는 중</div>
  }
  return (
    <div id="visual" className="main-section visual">
      <div className="main-section-content">
        {/* <!-- s: slider--> */}
        <div className="banner-list-wrap swiper-container">
          <Slider {...settings}>
            {
              banners.map(b => {
                const linkProps = {
                  ...(b.openNewTab && {
                    target: '_blank'
                  })
                }
                let imageUrl = ''
                if (b.images && b.images.length > 0) {
                  imageUrl = getCloundFrontUrl(b.images[0].url)
                }
                return (
                  <div className="banner-item swiper-item" key={b.id}>
                    <div className="img">
                      <Image className="img-drawer" src={imageUrl ? getCloundFrontUrl(imageUrl) : '/'} alt={b.images[0]?.alternativeText} layout="fill" />
                    </div>
                    <div className="visual-info">
                      <pre className="title">{b.title}</pre>
                      {b.description && (<pre className="desc">{b.description}</pre>)}
                      {b.linkUrl && (<a href={b.linkUrl} className="btn-go-detail" {...linkProps}>자세히보기</a>)}
                    </div>
                  </div>
                )
              })
            }
          </Slider>
          <div className="slider-assets">
            <div className="swiper-paging swiper-pagination-fraction">
              <span className="swiper-pagination-current">{currentSlide + 1}</span>
              <span className="swiper-pagination-slash">/</span>
              <span className="swiper-pagination-total">{banners.length}</span>
            </div>
          </div>
        </div>
        {/* <!-- e: slider--> */}
      </div>
    </div>
  )
}

Section1.propTypes = {
  bannerData: PropTypes.array
}

Answer 1

I'm an idiot and isMobile is never used in Section1

Answer 2

If you want to pass isMobile is a prop of Section1, you need to update Section1.propTypes :

Section1.propTypes = {
  bannerData: PropTypes.array,
  isMobile: PropTypes.bool
}