Building for cloudflare?

I’m using @dfinity/auth-client on my sveltekit frontend for internet identity. Also, I’m deploying my site to cloudflare pages with workers.

I have two problems (which I guess are related):

  1. When I use the latest version (0.14.1) of all the @dfinity/* dependencies I get this build error:
> Using @sveltejs/adapter-cloudflare
✘ [ERROR] Could not resolve "stream"

    node_modules/cipher-base/index.js:2:24:
      2 │ var Transform = require('stream').Transform
        ╵                         ~~~~~~~~

  The package "stream" wasn't found on the file system but is
  built into node. Are you trying to bundle for node? You can
  use "platform: 'node'" to do that, which will remove this
  error.

✘ [ERROR] Could not resolve "assert"

    node_modules/@dfinity/identity/lib/esm/identity/hdkey.js:5:19:
      5 │ import assert from 'assert';
        ╵                    ~~~~~~~~

  The package "assert" wasn't found on the file system but is
  built into node. Are you trying to bundle for node? You can
  use "platform: 'node'" to do that, which will remove this
  error.

✘ [ERROR] Could not resolve "events"

    node_modules/readable-stream/lib/_stream_readable.js:32:17:
      32 │ var EE = require('events').EventEmitter;
         ╵                  ~~~~~~~~

  The package "events" wasn't found on the file system but is
  built into node. Are you trying to bundle for node? You can
  use "platform: 'node'" to do that, which will remove this
  error.

✘ [ERROR] Could not resolve "events"

    node_modules/readable-stream/lib/internal/streams/stream-browser.js:1:25:
      1 │ module.exports = require('events').EventEmitter;
        ╵                          ~~~~~~~~

  The package "events" wasn't found on the file system but is
  built into node. Are you trying to bundle for node? You can
  use "platform: 'node'" to do that, which will remove this
  error.

This is because cloudflare does not support all the node dependencies. How can I fix this?
Also, this problem goes away if I use @dfinity/*: `0.14.0 version for all the deps.

  1. The second issue is when I import AuthClient in a file, the resulting output file becomes very large, around 300kb with 0.14.0 and around 900kb with the 0.14.1 version:

So, how do I optimise for the size and how do I use the latest version of @dfinity dependencies with cloudlflare pages (which use workers under the hood)?

Before jumping in the two questions, out of curiosity, you have the same issue with previous version of @dfinity/* dependencies too right?


  1. When I use the latest version of all the @dfinity/* dependencies I get this build error:
    ✘ [ERROR] Could not resolve

It’s probably because some NodeJS librarires need to be polyfied.

I would try to Node polyfill esbuild (for dev) and rollup (for prod) builds in your vite.config

import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
import rollupNodePolyFill from "rollup-plugin-node-polyfills";

...

   build: {
    ...
    rollupOptions: {
      plugins: [rollupNodePolyFill()],
    },
  },
  ...
  optimizeDeps: {
    esbuildOptions: {
      define: {
        global: "globalThis",
      },
      plugins: [NodeModulesPolyfillPlugin()],
    },
  },

Some references and examples:


The second issue is when I import AuthClient in a file, the resulting output file becomes very large, around 300kb with 0.14.0 and around 900kb with the 0.14.1 version:

According changelog there was a new dependency that was added, maybe that’s the reason?

Here gonna ping @kpeacock.

Being said, have you double check that you do not have a wildcard import (import * from) in your code? maybe the chunking import the all lib while only part of it would be needed?

Meanwhile, maybe it’s safe to stick to v0.14.0 until above is cleared.

Being said, have you double check that you do not have a wildcard import (import * from) in your code? maybe the chunking import the all lib while only part of it would be needed?

I’m using modular imports everywhere.

Meanwhile, maybe it’s safe to stick to v0.14.0 until above is cleared.

Yup, I’m going to stay on 0.14.0.

And I’m going to wait for @kpeacock for some more info on this topic.

Thanks for the detailed reply @peterparker :pray:

1 Like

Faced some polyfill issue with v0.14.1 but v0.14.0 too. It seems I solved it that way:

  1. installer buffer for the browser
npm i buffer
  1. polyfill esbuild
npm i @esbuild-plugins/node-modules-polyfill @esbuild-plugins/node-globals-polyfill @rollup/plugin-inject -D

in vite.config

build: {
	target: 'es2020',
	rollupOptions: {
		// Polyfill Buffer for production build
		plugins: [
			inject({
				modules: { Buffer: ['buffer', 'Buffer'] }
			})
		]
	}
},
optimizeDeps: {
		esbuildOptions: {
			// Node.js global to browser globalThis
			define: {
				global: 'globalThis'
			},
			// Enable esbuild polyfill plugins
			plugins: [NodeGlobalsPolyfillPlugin(), NodeModulesPolyfillPlugin()]
		}
	}
1 Like

Hmm, sounds like an issue that may have been introduced with the new Secp256k1KeyIdentity.fromSeed feature. Ideally it would be tree shaken out if you aren’t using a Secp256k1KeyIdentity, but it’s hard to anticipate exactly how a bundler will manage it

Maybe this is an issue with the harmony exports, where you’re using the cjs instead of esm imports because the bundler is using the main index instead of the module?

I wonder if it may be time to investigate deprecating commonjs

1 Like

I’m pretty sure I’m not using cjs. My package.json is set to using module. So maybe, it’s something else.

I’ve got a ticket to fix this regression and to add a CI check for package sizes