title: React InstantSearch Dropdown RefinementList not Working: expected a string or a class/function (for composite components) but got: undefined
body: <p>I am trying to make use of <a href="https://github.com/algolia/instantsearch-labs/tree/master/dropdown-refinement-list/react-instantsearch" rel="nofollow noreferrer">this guide</a> to create a dropdown refinementlist instead of the default. I first created a <code>Dropdown.js</code> with contents form <a href="https://github.com/algolia/instantsearch-labs/blob/master/dropdown-refinement-list/react-instantsearch/src/component/DropdownRefinementList.js" rel="nofollow noreferrer">here</a></p>
  <pre><code>import React, { Component } from 'react';
  import { connectRefinementList } from 'react-instantsearch/connectors';
  import PropTypes from 'prop-types';
  
  const cx = label =&gt; `ais-DropdownRefinementList-${label}`;
  /// Rest of the code from the above link follows
  export default connectRefinementList(DropdownRefinementList);
  </code></pre>
  <p>I then import it into my <code>search.js</code> component, which builds my interface like so:</p>
  <pre><code>import { DropdownRefinementList} from &quot;./Dropdown&quot;
  </code></pre>
  <p>And use it like so:</p>
  <pre><code>&lt;DropdownRefinementList attribute=&quot;major&quot; /&gt;
  </code></pre>
  <p>This gives me the following error:</p>
  <pre><code>×
  Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
  
  Check the render method of `SearchGrid`.
  </code></pre>
  <p><code>SearchGrid</code> is just my search component. The issue goes away when I remove <code>&lt;DropdownRefinementList attribute=&quot;major&quot; /&gt;</code>, so that has to be the problem.</p>
  <p>Is there something wrong with my implementation? How can I fix this?</p>