Gutenberg <InspectorControls /> returns ReactJS 'Element Type Is Invalid'

Question

I have a Gutenberg block I'm using to select posts via the edit screen the render on the frontend.

My class is:

class MySelectPosts extends Component {
  //Method for setting the initial state
  static getInitialState(selectedPost) {
    return {
      posts: [],
      selectedPost: selectedPost,
      post: {}
    };
  }

  constructor() {
    super(...arguments);
    this.state = this.constructor.getInitialState(
      this.props.attributes.selectedPost
    );
    //Binding
    this.getOptions = this.getOptions.bind(this);
    //Load the posts
    this.getOptions();
  }

  getOptions() {
    return new wp.api.collections.Posts().fetch().then(posts => {
      if (posts && 0 !== this.state.selectedPost) {
        //If we have a selected post, find that post and return it
        const post = posts.find(item => {
          return item.id == this.state.selectedPost;
        });
        this.setState({ post, posts });
      } else {
        this.setState({ posts });
      }
    });
  }

  render() {
    //Options to hold all the loaded posts
    let options = [{ value: 0, label: __("Select a post") }];
    let output = __("Loading Posts");
    if (this.state.posts.length > 0) {
      const loading = __("We have %d posts. Choose one.");
      output = loading.replace("%d", this.state.posts.length);
      this.state.posts.forEach(post => {
        options.push({ value: post.id, label: post.title.rendered });
      });
    } else {
      output = __("No posts found. Please create some first");
    }
    return [
      //If we are focused on this block, create the inspector controls
      !!this.props.isSelected && (
        <InspectorControls>
          <SelectControl
            multiple
            value={this.props.attributes.selectedPost}
            label={__("Select a post")}
            options={options}
          />
        </InspectorControls>
      ),
      "Load post placeholder"
    ];
  }
}

export default MySelectPosts;

The block itself is able to be rendered to the screen, and when it is not selected, it returns "Load post placeholder".

However when i select the block it returns that the block cannot be rendered and in the console I get:

Invariant Violation: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Which says the error is:

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

It doesn't specifically say where the error is, but I've narrowed it down to the <InspectorControls> block because if I replace that block with a string it will render the string (it also renders the 'Load post placeholder' right after the string.

I am importing the controls at the beginning of the file like so:

const { __ } = wp.i18n;
const { registerBlockType, InspectorControls } = wp.blocks;
const { SelectControl, PanelBody } = wp.components;
const { Component } = wp.element;

Can someone shed some light on this? Most answers (from what I can see) are suggesting an incorrect import of the class, however I have used import {InspectorControls} = wp.blocks on other Gutenberg blocks and they have worked perfectly fine.

Answer 1

The solution of this was very simple actually and I found it via This Stack Exchange Post The { InspectorControls } was moved to a new namespace, wp.editor. So when I called it in the class above, it obviously returned an error because React could not read the Component, since it did not exist.