Error "createHmac" is not exported by "__vite-browser-external" when building for production

[flexchar]

Description
I migrated from Algolia's client to Meilisearch. I am unable to build the project for production using vite build.

Current behavior

RollupError: node_modules/meilisearch/dist/bundles/meilisearch.esm.js (1:9): "createHmac" is not exported by "__vite-browser-external", imported by "node_modules/meilisearch/dist/bundles/meilisearch.esm.js".

Screenshots or Logs

vite v5.2.11 building for production...
[plugin:vite:resolve] [plugin vite:resolve] Module "crypto" has been externalized for browser compatibility, imported by "/Users/luke/dev/pos-vts/node_modules/meilisearch/dist/bundles/meilisearch.esm.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
✓ 244 modules transformed.
x Build failed in 559ms
error during build:
RollupError: node_modules/meilisearch/dist/bundles/meilisearch.esm.js (1:9): "createHmac" is not exported by "__vite-browser-external", imported by "node_modules/meilisearch/dist/bundles/meilisearch.esm.js".
file: /Users/luke/dev/pos-vts/node_modules/meilisearch/dist/bundles/meilisearch.esm.js:1:9
1: import { createHmac } from 'crypto';
            ^
2: 
3: // Type definitions for meilisearch
    at getRollupError (file:///Users/luke/dev/pos-vts/node_modules/rollup/dist/es/shared/parseAst.js:394:41)
    at error (file:///Users/luke/dev/pos-vts/node_modules/rollup/dist/es/shared/parseAst.js:390:42)
    at Module.error (file:///Users/luke/dev/pos-vts/node_modules/rollup/dist/es/shared/node-entry.js:13855:16)
    at Module.traceVariable (file:///Users/luke/dev/pos-vts/node_modules/rollup/dist/es/shared/node-entry.js:14303:29)
    at ModuleScope.findVariable (file:///Users/luke/dev/pos-vts/node_modules/rollup/dist/es/shared/node-entry.js:11984:39)
    at FunctionScope.findVariable (file:///Users/luke/dev/pos-vts/node_modules/rollup/dist/es/shared/node-entry.js:7432:38)
    at FunctionBodyScope.findVariable (file:///Users/luke/dev/pos-vts/node_modules/rollup/dist/es/shared/node-entry.js:7432:38)
    at Identifier.bind (file:///Users/luke/dev/pos-vts/node_modules/rollup/dist/es/shared/node-entry.js:6908:40)
    at CallExpression.bind (file:///Users/luke/dev/pos-vts/node_modules/rollup/dist/es/shared/node-entry.js:4775:23)
    at CallExpression.bind (file:///Users/luke/dev/pos-vts/node_modules/rollup/dist/es/shared/node-entry.js:9135:15)

Environment (please complete the following information): (all latest versions)

• vue-instantsearch@4.16.2
• Chrome 121
• @meilisearch/instant-meilisearch@0.18.0 (works with 0.17.0)
• Vue 3 for a simple one page SPA
• Node 22.0.0 (tried on Node 18 too)
• Darwin Kernel Version 23.4.0 (Mac)

(This is a move from here meilisearch/meilisearch-js#1651)

---

I also end up reviewing the change log from 0.17.0 and came across this change which, if applied on my own very project, lets me successfully build the project.

The change: 7b5b003

However then, in the browser console, I receive Uncaught TypeError: Failed to resolve module specifier "crypto". Relative references must start with either "/", "./", or "../". error and it doesn't work.

Any ideas?

I will tag @brunoocasali. Perhaps it is something obvious that can be configured by me in Vite config and I just happen to be missing it out. ✌️

[brunoocasali]

Hi @flexchar yes I know!

Can you check the release changelog of the meilisearch-js https://github.com/meilisearch/meilisearch-js/releases/tag/v0.39.0 I will add extra information in this changelog so other people can easily get it :)

[flexchar]

I actually checked the wrong change log and then checked the list of commits. However this still doesn't work - I am getting Uncaught TypeError: Failed to resolve module specifier "crypto". Relative references must start with either "/", "./", or "../". in the console (the last part of my issue) when I add that to Vite. Any ideas why?

[brunoocasali]

Well, the crypto dependency is only used when we want to generate JWT tokens (from the node.js side). Can you show me your vite config?

Going further, maybe you can create a repo reproducing your scenario would be extremely helpful!

[flexchar]

I absolutely agree with you. No tokens are being generated here so it only makes it stranger.

I borrowed your movies demo index to build this example. https://github.com/flexchar/meili-issue-1299

I am also getting 9/10 times cors issue when loading the dev page. I have the same on own indices hosted on the Cloud. This seems to be a big issue. Let me know if you can notice that too. Of course, this will go into a separate issue.:)

[rbozan]

Because of this change , I can build my Sveltekit project but on the clientside it totally fails to start with the following error:

entry.D12V1Vko.js:1 Uncaught (in promise) TypeError: Failed to resolve module specifier "crypto". Relative references must start with either "/", "./", or "../".

This is with the following in my vite.config

		build: {
			sourcemap: true,
			// Needed by Meilisearch, see https://github.com/meilisearch/meilisearch-js/issues/1649
			rollupOptions: {
				external: ['crypto']
			}
		},

[Tragio]

On Nuxt 3 putting the following on the nuxt.config.ts doesn't work on dev or prod.

  vite: {
    build: {
      rollupOptions: {
        external: ['crypto'], 
      },
    },
  },

[flexchar]

I am glad to now I'm not the only with this. I wonder if we can completely omit the need for the crypto module since it's unlikely that browser users would ever generate tenant tokens. I am also really curious how to get the Vite working and what does @brunoocasali also have in his config that it works for him and not for us. :)

[beltebelt]

+1 Came across the same issue while building a svelte project

TypeError: Failed to resolve module specifier "crypto". Relative references must start with either "/", "./", or "../".

[brunoocasali]

Hey there, I'm sorry to hear that :/

Here is the playground I had to fix right after upgrading to latest meilisearch-js:
https://github.com/meilisearch/meilisearch-js-plugins/tree/main/playgrounds/vue3-ts

I didn't find anything different from what you had in your demo (regarding configuration) @flexchar.

PS: About your Cloud issue can you reach us from the internal chat?!

[brunoocasali]

I am glad to now I'm not the only with this. I wonder if we can completely omit the need for the crypto module since it's unlikely that browser users would ever generate tenant tokens. I am also really curious how to get the Vite working and what does @brunoocasali also have in his config that it works for him and not for us. :)

Yeah, that was the idea when I suggested using the external: ['crypto'],.

Since I don't have time to go over this issue and I don't want to block you anymore, I'm going to push a new patch version, rolling back the change.

[flexchar]

Maybe we should open it at Vite repo and see if they can help us out? I must admit I don't completely understand where the error message comes from since it contains no back trace.

[brunoocasali]

Hey, I created a branch to solve this issue: meilisearch/meilisearch-js#1652 and I was able to build and see the app running without any warnings.

[flexchar]

Those are great news! I see you isolated the import only when using the function. That seems great to me, even though the curiosity for why Vite wouldn't work otherwise remains hungry. :)

[brunoocasali]

Yeah, I don't know why either (that's my first time using vite tbh). But I guess it should have something related to the configuration here: https://github.com/meilisearch/meilisearch-js/pull/1616/files#diff-b55cdbef4907b7045f32cc5360d48d262cca5f94062e353089f189f4460039e0L2

[flexchar]

Good job fixing it Bruno! It at least unblocks me and bunch of other people.

And when I get a free minute, I will dig in to see if I can get it working ✌️