I’m having some trouble getting Bloomreach up and running within a Remix/Hydrogen project.
I’m doing the following:
- Set up a fresh Remix/Hydrogen project
npm create @shopify/hydrogen@latest
.
- Install the Bloomreach SDK
npm install @bloomreach/spa-sdk @bloomreach/react-sdk axios
- Add the BrPage component to the root:
<BrPage
configuration={{
endpoint:
'https://developers.bloomreach.io/delivery/site/v1/channels/getting-started/pages',
httpClient: axios,
path: `${window.location.pathname}${window.location.search}`,
}}
mapping={{MyComponent}}
></BrPage>
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
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