Integrating Cloudflare Workflows with Astro

I'm trying to integrate the newly announced Cloudflare Workflows with an existing Astro project (not using the starter template) and running into some TypeScript issues.

Issue 1: Module Resolution
Getting error on import:

import { WorkflowEntrypoint, WorkflowStep, WorkflowEvent } from "cloudflare:workers";
// Error: Cannot find module 'cloudflare:workers' or its corresponding type declarations.ts

import { WorkflowEntrypoint, WorkflowStep, WorkflowEvent } from "cloudflare:workers";
// Error: Cannot find module 'cloudflare:workers' or its corresponding type declarations.ts

Issue 2: Type Arguments
Example from docs throwing TS error:

const apiResponse = await step.do("some other step", async () => {
  let resp = await fetch("https://api.cloudflare.com/client/v4/ips");
  return await resp.json<any>();  // Error: Expected 0 type arguments, but got 1.ts(2558)
});

const apiResponse = await step.do("some other step", async () => {
  let resp = await fetch("https://api.cloudflare.com/client/v4/ips");
  return await resp.json<any>();  // Error: Expected 0 type arguments, but got 1.ts(2558)
});

Current setup

{
  "dependencies": {
    "@astrojs/check": "^0.9.4",
    "@astrojs/cloudflare": "^11.2.0",
    "@astrojs/node": "^8.3.4",
    "@astrojs/tailwind": "^5.1.2",
    "@cloudflare/workers-types": "^4.20241022.0",
    "astro": "^4.16.7",
    "tailwindcss": "^3.4.14",
    "typescript": "^5.6.3"
  }
}

{
  "dependencies": {
    "@astrojs/check": "^0.9.4",
    "@astrojs/cloudflare": "^11.2.0",
    "@astrojs/node": "^8.3.4",
    "@astrojs/tailwind": "^5.1.2",
    "@cloudflare/workers-types": "^4.20241022.0",
    "astro": "^4.16.7",
    "tailwindcss": "^3.4.14",
    "typescript": "^5.6.3"
  }
}

Questions:

What's the correct way to set up Workflows in an existing Astro project?
What should the folder structure look like?
Are there any specific configuration steps needed for TypeScript to recognize the cloudflare:workers module?
How do we properly type the json<T>() response?

Any help or guidance would be greatly appreciated!

Integrating Cloudflare Workflows with Astro

import { WorkflowEntrypoint, WorkflowStep, WorkflowEvent } from "cloudflare:workers";
// Error: Cannot find module 'cloudflare:workers' or its corresponding type declarations.ts

import { WorkflowEntrypoint, WorkflowStep, WorkflowEvent } from "cloudflare:workers";
// Error: Cannot find module 'cloudflare:workers' or its corresponding type declarations.ts

Issue 2: Type Arguments
Example from docs throwing TS error:

const apiResponse = await step.do("some other step", async () => {
  let resp = await fetch("https://api.cloudflare.com/client/v4/ips");
  return await resp.json<any>();  // Error: Expected 0 type arguments, but got 1.ts(2558)
});

const apiResponse = await step.do("some other step", async () => {
  let resp = await fetch("https://api.cloudflare.com/client/v4/ips");
  return await resp.json<any>();  // Error: Expected 0 type arguments, but got 1.ts(2558)
});

Current setup

{
  "dependencies": {
    "@astrojs/check": "^0.9.4",
    "@astrojs/cloudflare": "^11.2.0",
    "@astrojs/node": "^8.3.4",
    "@astrojs/tailwind": "^5.1.2",
    "@cloudflare/workers-types": "^4.20241022.0",
    "astro": "^4.16.7",
    "tailwindcss": "^3.4.14",
    "typescript": "^5.6.3"
  }
}

{
  "dependencies": {
    "@astrojs/check": "^0.9.4",
    "@astrojs/cloudflare": "^11.2.0",
    "@astrojs/node": "^8.3.4",
    "@astrojs/tailwind": "^5.1.2",
    "@cloudflare/workers-types": "^4.20241022.0",
    "astro": "^4.16.7",
    "tailwindcss": "^3.4.14",
    "typescript": "^5.6.3"
  }
}

Integrating Cloudflare Workflows with Astro

Similar Threads

Integrating Cloudflare Workflows with Astro

Similar Threads

Similar Threads

Similar Threads