Uncaught Invariant Violation: SearchkitProvider.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

I’ve been playing with the searchkit components and have been receiving errors regarding Searchkit Provider.render().

Simple case of mine:

import {
    SearchkitManager,
    SearchkitProvider,
    InitialLoader,
      ...
    } from "searchkit";

const InitialLoaderComponent = (props) => (
  <div className={props.bemBlocks.item().mix(props.bemBlocks.container("item"))}>
    loading please wait...
  </div>
)

class ConApp extends React.Component {

...

 render() {

    const searchKitManager = new SearchkitManager('setup-is-here')


    return (<SearchkitProvider searchkit={searchKitManager}>
            <InitialLoader component={InitialLoaderComponent}/>
        </SearchkitProvider>)

Gives:

Uncaught Invariant Violation: SearchkitProvider.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Another case:

class ConApp extends React.Component {

...

 render() {

    const searchKitManager = new SearchkitManager('setup-is-here')


    return (<SearchkitProvider searchkit={searchKitManager}>
            <SearchBox />
        </SearchkitProvider>)

Gives:

Uncaught Invariant Violation: SearchkitProvider.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Aside from those, the only component that seems to work is <Hits />. Any idea why these simple components are not working? And why <Hits /> seems to work?

Some notes: -I am using es6, not tsx -I am not importing react or react-dom in THIS script directly -<Hits /> provides no styling even though styles are included (this might be default?)

[devlesedi]

I had the same multiple copies of React error. Adding an alias, as @nirchernia suggested, solved the problem. For anyone having the same issue, add this to your webpack config file. resolve: { alias: { react: path.resolve('./node_modules/react') } }

[ssetem]

thanks @devlesedi

We should probably start a FAQ and add advice like this into it