-
Notifications
You must be signed in to change notification settings - Fork 10.2k
Wrangler v4 migration guide #18726
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Wrangler v4 migration guide #18726
Changes from 14 commits
Commits
Show all changes
15 commits
Select commit
Hold shift + click to select a range
29a9b48
adds migration guide draft for Wrangler v4
korinne bf63c69
Fixes typos and reorders migration docs to start with v4
korinne 48b2f0f
Update src/content/docs/workers/wrangler/migration/update-v3-to-v4.mdx
korinne f192bf0
Update src/content/docs/workers/wrangler/migration/update-v3-to-v4.mdx
korinne edf6e20
Update src/content/docs/workers/wrangler/migration/update-v3-to-v4.mdx
korinne 1dca406
update `wrangler types` runtime type gen instructions
emily-shen b99d442
Remove @types/node known issue
emily-shen 7964156
WIP
penalosa 3b352a6
more docs
penalosa e46d5d9
typo
penalosa 048d519
Add changelog
penalosa 85d0336
Apply suggestions from code review
penalosa 7cd6d24
more removed deprecations
penalosa 007aeb8
Apply suggestions from code review
penalosa 346dce1
Update src/content/changelog/workers/2025-03-13-wrangler-v4.mdx
penalosa File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| --- | ||
| title: Use the latest JavaScript features with Wrangler CLI v4 | ||
| description: Wrangler v4 is available! | ||
| products: | ||
| - workers | ||
| date: 2025-02-28T22:30:00Z | ||
| --- | ||
|
|
||
| import { PackageManagers } from "~/components"; | ||
|
|
||
| We've released the next major version of [Wrangler](/workers/wrangler/), the CLI for Cloudflare Workers — `[email protected]`. Wrangler v4 is a major release focused on updates to underlying systems and dependencies, along with improvements to keep Wrangler commands consistent and clear. | ||
|
|
||
| You can run the following command to install it in your projects: | ||
|
|
||
| <PackageManagers pkg="wrangler@latest" /> | ||
|
|
||
| Unlike previous major versions of Wrangler, which were [foundational rewrites](https://blog.cloudflare.com/wrangler-v2-beta/) and [rearchitectures](https://blog.cloudflare.com/wrangler3/) — Version 4 of Wrangler includes a much smaller set of changes. If you use Wrangler today, your workflow is very unlikely to change. | ||
|
|
||
| A [detailed migration guide](/workers/wrangler/migration/update-v3-to-v4) is available and if you find a bug or hit a roadblock when upgrading to Wrangler v4, [open an issue on the `cloudflare/workers-sdk` repository on GitHub](https://github.com/cloudflare/workers-sdk/issues/new?template=bug-template.yaml). | ||
|
|
||
| Going forward, we'll continue supporting Wrangler v3 with bug fixes and security updates until Q1 2026, and with critical security updates until Q1 2027, at which point it will be out of support. | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,107 +8,128 @@ head: | |
| content: Write Cloudflare Workers in TypeScript | ||
| --- | ||
|
|
||
| import { TabItem, Tabs } from "~/components"; | ||
| import { TabItem, Tabs, PackageManagers, Render } from "~/components"; | ||
|
|
||
| ## TypeScript | ||
| TypeScript is a first-class language on Cloudflare Workers. All APIs provided in Workers are fully typed, and type definitions are generated directly from [workerd](https://github.com/cloudflare/workerd), the open-source Workers runtime. | ||
|
|
||
| TypeScript is a first-class language on Cloudflare Workers. Cloudflare publishes type definitions to [GitHub](https://github.com/cloudflare/workers-types) and [npm](https://www.npmjs.com/package/@cloudflare/workers-types) (`npm install -D @cloudflare/workers-types`). All APIs provided in Workers are fully typed, and type definitions are generated directly from [workerd](https://github.com/cloudflare/workerd), the open-source Workers runtime. | ||
| We recommend you generate types for your Worker by running [`wrangler types`](/workers/wrangler/commands/#types). Cloudflare also publishes type definitions to [GitHub](https://github.com/cloudflare/workers-types) and [npm](https://www.npmjs.com/package/@cloudflare/workers-types) (`npm install -D @cloudflare/workers-types`). | ||
|
|
||
| ### Generate types that match your Worker's configuration (experimental) | ||
| <h3 id="generate-types"> | ||
| Generate types that match your Worker's configuration | ||
| </h3> | ||
|
|
||
| Cloudflare continuously improves [workerd](https://github.com/cloudflare/workerd), the open-source Workers runtime. | ||
| Changes in workerd can introduce JavaScript API changes, thus changing the respective TypeScript types. For example, the [`urlsearchparams_delete_has_value_arg`](/workers/configuration/compatibility-flags/#urlsearchparams-delete-and-has-value-argument) compatibility flag adds optional arguments to some methods, in order to support new additions to the WHATWG URL standard API. | ||
| Changes in workerd can introduce JavaScript API changes, thus changing the respective TypeScript types. | ||
|
|
||
| This means the correct TypeScript types for your Worker depend on: | ||
| This means the correct types for your Worker depend on: | ||
|
|
||
| 1. Your Worker's [Compatibility Date](/workers/configuration/compatibility-dates/). | ||
| 2. Your Worker's [Compatibility Flags](/workers/configuration/compatibility-flags/). | ||
| 1. Your Worker's [compatibility date](/workers/configuration/compatibility-dates/). | ||
| 2. Your Worker's [compatibility flags](/workers/configuration/compatibility-flags/). | ||
| 3. Your Worker's bindings, which are defined in your [Wrangler configuration file](/workers/wrangler/configuration). | ||
| 4. Any [module rules](/workers/wrangler/configuration/#bundling) you have specified in your Wrangler configuration file under `rules`. | ||
|
|
||
| For example, if you have `compatibility_flags = ["nodejs_als"]` in your [Wrangler configuration file](/workers/wrangler/configuration/), then the runtime will allow you to use the [`AsyncLocalStorage`](https://nodejs.org/api/async_context.html#class-asynclocalstorage) class in your worker code, but you will not see this reflected in the type definitions in `@cloudflare/workers-types`. | ||
| For example, the runtime will only allow you to use the [`AsyncLocalStorage`](https://nodejs.org/api/async_context.html#class-asynclocalstorage) class if you have `compatibility_flags = ["nodejs_als"]` in your [Wrangler configuration file](/workers/wrangler/configuration/). This should be reflected in the type definitions. | ||
|
|
||
| In order to solve this issue, and to ensure that your type definitions are always up-to-date with your compatibility settings, you can dynamically generate the runtime types (as of `wrangler 3.66.0`): | ||
| To ensure that your type definitions always match your Worker's configuration, you can dynamically generate types by running: | ||
|
|
||
| ```bash | ||
| npx wrangler types --experimental-include-runtime | ||
| ``` | ||
| <PackageManagers type="exec" pkg="wrangler" args={"types"} /> | ||
|
|
||
| This will generate a `d.ts` file and (by default) save it to `.wrangler/types/runtime.d.ts`. You will be prompted in the command's output to add that file to your `tsconfig.json`'s `compilerOptions.types` array. | ||
| See [the `wrangler types` command docs](/workers/wrangler/commands/#types) for more details. | ||
|
|
||
| If you would like to commit the file to git, you can provide a custom path. Here, for instance, the `runtime.d.ts` file will be saved to the root of your project: | ||
| :::note | ||
|
|
||
| ```bash | ||
| npx wrangler types --experimental-include-runtime="./runtime.d.ts" | ||
| ``` | ||
| <Render file="wrangler-commands/runtime-types" product="workers" /> | ||
|
|
||
| **Note: To ensure that your types are always up-to-date, make sure to run `wrangler types --experimental-include-runtime` after any changes to your config file.** | ||
| ::: | ||
|
|
||
| See [the full list of available flags](/workers/wrangler/commands/#types) for more details. | ||
| This will generate a `d.ts` file and (by default) save it to `worker-configuration.d.ts`. This will include `Env` types based on your Worker bindings _and_ runtime types based on your Worker's compatibility date and flags. | ||
|
|
||
| #### Migrating from `@cloudflare/workers-types` to `wrangler types --experimental-include-runtime` | ||
| You should then add that file to your `tsconfig.json`'s `compilerOptions.types` array. If you have the `nodejs_compat` compatibility flag, you should also install `@types/node`. | ||
|
|
||
| The `@cloudflare/workers-types` package provides runtime types for each distinct [compatibility date](https://github.com/cloudflare/workerd/tree/main/npm/workers-types#compatibility-dates), which is specified by the user in their `tsconfig.json`. But this package is superseded by the `wrangler types --experimental-include-runtime` command. | ||
| You can commit your types file to git if you wish. | ||
|
|
||
| Here are the steps to switch from `@cloudflare/workers-types` to using `wrangler types` with the experimental runtime inclusion: | ||
| :::note | ||
|
|
||
| ##### Uninstall `@cloudflare/workers-types` | ||
| To ensure that your types are always up-to-date, make sure to run `wrangler types` after any changes to your config file. | ||
|
|
||
| <Tabs> <TabItem label="npm"> | ||
| ::: | ||
|
|
||
| ```sh | ||
| npm uninstall @cloudflare/workers-types | ||
| ``` | ||
| <h3 id="migrating"> | ||
| Migrating from `@cloudflare/workers-types` to `wrangler types` | ||
| </h3> | ||
|
|
||
| </TabItem> <TabItem label="yarn"> | ||
| We recommend you use `wrangler types` to generate runtime types, rather than using the `@cloudflare/workers-types` package, as it generates types based on your Worker's [compatibility date](https://github.com/cloudflare/workerd/tree/main/npm/workers-types#compatibility-dates) and `compatibility flags`, ensuring that types match the exact runtime APIs made available to your Worker. | ||
|
|
||
| ```sh | ||
| yarn remove @cloudflare/workers-types | ||
| ``` | ||
| :::note | ||
|
|
||
| </TabItem> <TabItem label="pnpm"> | ||
| There are no plans to stop publishing the `@cloudflare/workers-types` package, which will still be the recommended way to type libraries and shared packages in the workers environment. | ||
|
|
||
| ```sh | ||
| pnpm uninstall @cloudflare/workers-types | ||
| ``` | ||
| ::: | ||
|
|
||
| </TabItem> </Tabs> | ||
| #### 1. Uninstall `@cloudflare/workers-types` | ||
|
|
||
| ##### Generate runtime types using wrangler | ||
| <PackageManagers type="remove" pkg="@cloudflare/workers-types" /> | ||
|
|
||
| ```bash | ||
| npx wrangler types --experimental-include-runtime | ||
| ``` | ||
| #### 2. Generate runtime types using Wrangler | ||
|
|
||
| This will generate a `.d.ts` file, saved to `.wrangler/types/runtime.d.ts` by default. | ||
| <PackageManagers type="exec" pkg="wrangler" args={"types"} /> | ||
|
|
||
| ##### Update your `tsconfig.json` to include the generated types | ||
| This will generate a `.d.ts` file, saved to `worker-configuration.d.ts` by default. This will also generate `Env` types. If for some reason you do not want to include those, you can set `--include-env=false`. | ||
|
|
||
| You can now remove any imports from `@cloudflare/workers-types` in your Worker code. | ||
|
|
||
| :::note | ||
|
|
||
| <Render file="wrangler-commands/runtime-types" product="workers" /> | ||
|
|
||
| ::: | ||
|
|
||
| #### 3. Make sure your `tsconfig.json` includes the generated types | ||
|
|
||
| ```json | ||
| { | ||
| "compilerOptions": { | ||
| "types": ["./.wrangler/types/runtime"] | ||
| "types": ["worker-configuration.d.ts"] | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| Note that if you have specified a custom path for the runtime types file, you should use that in your `compilerOptions.types` array instead of the default path. | ||
|
|
||
| ##### Update your scripts and CI pipelines | ||
| #### 4. Add @types/node if you are using [`nodejs_compat`](/workers/runtime-apis/nodejs/) (Optional) | ||
|
|
||
| If you are using the `nodejs_compat` compatibility flag, you should also install `@types/node`. | ||
|
|
||
| <PackageManagers type="add" pkg="@types/node" /> | ||
|
|
||
| Then add this to your `tsconfig.json`. | ||
|
|
||
| ```json | ||
| { | ||
| "compilerOptions": { | ||
| "types": ["worker-configuration.d.ts", "node"] | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| #### 5. Update your scripts and CI pipelines | ||
|
|
||
| When switching to `wrangler types --experimental-include-runtime`, you'll want to ensure that your development process always uses the most up-to-date types. The main thing to remember here is that - regardless of your specific framework or build tools - you should run the `wrangler types --experimental-include-runtime` command before any development tasks that rely on TypeScript. This ensures your editor and build tools always have access to the latest types. | ||
| Regardless of your specific framework or build tools, you should run the `wrangler types` command before any tasks that rely on TypeScript. | ||
|
|
||
| Most projects will have existing build and development scripts, as well as some type-checking. In the example below, we're adding the `wrangler types --experimental-include-runtime` before the type-checking script in the project: | ||
| Most projects will have existing build and development scripts, as well as some type-checking. In the example below, we're adding the `wrangler types` before the type-checking script in the project: | ||
|
|
||
| ```json | ||
| { | ||
| "scripts": { | ||
| "dev": "existing-dev-command", | ||
| "build": "-existing-build-command", | ||
| "type-check": "wrangler types --experimental-include-runtime && tsc" | ||
| "build": "existing-build-command", | ||
| "generate-types": "wrangler types", | ||
| "type-check": "generate-types && tsc" | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| In CI, you may have separate build and test commands. It is best practice to run `wrangler types --experimental-include-runtime` before other CI commands. For example: | ||
| We recommend you commit your generated types file for use in CI. Alternatively, you can run `wrangler types` before other CI commands, as it should not take more than a few seconds. For example: | ||
|
|
||
| <Tabs> <TabItem label="npm"> | ||
|
|
||
|
|
@@ -136,26 +157,6 @@ In CI, you may have separate build and test commands. It is best practice to run | |
| </TabItem> </Tabs> | ||
| By integrating the `wrangler types --experimental-include-runtime` command into your workflow this way, you ensure that your development environment, builds, and CI processes always use the most accurate and up-to-date types for your Cloudflare Worker, regardless of your specific framework or tooling choices. | ||
|
|
||
| ### Known issues | ||
|
|
||
| #### Transitive loading of `@types/node` overrides `@cloudflare/workers-types` | ||
|
|
||
| Your project's dependencies may load the `@types/node` package on their own. As of `@types/[email protected]` that package now overrides `Request`, `Response` and `fetch` types (possibly others) specified by `@cloudflare/workers-types` causing type errors. | ||
|
|
||
| The way to get around this issue currently is to pin the version of `@types/node` to `20.8.3` in your `package.json` like this: | ||
|
|
||
| ```json | ||
| { | ||
| "overrides": { | ||
| "@types/node": "20.8.3" | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| For more information, refer to [this GitHub issue](https://github.com/cloudflare/workerd/issues/1298). | ||
|
|
||
| ### Resources | ||
| - [TypeScript template](https://github.com/cloudflare/workers-sdk/tree/main/packages/create-cloudflare/templates/hello-world/ts) | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.