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

[vonkoff]

🐛 Bug description

This issue comes about when trying to run remix through Cloudflare pages.

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

Getting this error and am not sure what could be the issue. Followed along with this github issue remix-run/remix#3120 and saw that setting serverModuleFormat to ESM and serverPlatform to the browser should fix this.

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  serverBuildTarget: 'cloudflare-pages',
  server: './server.js',
  devServerBroadcastDelay: 1000,
  ignoredRouteFiles: ['**/.*'],
  appDirectory: 'app',
  assetsBuildDirectory: 'public/build',
  serverModuleFormat: 'esm',
  serverPlatform: 'browser',
  serverBuildPath: 'functions/[[path]].js',
  publicPath: '/build/',
};

set my remix.config.js to the following and still got the same error when it wasn't like that.

I know this is more an issue pertaining with Algolia as opposed to Remix. But, I wonder if someone would possibly know how to include the export of "createHmac" to make Algolia work?

🔍 Bug reproduction

Steps to reproduce the behavior:

1. run npx create-remix@latest2.
2. Choose Cloudflare pages
3. Include my Algolia search within the index.ts as I did in another working framework, as opposed to Cloudflare pages, and have the error mentioned above come about.

Environment

• React InstantSearch Hooks version: ^6.29.0
• React version: 17.0.2
• Browser: Safari and Chrome
• OS: macOS Monterey

[vonkoff]

ionic-team/rollup-plugin-node-polyfills#20 Might be linked to this.

Could there be a possibility to circumvent this issue? The @esbuild-plugins folder with the file in src called Polyfills.ts does say:

    // TODO enable crypto and fs https://github.com/ionic-team/rollup-plugin-node-polyfills/issues/20
    // libs.set(
    //     'crypto',
    //     require.resolve(
    //         'rollup-plugin-node-polyfills/polyfills/crypto-browserify',
    //     ),
    // )

[Haroenv]

What's odd is that it seems to resolve the node version of algoliasearch, even though it should have resolved to the browser version according to your settings.

For direct workarounds, you could import algoliasearch/dist/algoliasearch-browser.esm.js likely, or one of the other imports that doesn't include generateSecuredApiKey.

Do you have a reproduction for this somewhere runnable?

[vonkoff]

I went back and made a code sandbox... I am not sure how to run it, but the files here match a quick remix app I made with Cloudflare pages. The barebones stuff with some quick Algolia stuff added in.

https://codesandbox.io/s/nostalgic-snowflake-601sbe

I'm getting the error I mentioned when I try to run it with npm run dev on my local repo (not positive on how to run that command with code sandbox).

Also, not sure about running algoliasearch/dist/algoliasearch-browser.esm.js . Get the error app/routes/index.tsx:1:24: ERROR: No matching export in "node_modules/algoliasearch/dist/algoliasearch-lite.esm.browser.js" for import "InstantSearch". Not positive on how to fix this.

[dhayab]

Hi @vonkoff, I updated your sandbox with a config that makes it runnable in Codesandbox and adjusted the algoliasearch import following the workaround: https://codesandbox.io/s/35viyf?file=/app/routes/index.tsx. This should allow for InstantSearch to be used in your environment.

[vonkoff]

This worked! Closing the issue down and I'll make sure to post this as a solution in the other places like Discord if anyone else has this issue in the future.