Cloudflare Developers•4w ago

I can't get `wrangler dev` to work with kv

As the title states I'm trying to develop a pages app with functions for a very small backend, but I cannot get kv to work. Attached are the errors when running wrangler dev. I have followed https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-site/ and then even checked https://blog.cloudflare.com/blazing-fast-development-with-full-stack-frameworks-and-cloudflare/ I created the project using C3. This seems to be a very common problem and I've seen issues about it since 2022 on github but everything seems to be magically fixed, except it doesn't work, at least for me my wrangler.toml

name = "resourcinator"
compatibility_date = "2024-10-24"

main = "./.svelte-kit/cloudflare/_worker.js"

[build]
command = "yarn run build"

# Environment variables (if needed)
[vars]
# Example: API_KEY = "your_api_key"

# KV Namespace binding for production environment
[[kv_namespaces]]
binding = "RESOURCES_KV"
id = "my_id"
preview_id = "my_id"

name = "resourcinator"
compatibility_date = "2024-10-24"

main = "./.svelte-kit/cloudflare/_worker.js"

[build]
command = "yarn run build"

# Environment variables (if needed)
[vars]
# Example: API_KEY = "your_api_key"

# KV Namespace binding for production environment
[[kv_namespaces]]
binding = "RESOURCES_KV"
id = "my_id"
preview_id = "my_id"

Cloudflare Docs

SvelteKit | Cloudflare Pages docs

Learn how to use Cloudflare's features with SvelteKit

The Cloudflare Blog

Blazing fast development with full-stack frameworks and Cloudflare

You can now use your framework’s development server while accessing D1 databases, R2 object stores, AI models, and more. Iterate locally in milliseconds to build sophisticated web apps that run on Cloudflare

1 Reply

benOP•4w ago

package.json

{
    "name": "resourcinator",
    "version": "0.0.1",
    "private": true,
    "engines" : {
        "node" : "^18.18.0 || ^20.9.0 || >=21.1.0"
    },
    "scripts": {
        "dev": "vite dev",
        "dev:cloudflare": "wrangler dev",
        "build": "vite build",
        "build:cloudflare": "wrangler build",
        "preview": "vite preview",
        "preview:cloudflare": "wrangler preview",
        "deploy:cloudflare": "wrangler publish",
        "test": "playwright test",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "prettier --check . && eslint .",
        "format": "prettier --write ."
    },
    "devDependencies": {
        "@playwright/test": "^1.28.1",
        "@sveltejs/adapter-cloudflare": "^4.7.3",
        "@sveltejs/kit": "^2.0.0",
        "@sveltejs/vite-plugin-svelte": "^3.0.0",
        "@types/eslint": "^9.6.0",
        "eslint": "^9.0.0",
        "eslint-config-prettier": "^9.1.0",
        "eslint-plugin-svelte": "^2.36.0",
        "globals": "^15.0.0",
        "prettier": "^3.1.1",
        "prettier-plugin-svelte": "^3.1.2",
        "svelte": "^4.2.7",
        "svelte-check": "^4.0.0",
        "typescript": "^5.0.0",
        "typescript-eslint": "^8.0.0",
        "vite": "^5.0.3",
        "wrangler": "^3.83.0"
    },
    "type": "module",
    "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
}

{
    "name": "resourcinator",
    "version": "0.0.1",
    "private": true,
    "engines" : {
        "node" : "^18.18.0 || ^20.9.0 || >=21.1.0"
    },
    "scripts": {
        "dev": "vite dev",
        "dev:cloudflare": "wrangler dev",
        "build": "vite build",
        "build:cloudflare": "wrangler build",
        "preview": "vite preview",
        "preview:cloudflare": "wrangler preview",
        "deploy:cloudflare": "wrangler publish",
        "test": "playwright test",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "prettier --check . && eslint .",
        "format": "prettier --write ."
    },
    "devDependencies": {
        "@playwright/test": "^1.28.1",
        "@sveltejs/adapter-cloudflare": "^4.7.3",
        "@sveltejs/kit": "^2.0.0",
        "@sveltejs/vite-plugin-svelte": "^3.0.0",
        "@types/eslint": "^9.6.0",
        "eslint": "^9.0.0",
        "eslint-config-prettier": "^9.1.0",
        "eslint-plugin-svelte": "^2.36.0",
        "globals": "^15.0.0",
        "prettier": "^3.1.1",
        "prettier-plugin-svelte": "^3.1.2",
        "svelte": "^4.2.7",
        "svelte-check": "^4.0.0",
        "typescript": "^5.0.0",
        "typescript-eslint": "^8.0.0",
        "vite": "^5.0.3",
        "wrangler": "^3.83.0"
    },
    "type": "module",
    "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
}

I also get this when the app build in the deployed pages:

    A wrangler.toml file was found but it does not appear to be valid. Did you mean to use wrangler.toml to configure Pages? If so, then make sure the file is valid and contains the `pages_build_output_dir` property. Skipping file and continuing.

    A wrangler.toml file was found but it does not appear to be valid. Did you mean to use wrangler.toml to configure Pages? If so, then make sure the file is valid and contains the `pages_build_output_dir` property. Skipping file and continuing.

ok so I should be settings this pages_build_output_dir according to https://developers.cloudflare.com/pages/functions/wrangler-configuration/ What should I set it to? this is .svelte-kit madness, there's no definitive output folder here, more like 4 folders with weird files in them ~~is it .svelte-kit/output/client? why are there so many folders~~ nvm https://developers.cloudflare.com/pages/configuration/build-configuration/#framework-presets Everything works with just vite dev just changed my wrangler.toml to

name = "resourcinator"
compatibility_date = "Latest"
pages_build_output_dir = "./.svelte-kit/cloudflare"

# Environment variables (if needed)
[vars]
# Example: API_KEY = "your_api_key"

# KV Namespace binding for production environment
[[kv_namespaces]]
binding = "RESOURCES_KV"
id = "my_id"
preview_id = "my_id"

name = "resourcinator"
compatibility_date = "Latest"
pages_build_output_dir = "./.svelte-kit/cloudflare"

# Environment variables (if needed)
[vars]
# Example: API_KEY = "your_api_key"

# KV Namespace binding for production environment
[[kv_namespaces]]
binding = "RESOURCES_KV"
id = "my_id"
preview_id = "my_id"

also it's wrangler pages dev, not wrangler dev Internet resources and most stuff is just outdated except for the documentation, which is quite good, congrats

Gaming

Programming

I can't get `wrangler dev` to work with kv