Shopify hydrogen with Elasticsearch: The Workers runtime failed to start.

[ninhdev]

What is the location of your example repository?

Hydrogen Demo Store

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

"@elastic/react-search-ui": "^1.21.1"

What version of Remix are you using?

Remix 2.8.0, Remix run time: 2.6.0 ,

Steps to Reproduce

install package: yarn add @elastic/search-ui @elastic/react-search-ui-views @elastic/search-ui-app-search-connector @elastic/react-search-ui

create a component file:

import {SearchBox, SearchProvider} from '@elastic/react-search-ui';

const connector = new AppSearchAPIConnector({
  searchKey: '....',
  engineName: 'national-parks',
  endpointBase: 'https://search-ui-sandbox.ent.us-central1.gcp.cloud.es.io',
});

import AppSearchAPIConnector from '@elastic/search-ui-app-search-connector';

const config = {
  debug: true,
  alwaysSearchOnInitialLoad: true,
  apiConnector: connector,
  hasA11yNotifications: true,
  searchQuery: {
    result_fields: {
      visitors: {raw: {}},
      world_heritage_site: {raw: {}},
      location: {raw: {}},
      acres: {raw: {}},
      square_km: {raw: {}},
      title: {
        snippet: {
          size: 100,
          fallback: true,
        },
      },
      nps_link: {raw: {}},
      states: {raw: {}},
      date_established: {raw: {}},
      image_url: {raw: {}},
      description: {
        snippet: {
          size: 100,
          fallback: true,
        },
      },
    },
    disjunctiveFacets: ['acres', 'states', 'date_established', 'location'],
    facets: {
      world_heritage_site: {type: 'value'},
      states: {type: 'value', size: 30},
      acres: {
        type: 'range',
        ranges: [
          {from: -1, name: 'Any'},
          {from: 0, to: 1000, name: 'Small'},
          {from: 1001, to: 100000, name: 'Medium'},
          {from: 100001, name: 'Large'},
        ],
      },
      location: {
        // San Francisco. In the future, make this the user's current position
        center: '37.7749, -122.4194',
        type: 'range',
        unit: 'mi',
        ranges: [
          {from: 0, to: 100, name: 'Nearby'},
          {from: 100, to: 500, name: 'A longer drive'},
          {from: 500, name: 'Perhaps fly?'},
        ],
      },
      visitors: {
        type: 'range',
        ranges: [
          {from: 0, to: 10000, name: '0 - 10000'},
          {from: 10001, to: 100000, name: '10001 - 100000'},
          {from: 100001, to: 500000, name: '100001 - 500000'},
          {from: 500001, to: 1000000, name: '500001 - 1000000'},
          {from: 1000001, to: 5000000, name: '1000001 - 5000000'},
          {from: 5000001, to: 10000000, name: '5000001 - 10000000'},
          {from: 10000001, name: '10000001+'},
        ],
      },
    },
  },
  autocompleteQuery: {
    results: {
      resultsPerPage: 5,
      result_fields: {
        title: {
          snippet: {
            size: 100,
            fallback: true,
          },
        },
        nps_link: {
          raw: {},
        },
      },
    },
    suggestions: {
      types: {
        documents: {
          fields: ['title'],
        },
      },
      size: 4,
    },
  },
};

export default function SearchInstance() {
  return (
    <SearchProvider config={config}>
      <SearchBox
        autocompleteSuggestions={{
          // Types used here need to match types requested from the server
          documents: {
            sectionTitle: 'Suggested Queries',
          },
          popular_queries: {
            sectionTitle: 'Popular Queries',
          },
        }}
      />
    </SearchProvider>
  );
}

Expected Behavior

I got this issue when using SearchProvider component,

Actual Behavior

When I run dev, I got this bug.

[ninhdev]

Please give me a solution, thanks so much.

[frandiox]

Can you try passing --legacy-runtime flag to your dev command? That might give you better errors.

Generally speaking, the Oxygen platform is not compatible with Node.js APIs so that, if your dependencies require Node.js they might fail in Oxygen. Also, I see you're creating a new instance of AppSearchAPIConnector at the top level. I don't know what this is doing but if it's trying to establish a network connection, this would fail in the server. You'd probably need to do this within a useEffect or useMemo in React.

[ninhdev]

@frandiox , thank you very much.