[🐛 Bug]: Type error: Conversion of type 'ProcessEnv'

[Mecanik]

next-on-pages environment related information

No response

Description

As specified here: https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#use-bindings-in-your-nextjs-application

The build fails with:

17:28:19.027 | ▲  ./src/app/api/hello/route.ts:11:24
-- | --
17:28:19.027 | ▲  Type error: Conversion of type 'ProcessEnv' to type '{ MY_KV: KVNamespace; }' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
17:28:19.027 | ▲  Property 'MY_KV' is missing in type 'ProcessEnv' but required in type '{ MY_KV: KVNamespace; }'.
17:28:19.028 | ▲
17:28:19.028 | ▲     9 \|
17:28:19.028 | ▲    10 \| 	// the type `KVNamespace` comes from the @cloudflare/workers-types package
17:28:19.028 | ▲  > 11 \| 	const { MY_KV } = (process.env as { MY_KV: KVNamespace });
17:28:19.028 | ▲       \| 	                      ^
17:28:19.028 | ▲    12 \|
17:28:19.029 | ▲    13 \| 	console.log(MY_KV);
17:28:19.029 | ▲    14 \|
17:28:19.108 | ▲  Error: Command "npm run build" exited with 1

Reproduction

No response

Pages Deployment Method

Pages CI (GitHub/GitLab integration)

Pages Deployment ID

No response

Additional Information

No response

Would you like to help?

• Would you like to help fixing this bug?

[dario-piotrowicz]

@Mecanik Thanks so much for the issue! 😄

I'm fixing this in our Cloudflare docs repo: cloudflare/cloudflare-docs#11971

Please have a look at my PR and let me know if you're happy with the changes 🙂

Besides that I'm closing this issue as I believe this to be a documentation mistake and not an actually issue within the next-on-pages repository, please feel free to reopen it if you disagree

[Mecanik]

@dario-piotrowicz Thanks, to be honest this was quite time wasting until I found the actual solution. Luckily I found this: https://socket.dev/npm/package/@cloudflare/next-on-pages-next-dev meanwhile and I figured it out, but the docs confusing users is very bad.

You know how it is... "people don't read the docs"; well, now if people read the docs they get confused and nothing works. There is so much more wrong with the docs, for example the fact that if you follow the instructions here: https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#deploy-via-the-create-cloudflare-cli-c3 the project will be built on your side and uploaded as static files - no Edge runtime. However if you connect the project via Github and configure the build normally on the dashboard, the project builds as it should. And so on...

[Mecanik]

Also, the comment make sure to include the package in your tsconfig.json's "types" field is not really valid; I have no such thing in my tsconfig.json, I just installed the npm package @cloudflare/workers-types.

[dario-piotrowicz]

Also, the comment make sure to include the package in your tsconfig.json's "types" field is not really valid; I have no such thing in my tsconfig.json, I just installed the npm package @cloudflare/workers-types.

The env.d.ts file uses the workers-types types, and in order to do that those need to be declared in the tsconfig.json file like so:

The comment there was meant to remind people of the above without going too much into details and getting too verbose, but it looks that it is not really clear (and it does for sure assume a certain familiarity with this sort of setup), I'll update that, thanks so much for the very valuable feedback 🙏

[dario-piotrowicz]

@dario-piotrowicz Thanks, to be honest this was quite time wasting until I found the actual solution. Luckily I found this: https://socket.dev/npm/package/@cloudflare/next-on-pages-next-dev meanwhile and I figured it out, but the docs confusing users is very bad.
You know how it is... "people don't read the docs"; well, now if people read the docs they get confused and nothing works. There is so much more wrong with the docs

Yes, you're right, sorry about that, I'm sorry about the time wasting, I'll look into improve our docs 😓

for example the fact that if you follow the instructions here: https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#deploy-via-the-create-cloudflare-cli-c3 the project will be built on your side and uploaded as static files - no Edge runtime. However if you connect the project via Github and configure the build normally on the dashboard, the project builds as it should.

Sorry could you clarify what you mean by saying that with C3 the project will be build and uploaded as static files - no Edge runtime? As far as I can tell that's definitely not the case 😕

[Mecanik]

Sorry could you clarify what you mean by saying that with C3 the project will be build and uploaded as static files - no Edge runtime? As far as I can tell that's definitely not the case 😕

Just try to follow the documentation and deploy the project from wrangler. In my case, it uploaded as static (no edge functions) + I had to add the node_compat variable to the project myself on the dashboard and re-deploy again.

The only way I got the project working was to create the project as in the docs (npm create cloudflare@latest my-next-app -- --framework=next) and then create a repo, upload, create the project via dashboard, connect the repo and let it build.

[Mecanik]

Also, the comment make sure to include the package in your tsconfig.json's "types" field is not really valid; I have no such thing in my tsconfig.json, I just installed the npm package @cloudflare/workers-types.

The env.d.ts file uses the workers-types types, and in order to do that those need to be declared in the tsconfig.json file like so:

The comment there was meant to remind people of the above without going too much into details and getting too verbose, but it looks that it is not really clear (and it does for sure assume a certain familiarity with this sort of setup), I'll update that, thanks so much for the very valuable feedback 🙏

Thanks, I haven't done this; I just installed the npm package @cloudflare/workers-types lol.

[dario-piotrowicz]

Thanks, I haven't done this; I just installed the npm package @cloudflare/workers-types lol.

No problem 😄, as I said it's my fault for having that unclear comment there (again thanks for pointing that out!)

Do you find this clearer? cloudflare/cloudflare-docs@f0e7a67

[dario-piotrowicz]

Just try to follow the documentation and deploy the project from wrangler. In my case, it uploaded as static (no edge functions) + I had to add the node_compat variable to the project myself on the dashboard and re-deploy again.

This is really not right, when you create a next application with npm create cloudflare@latest it will:

• add edge runtime logic (that you can see in the api/hello route, like here)
• add the nodejs_compat flag to the project for you (we do have specific logic for that, here we declare the flag needed for Next.js and here we create the project with such flag)

Could you please have another try, document everything you're doing and if you still see the same issues open a new issue in the workers-sdk repository (where the create cloudflare code lives)? 🙏

(If you do please tag me there and I'll take it from there 🙂)