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

[simplenotezy]

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?

[threepointone]

This doesn't seem right. If I had to guess, I'd think you were using an older version of @cloudflare/workers-types. Could you share your package.json/tsconfig.json?

[motiejunas]

Same for me with @cloudflare/[email protected] The native Request interface is picked up by VSCode.

tsconfig.json:

...
"types": ["@cloudflare/workers-types"]
...

[rahulgi]

I was able to resolve this by making sure I excluded webworker from the tsconfig lib option as documented at the top of the README

[motiejunas]

Resolved this by adding es2020 to lib in tsconfig.json.

...
"lib": ["es2020"]
...

[romeovs]

If I add

"lib": ["es2020"]

to tsconfig.json, I get the following error:

Cannot find name 'Request'.

Here's my full tsconfig.json:

{
  "compilerOptions": {
    "target": "es2020",
    "strict": true,
    "lib": ["es2020"],
    "rootDir": "src",
    "outDir": "dist",
    "moduleResolution": "node"
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules", "dist"],
  "types": ["@cloudflare/workers-types"]
}

[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/