Property 'cf' does not exist on type 'Request'

I tried adding this library to an existing Creact-React-App application.

I’ve added a hello world function, and I wrote this:

export const onRequest: PagesFunction = async (context) => {
  // Contents of context object
  const {
    request, // same as existing Worker API
    env, // same as existing Worker API
    params, // if filename includes [id] or [[path]]
    waitUntil, // same as ctx.waitUntil in existing Worker API
    next, // used for middleware or to fetch assets
    data, // arbitrary space for passing data between middlewares
  } = context;

  return new Response(
    JSON.stringify({
      country: request.cf.country,
      continent: request.cf.continent,
    })
  );
};

However I am getting error:

Property 'cf' does not exist on type 'Request'.ts(2339)

With //@ts-ignore it works just fine though.

What am I missing here?

[CMCDragonkai]

Yea this doesn’t work for me. The "types": ["@cloudflare/workers-types"] doesn’t do anything to my vscode.

I’ve written alot of TS, and most TS projects use the @types convention? Why not use that so we can just install @types/cloudflare-workers-types into dev dependencies.

[qwtel]

The problem could be related to a (dev) dependency pulling in lib.dom or lib.webworker types via comment. You can find them with

grep -r '<reference lib="dom" />' node_modules/

grep -r '<reference lib="webworker" />' node_modules/