use the replicate npm package

[zeke]

https://github.com/replicate/replicate-js

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
scribble-diffusion	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 10, 2023 at 5:05AM (UTC)

[zeke]

This is working locally but the preview app seems to be failing.

index-153743c76e8d4f30.js:1          POST https://scribble-diffusion-git-use-replicate-npm-package-replicate.vercel.app/api/predictions 500

[zeke]

$ vercel logs -f "https://scribble-diffusion-git-use-replicate-npm-package-replicate.vercel.app/"

Output:

2023-02-25T06:36:38.252Z  2023-02-25T06:36:38.837Z	c48daf0d-9fff-46cc-ac61-e7fb9411a31e	ERROR	Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'node-fetch' imported from /var/task/node_modules/replicate/lib/ReplicateClient.js
2023-02-25T06:36:38.252Z      at new NodeError (node:internal/errors:393:5)
2023-02-25T06:36:38.252Z      at packageResolve (node:internal/modules/esm/resolve:865:9)
2023-02-25T06:36:38.252Z      at moduleResolve (node:internal/modules/esm/resolve:958:20)
2023-02-25T06:36:38.252Z      at moduleResolveWithNodePath (node:internal/modules/esm/resolve:909:12)
2023-02-25T06:36:38.252Z      at defaultResolve (node:internal/modules/esm/resolve:1173:79)
2023-02-25T06:36:38.252Z      at nextResolve (node:internal/modules/esm/loader:163:28)
2023-02-25T06:36:38.252Z      at ESMLoader.resolve (node:internal/modules/esm/loader:841:30)
2023-02-25T06:36:38.252Z      at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
2023-02-25T06:36:38.252Z      at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
2023-02-25T06:36:38.252Z      at link (node:internal/modules/esm/module_job:75:36) {
2023-02-25T06:36:38.252Z    code: 'ERR_MODULE_NOT_FOUND'
2023-02-25T06:36:38.252Z  }

[zeke]

I wonder if https://github.com/vercel/fetch is injecting itself into this somehow and screwing things up...

[zeke]

@erbridge any idea what might be wrong here?

[erbridge]

I wonder if https://github.com/vercel/fetch is injecting itself into this somehow and screwing things up...

It looks like that's supposed to use node-fetch under the hood anyway 🤔.

[erbridge]

Kicking off a redeploy seems to have cleared that error @zeke?

[zeke]

@erbridge no it's still broken when you try to create a scribble.

[gr2m]

I would recommend you remove the dependency on node-fetch altogether. All modern JavaScript runtimes, including Node LTS, come with a native fetch method now. The Replicate constructor should still accept a fetch option to use a custom fetch implementation for environments that don't bring their own, or for testing where we want to mock requests.

[zeke]

It looks like we're using other things from node-fetch besides just fetch like FetchError, Response, etc.

@gr2m can you point to any good reference implementations that are using built-in fetch?

I see this: https://github.com/octokit/request.js/blob/bd72b7be53ab16a6c1c44be99eb73a328fb1e9e4/src/fetch-wrapper.ts#L29-L31

[gr2m]

It looks like we're using other things from node-fetch besides just fetch like FetchError, Response, etc.

I'm pretty sure we can get the types separately, too.

@gr2m can you point to any good reference implementations that are using built-in fetch?

I removed it from @octokit-next/* packages here: https://github.com/octokit/octokit-next.js/pull/62/files

Basically it works like this

import { Octokit } from "@octokit-next/core"

// use built-in fetch, throws if it is not set
const octokit = new Octokit()

or like this

import { Octokit } from "@octokit-next/core"
import fetch from "node-fetch"

// use your own fetch implementation
const octokit = new Octokit({ request: { fetch }})

[zeke]

Works on my machine. Now with webhooks. Thanks @erbridge for unblocking all the things.

🪝 received webhook for prediction:  prv72qvwdfcdxalsypyjjlruye

---

[zeke]

This is ready for a review.