Need help with the search-encapsulation component

Hey,

I am trying to use the search-encapsulation component on a custom page so that I can add a section underneath it that will display search results from a 3rd party.

I am having issues getting the component on the page, I looked at the search page in studio and it has:

<quilt layout="one-column" nestable="false">
  <add to="common-footer">
    <component id="quilt:Footer"/>
  </add>
  <add to="main-content">
    <component id="search-encapsulation"/>
  </add>
  <add to="common-header">
    <component id="quilt:Header"/>
  </add>
  <remove from="site-navigation" for="Header">
    <component id="common.widget.search-form"/>
    <component id="common.widget.search-form-message"/>
  </remove>
</quilt>\ 

 In the main content I can see the seach-encapsulation component. However, when I try to add this to my own custom page, I get a pretty cryptic error, see below, I didn't make any changes to the studio-title component. The error goes away when I remove the search-encapsulation from the page. Any help is appreciated.