Coveo Search Page Fails to Load After Upgrade

Symptoms

After upgrading from the Coveo for Salesforce package 2.24 or prior to the 2.25 or later package, you might encounter one of the following problems:

  • The Coveo Search Page seems to be loading forever, with the following error in the browser console.

    ["ERROR", "Assert", "Assertion Failed!", "Value should not be null or undefined"]
    
  • You are unable to add facets to your search page, with the following JavaScript error appearing.

    Value should not be null or undefined
    
  • You are unable to add a tab, as the Interface Editor prevents you from dropping the component.

Cause

This issue arises when you do not have a coveo-tab-section in your search page. With the new Coveo JavaScript Search Framework of the 2.25 package, the responsive facets need a coveo-tab-section to load. In its absence, the Coveo Search Page is unable to load properly.

Resolution

There are two ways to fix this issue.

When You Intend to Add Tabs

You need to add a coveo-tab-section in the code of your Interface Editor.

  1. Open the Interface Editor.

    With Coveo for Salesforce v3.25+ With Coveo for Salesforce V3 With Coveo for Salesforce V2
    In the top-right corner of the component, click the Edit button.
    In the top-left corner of the component, click the Edit button.

    In the lower-right corner of the component, click the arrow button to expand the box; then, click Edit.

  2. At the top of the page, select the Code View tab.
  3. Add the following code in the space where you want to add the tab section. It is recommended to put it at the beginning of the <div class="coveo-search-section"> section.

     <div class="coveo-tab-section">
     </div>
    
  4. Switch back to the UI View by clicking its tab at the top of the page.

  5. You can now add your desired tabs.

When You Do Not Intend to Add Tabs

You need to disable the automatic responsive mode.

  1. Open the Interface Editor.

    With Coveo for Salesforce v3.25+ With Coveo for Salesforce V3 With Coveo for Salesforce V2
    In the top-right corner of the component, click the Edit button.
    In the top-left corner of the component, click the Edit button.

    In the lower-right corner of the component, click the arrow button to expand the box; then, click Edit.

  2. At the top of the page, select the Code View tab.
  3. Within the <div id="search" class="CoveoSearchInterface" data-enable-history="true" data-design="new">, add the following parameter:

     data-enable-automatic-responsive-mode="false"
    

    Your div should now look like this:

     <div id="search" class="CoveoSearchInterface" data-enable-history="true" data-design="new" data-enable-automatic-responsive-mode="false">
    
  4. Save the page.