Error updating code to use newer render syntax, with react-dom 16.0.0

[dianekaplan]

Not sure if this is an issue with prismic-reactjs + react-dom 16.0.0, or my misunderstanding the current usage-

I've inherited a react/prismic/node application that started with prismic-reactjs 0.2.0, and I have a branch where I've upgraded to prismic-reactjs 1.1.0. Because of dependencies, this has also meant updating the following other packages: react: 15.6.1 → 16.0.0 webpack: 3.12.0 → 4.39.2 react-dom: 15.6.1 → 16.0.0 react-router-dom: 4.1.2 → 5.0.1

The original code used RichText.render like this: {RichText.render(privacy_policy_content)}

('privacy_policy_content' is a const from this.props.data, it's an array of objects that have text inside)

With these new package versions, the render line above gives a new error (preventing the page from loading): Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. [...] Check the render method of PrivacyPolicy.

The contents of that page do still load if I use asText (but without the formatting): {RichText.asText(privacy_policy_content)}

I see that the recommended syntax has changed for RichText.render, to this: <RichText render={privacy_policy_content}/>

However that gives a similar error as above, just saying to check the render method of RichText (instead of PrivacyPolicy)

Debugging the error and comparing the two branches, I see that the render return method uses completely different code: in the branch with older package versions, we go to ReactCompositeComponent.js, but in this branch with newer package versions, we go to reactDom.development.js.

Has anyone reported RichText render no longer rendering arrays with react-dom 16.0.0? Have you heard of anything like this?

thanks in advance for your help!

Full code for context (though div tags aren't making it through): `import React from 'react' import NotFoundPage from '../Shared/NotFoundPage' import PrismicReact from '../../../prismic-react' import PrismicQuery from '../Utils/PrismicQuery' import ReactGA from 'react-ga' import {RichText} from 'prismic-reactjs'

class PrivacyPolicy extends React.Component { constructor(props) { super(props) this.state = { notFound: false, linkResolver: null } }

componentDidMount() { ReactGA.set({ page: location.pathname }) ReactGA.pageview(location.pathname) }

render() { if (this.props.PRISMIC_UNIVERSAL_DATA) { const { PRISMIC_UNIVERSAL_DATA } = this.props const { privacy_policy_content } = PRISMIC_UNIVERSAL_DATA.data return (

{RichText.asText(privacy_policy_content)}

  )
} else if (this.state.notFound) {
  return <NotFoundPage />
} else {
  return null
}

} }

const fetchData = PrismicQuery('privacy_policy')

export default PrismicReact.UniversalComponent({ request: (ctx, props) => fetchData(ctx, props), component: PrivacyPolicy }) `

[NeversSync]

Having the same issue. Did you resolve this?

[hypervillain]

I haven't heard of such issues, would you mind sharing a reproduction link here or in the forum?

[angeloashmore]

Hey @dianekaplan, I'm cleaning up old issues so I'm going to close this. If this is still an issue, please comment and I can re-open. Thanks!