React.createElement: type is invalid

[robfarr]

Error Message:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object

Check the render method of `MultiSelect`.

Situation in which this error occured

import React from 'react';
import MultiSelect from 'searchkit-multiselect';

import {
  RefinementListFilter,
} from 'searchkit';

[...]

<RefinementListFilter id='example'
                      title='Example'
                      field='example'
                      operator="AND"
                      size={100}
                      listComponent={MutliSelect} />

React Version: 15.6.2 Searchkit Version: 2.1. Searchkit-MultiSelect Version: 0.0.1

[jmrichardson]

Hi, I have the same issue. Is there a fix? Thanks.

[robfarr]

@jmrichardson I found that it was because the Select component from react-select wasn't being imported properly.

Forking and editing the searchkit-multiselect/index.js file so that:

The base select component is imported correctly:

import { Creatable } from 'react-select';
import 'react-select/dist/react-select.css';

And changing the return ( <Select [...] to return (<Creatable [...] worked for me.

I'm trying to track down the change to react-select that caused this issue but don't have time for this at the moment.

[jmrichardson]

@robfarr thank you for your help. I am having trouble after forking this repository. I made the updates in my fork and then installed with:

npm install jmrichardson/searchkit-multiselect --save

However, npm doesn't seem to install everything the same as if I did a:

npm install searchkit-multiselect --save

For example, the lib and es6 folders are missing when installing from my fork. Could you point me in the right direction?

Thanks for your help

[jmrichardson]

@robfarr thanks for the information getting this working. I got it to work by just adding the code to my App.js. Here is what I did for anyone needs help:

import { Creatable } from 'react-select';
import 'react-select/dist/react-select.css';
export class MultiSelect extends React.Component {
  constructor(props){
    super(props)
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(selectedOptions = []) {
    this.props.setItems(selectedOptions.map(el => el.value))
  }

  render() {
    console.log(this.props)
    const { placeholder, clearable = true, items, selectedItems = [], disabled, showCount, setItems } = this.props
    const options = items.map((option) => {
      let label = option.title || option.label || option.key
      if (showCount) label += ` (${option.doc_count}) `
        return { value: option.key, label}
      })
    return ( <Creatable multi disabled={disabled}
        value={selectedItems}
        placeholder={placeholder}
        options={options}
        valueRenderer={(v) => v.value}
        clearable={clearable}
        onChange={this.handleChange} />)
  }
}

[robfarr]

@jmrichardson This is actually just a packaging / npm issue - you will need to build the lib and es6 folders & include them in your repo.

The npm run build command listed in CONTRIBUTING.md should work.