Cannot deploy to vercel

[alanshaw]

There's not an obvious way to easily use the w3up-client in a vercel app.

[alanshaw]

Vercel did not like the conf module. I used this, to avoid the client importing the conf module:

import { base64 } from 'multiformats/bases/base64'
import { parse as parseLink } from 'multiformats/link'
import { Client } from '@web3-storage/w3up-client/client'
import { StoreMemory } from '@web3-storage/w3up-client/stores/memory'
import { AgentData } from '@web3-storage/access/agent'
import { parse as parsePrincipal } from '@ucanto/principal/ed25519'
import { importDAG } from '@ucanto/core/delegation'
import { CarBufferReader } from '@ipld/car/buffer-reader'

export const createW3 = async (key: string, proof: string) => {
  const client = new Client(await AgentData.create({ principal: parsePrincipal(key) }, { store: new StoreMemory() }))
  await client.addSpace(await parseProof(proof))
  return client
}

const parseProof = async (data: string) => {
  const link = parseLink(data, base64)
  const reader = CarBufferReader.fromBytes(link.multihash.digest)
  // @ts-expect-error
  return importDAG(reader.blocks())
}

Separately the WASM piece hasher could not be loaded. Currently the calculated piece CID is not used in the client, so you can just replace it with a fake one:

fake-piece-hasher.js

import { CAR } from '@ucanto/transport'

/** @param {Uint8Array} bytes */
export const digest = async (bytes) => {
  const cid = await CAR.codec.link(bytes)
  return cid.multihash
}

...and then in next.config.mjs you can get webpack to rewrite the import:

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, ctx) => {
    const plugins = config.plugins ?? []
    plugins.push(new ctx.webpack.NormalModuleReplacementPlugin(
      /fr32-sha2-256-trunc254-padded-binary-tree-multihash\/async/,
      '../../../../../fake-piece-hasher.js'
    ))
    return { ...config, plugins }
  }
}

export default nextConfig