Hydrogen + Algolia

[jeiemgi]

Algolia Issue

✘ [ERROR] No matching export in "node-modules-polyfills:crypto" for import "createHmac"

When you try to implement the algolia as the docs says this error happens:

➜  hydrogen-storefront git:(main) ✗ yarn dev
yarn run v1.22.19
$ shopify hydrogen dev

✘ [ERROR] No matching export in "node-modules-polyfills:crypto" for import "createHmac"

    node_modules/@algolia/client-search/dist/client-search.esm.js:4:9:
      4 │ import { createHmac } from 'crypto';
        ╵          ~~~~~~~~~~


Build failed with 1 error:
node_modules/@algolia/client-search/dist/client-search.esm.js:4:9: ERROR: No matching export in "node-modules-polyfills:crypto" for import "createHmac"

🏁 Initial build: 755.472ms
🚥 MiniOxygen server started at http://localhost:3000 (​http://localhost:3000​)

After some research, I found this issue and I replaced the import from import algoliasearch from 'algoliasearch/lite'; to import algoliasearch from 'algoliasearch/dist/algoliasearch-lite.esm.browser';

---

XMLHttpRequest not found

And everything started working correctly, But when I tried to implement the InstantSearchSSR component, I started getting this error:

➜  hydrogen-storefront git:(main) ✗ yarn dev 
yarn run v1.22.19
$ shopify hydrogen dev

🏁 Initial build: 743.888ms
🚥 MiniOxygen server started at http://localhost:3000 (​http://localhost:3000​)

StorefrontClient: Using a private storefront token is recommended for server environments. Refer to the authentication https://shopify.dev/api/storefront#authentication documentation for more details.
<ref *1> ReferenceError: XMLHttpRequest is not defined
    at /Users/josemiguel/dev/jose/hydrogen-storefront/node_modules/algoliasearch/dist/algoliasearch-lite.esm.browser.js:818:39
    at new Promise (<anonymous>)
    at Object.send (/Users/josemiguel/dev/jose/hydrogen-storefront/node_modules/algoliasearch/dist/algoliasearch-lite.esm.browser.js:817:20)
    at retry (/Users/josemiguel/dev/jose/hydrogen-storefront/node_modules/algoliasearch/dist/algoliasearch-lite.esm.browser.js:419:38)
    at /Users/josemiguel/dev/jose/hydrogen-storefront/node_modules/algoliasearch/dist/algoliasearch-lite.esm.browser.js:432:16 {
  error: [Circular *1]
}
<ref *1> ReferenceError: XMLHttpRequest is not defined
    at /Users/josemiguel/dev/jose/hydrogen-storefront/node_modules/algoliasearch/dist/algoliasearch-lite.esm.browser.js:818:39
    at new Promise (<anonymous>)
    at Object.send (/Users/josemiguel/dev/jose/hydrogen-storefront/node_modules/algoliasearch/dist/algoliasearch-lite.esm.browser.js:817:20)
    at retry (/Users/josemiguel/dev/jose/hydrogen-storefront/node_modules/algoliasearch/dist/algoliasearch-lite.esm.browser.js:419:38)
    at /Users/josemiguel/dev/jose/hydrogen-storefront/node_modules/algoliasearch/dist/algoliasearch-lite.esm.browser.js:432:16 {
  error: [Circular *1]
}

Reference link

I know Algolia can work with Remix because I saw the Remix conf, and you can see it works in this example But maybe it's not working with hydrogen for some reason.

Example

• Link to the reproducible repo: https://github.com/jeiemgi/remix-hydrogen-hello-world

[wizardlyhel]

You can't use algoliasearch/dist/algoliasearch-lite.esm.browser distribute. It is meant for browser side implementation and will not work on a Cloudflare worker.

[ERROR] No matching export in "node-modules-polyfills:crypto" for import "createHmac"

Try adding this library in your package.json as a dependency?

But I can't even find a npm package with this name node-modules-polyfills, is there an alias setup? or npm package got removed? Maybe Algolia have answer?

[jeiemgi]

Thanks for your answer @wizardlyhel, and the suggestions, I tried adding crypto as a dependency but I started getting a warning and didn't help.

It appears you're using a module that is built in to node, but you installed it as a dependency which could cause problems. Please remove crypto before continuing.

The reason I included that import it's that I saw many issues addressing that workaround. The algoliasearch/lite package doesn't work with remix. And algoliasearch/dist/algoliasearch-lite.esm.browser works. Still, when you try to use the InstantSearchSSR component implementation, as I show in the repo I shared, it starts showing the second error. 😞

I'll create an issue in the algoliasearch repo to see if they have some ideas.

[wizardlyhel]

We did some search too. Looks like Algolia's library doesn't work with Cloudflare workers algolia/instantsearch#5325 because they are not using fetch.

Have you try changing the requester and see if it solves for you?

[johncraigcole]

Hey @jeiemgi just confirming changing the requester with your example repo worked in my testing.

import {ALGOLIA_APP_ID, ALGOLIA_SEARCH_API_KEY} from '~/lib/constants';

import algoliasearch from 'algoliasearch/dist/algoliasearch-lite.esm.browser';
import {createFetchRequester} from '@algolia/requester-fetch';

export const searchClient = algoliasearch(
  ALGOLIA_APP_ID,
  ALGOLIA_SEARCH_API_KEY,
  {
    requester: createFetchRequester(),
  },
);

[jeiemgi]

It worked 💯 !

The only extra step is that I had to delete the 'dist' folder and build again. Thanks a lot @wizardlyhel and @johncraigcole