Browser compatibility issues within used modules

[dogukanakkaya]

This module uses a lot of Node.js compatible packages like node-fetch, buffer. Not directly but within used packages. For example when you try to build the project with Vite:

RollupError: "promisify" is not exported by "__vite-browser-external", imported by "node_modules/lucid-cardano/node_modules/node-fetch/src/body.js".

I solved this issue by below configuration in vite.config.ts

build: {
    rollupOptions: {
      external: [...builtinModules, ...builtinModules.map((m) => `node:${m}`)]
    }
},

But still different issues continues. After this build succeeds but if you run the built file you're having this error in console:

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

I tried lots of different configuration to get pass these issues but no success. Last thing I tried was putting an import map in index.html like this:

<script type="importmap">
      {
        "imports": {
          "buffer": "https://unpkg.com/[email protected]"
        }
      }
</script>

Which again gives warnings Module "buffer" has been externalized for browser compatibility. Cannot access "buffer.Buffer" in client code.

This module is intended to be used in the browser but it has dependency to packages that uses Node modules which brings issues. Vite also mentions in their docs:

We recommend avoiding Node.js modules for browser code to reduce the bundle size, although you can add polyfills manually. If the module is imported from a third-party library (that's meant to be used in the browser), it's advised to report the issue to the respective library.