Bloomreach with Remixjs

I’m having some trouble getting Bloomreach up and running within a Remix/Hydrogen project.

I’m doing the following:

  1. Set up a fresh Remix/Hydrogen project npm create @shopify/hydrogen@latest.
  2. Install the Bloomreach SDK npm install @bloomreach/spa-sdk @bloomreach/react-sdk axios
  3. Add the BrPage component to the root:
            httpClient: axios,
            path: `${window.location.pathname}${}`,

I get the following error when trying to run the development server TypeError: globalThis.XMLHttpRequest is not a constructor

Any advice?

You can check our Next.js example. We don’t have any examples or official support for Remix/Hydrogen.

Hi again -

The initial issue I encountered was related to Axios. I found a 3rd party adapter that allowed me to proceed with Axios.

I am able to fetch data from the home page in a channel. I have created a project in BR and am now trying to connect the experience manager to my localhost outlined here.

When I change the project to use local host like so
Screen Shot 2023-04-18 at 11.12.18 AM

I get an error in the experience manager:

I am also noticing that I cannot select any pages on the Sitemap tab in the Experience Manager. If I switch to Core or stop pointing the project to my localhost, I see ‘home’ in the Sitemap tab within the project. I am passing the pathname and search params to the configuration and can confirm they are logged in the React component.

Can you help trouble shoot this error?

Hi @Tim_McMahon ,
You ran into a known bug Error: Ambiguous match found for serviceIdentifier: Symbol(PostMessageService) · Issue #10 · bloomreach/spa-sdk · GitHub
I’ve just merged the fix to our development branch, once our internal CI is happy I will create a new release. I will post here to notify you of the release, or you can keep an eye on the github repository. The new release should be there within a day or 2.
Thank you for your patience!

1 Like