TypeError: Attempted to assign to readonly property

[wizevlad]

Code:

try {
  let whyDidYouRender = require('@welldone-software/why-did-you-render')
  let ReactRedux = require('react-redux')
  whyDidYouRender(React, {
    trackAllPureComponents: true,
    trackExtraHooks: [[ReactRedux, 'useSelector']]
  })
} catch (error) {
  console.warn(error)
}

Error: TypeError: Attempted to assign to readonly property

[wizevlad]

It's worth mentioning that without the options, the error doesn't appear, but it seems that the library doesn't work either.

[vzaidman]

what is the "t" component, do you know? what versions are you using? where do you execute the code?

[wizevlad]

The t function is a hook to perform i18n:

const getTranslate = translations => (key, ...params) => {
  let value = translations[key] || key
  if (params) {
    params.forEach((p, idx) => {
      value = value.replace(`{${idx}}`, p)
    })
  }
  return value
}

export const useI18n = () => {
  const language = useSelector(state => state.language)
  const { locale = 'en' } = language
  return useMemo(() => getTranslate(languages[locale]), [locale])
}

React 16.12

Component Example:

function Home({ animationState }) {
  const t = useI18n()
  const dispatch = useDispatch()
  const history = useHistory()

  const isFetching = useSelector(state => state.site.isFetching)
  const sites = useSelector(state => state.site.sites || [])
  const error = useSelector(state => state.site.error)

  const found = length(sites) || 0
  const errorMessage = path(['data', 'message'], error)

  useEffect(() => {
    if (animationState === 'enter') dispatch(GET_SITES_INIT())
  }, [dispatch, animationState])

  const notFoundText = t('NOT_FOUND')

  const filterSites = (inputValue, cb) => {
    // ...
  }

  return (
    <section className="home is-flex has-text-centered full-height">
      <div className="section">
        <span className="sp sp-map has-text-white" />
        <h6 className="is-uppercase mt-20 mb-20">{t('SELECT_SITE')}</h6>

        <SearchField
          onSearch={filterSites}
          onSelect={compose(setSite(history, dispatch), prop('site'))}
          notFoundText={notFoundText}
        />

        <div className="message mb-10 mt-10">
          <p className="pl-20 pr-20">
            {isFetching ? t('FETCHING_SITES') : t('FOUND_SITES', found)}
          </p>
        </div>

        {either(
          error,
          <div className="message error mb-10 mt-10">
            <p className="pl-20 pr-20"> {t('FETCH_SITE_ERROR')} </p>
            <p className="pl-20 pr-20"> {errorMessage} </p>
          </div>
        )}
      </div>
      <section>
        <p>{t('CS_NOT_FOUND')}</p>
        <Link
          to={paths.PROTECTED.CREATE_SITE.path}
          className="link is-uppercase"
        >
          <small>{t('CREATE_SITE')}</small>
        </Link>
      </section>
    </section>
  )
}

[vzaidman]

ok looks like there's something weird with i18 indeed, i'll check it out

[technikhil314]

I am using react-redux version "2.3.0" looks like its not able to keep track of useSelector hook. It fails with error as TypeError: Cannot set property useSelector of #<Object> which has only a getter

[vzaidman]

I am using react-redux version "2.3.0" looks like its not able to keep track of useSelector hook. It fails with error as TypeError: Cannot set property useSelector of #<Object> which has only a getter

this comment is not related to the bug. your bug is https://github.com/welldone-software/why-did-you-render/issues/85

[technikhil314]

Ok thanks @vzaidman Got it.

[vzaidman]

@wizevlad can you please update all the related libraries and check again? I don't seem to see any problem

[vzaidman]

You are free to re-open the bug once you can provide more information

[wizevlad]

I have react-redux v7.2.0. and why-did-you-render v4.2.0. Got this error:

Readable:

error: TypeError: Super expression must either be null or a function

[vzaidman]

@wizevlad this is another issue. moved to #118