Actions / SSR not working with Cloudflare Pages.

[MilyMilo]

Hi there, recently I've deployed a svelte-kit app to cloudflare pages, however I'm facing an issue with a contact route.

It uses actions to accept a post form submission and send an e-mail to my ticketing software. The server side code looks like this:

// /src/routes/contact/+page.server.ts

export const actions = {
	default: async ({ fetch, request }) => {
		const data = await request.formData();
	 	
                 // fetch POST request to recaptcha to determine score

		if (success && score >= 0.4) {
			// send an e-mail to ticketing software with mailjet
			return { success: true };
		}

		return { success: false };
	}
} satisfies Actions;

Then on the front-end it I'm using the results like this:

// /src/routes/contact/+page.svelte

<script lang="ts">
	import type { ActionData } from './$types';
        // some imports, some variables
	export let form: ActionData | null = null;
</script>

<!-- other markup --> 

{#if form && form.success}
    <!-- success alert -->
{:else if form && !form.success}
    <!-- error alert --> 
{/if}

It works perfectly in the dev environment - with both yarn dev and yarn build && yarn preview. However I'm getting errors when deployed on cloudflare:

1. I cannot access the page with SSR - getting on the main page, and navigating via the contact link works fine, however if I refresh the page when on /contact I'm getting an internal server error. This is the error message from wrangler:

  (error) TypeError: node.component is not a function
    at bundledWorker-0.47488562317526006.mjs:8995:69
    at Array.map (<anonymous>)
    at render_response (bundledWorker-0.47488562317526006.mjs:8995:46)
    at render_page (bundledWorker-0.47488562317526006.mjs:9801:18)
    at async resolve (bundledWorker-0.47488562317526006.mjs:10327:22)
    at async respond (bundledWorker-0.47488562317526006.mjs:10223:22)
    at async Object.fetch (bundledWorker-0.47488562317526006.mjs:10554:13)

2. I cannot submit the form, when it's actually rendered with CSR. Clicking the send button yields this response:

405 POST method not allowed. No actions exist for this page

I'm honestly clueless - I've tried searching and found this stackoverflow question on node.component is not a function - however I already have a top level +layout.svelte with a <slot /> in it, and this is not a nested route without a corresponding +page.svelte.

It's like if my /src/routes/contact/+page.server.ts is missing, however there are no build errors and I don't have a way to validate if it's uploaded correctly.

This is my svelte.config.js:

import adapter from '@sveltejs/adapter-cloudflare';
import { vitePreprocess } from '@sveltejs/kit/vite';
import { mdsvex } from 'mdsvex';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	extensions: ['.svelte', '.md'],

	preprocess: [
		vitePreprocess(),
		mdsvex({
			extensions: ['.md']
		})
	],

	kit: {
		adapter: adapter({
			routes: {
				include: ['/*'],
				exclude: ['<all>']
			}
		}),
	}
};

export default config;

This is my only action in this project. I have some other server-side only endpoints - which work well. Same with other page-loads fetching data.

[MilyMilo]

The logic in my actions doesn't matter. Even just returning return { success: true }; has the same effect.

[MilyMilo]

This seems to be specific to cloudflare-adapter / cloudflare pages. The site works with netlify.

[eltigerchino]

Are you able to share a minimal reproduction repository? I suspect the issue is due to importing an incompatible library but it's difficult to confirm.

Also note that running locally with npm run preview uses vite to serve the build instead of how it would actually run when uploaded to the chosen platform.

[MilyMilo]

Hi @s3812497 - thanks for the pointer. In fact it's because of mailjet - which is odd, because as far as I know it doesn't use any dependencies which wouldn't work on cloudflare pages(it's also a client side library).

Please take a look if you'd like - https://github.com/MilyMilo/cf-pages-issues/blob/main/src/routes/contact/%2Bpage.server.ts

I'm fine with certain libraries not working with pages - that's to be expected, however there should be a warning, do you think there's a way to better detect / catch this in the cloudflare-adapter? Or perhaps this is an issue with the adapter not with pages, as mentioned this setup works on netlify - so perhaps this is something that can be fixed.

I'll try to test mailjet alone with vanilla functions, without svelte kit - to check if this is specific to the adapter or just pages in general.

[eltigerchino]

It seems node-mailjet would be incompatible with cloudflare workers. One of its dependencies is axios, which is definitely incompatible with the cf workers.

Fortunately, it's possible to access the API without the library, albeit a bit more work, but this makes it platform agnostic. The example below uses a the fetch API.
https://github.com/bozdoz/mailjet-cloudflare-worker/blob/master/src/sendMail.js

I'm fine with certain libraries not working with pages - that's to be expected, however there should be a warning, do you think there's a way to better detect / catch this in the cloudflare-adapter

I'm not sure how to implement this myself, but would love to see one as I've had the same issue before. There's also currently no easy way to know if a library works on Cloudflare or not. I personally look for explicit mentions of compatibility in the library readme or ensure it has 0 dependencies.

[MilyMilo]

Sure - I've just worked around this with hitting the API directly with fetch myself, also I was unaware that axios wasn't supported.

Thank you for your help! Looking forward to seeing Cloudflare Pages improve, it's got a nice advantage over netlify as I already use cloudflare for most of my projects... but maybe let's get node 18 first lol.

[MilyMilo]

As mentioned by @s3812497 - if you're hitting similar errors on cloudflare-pages only, double check your dependencies for compatibility with cloudflare workers.

[sachinsancheti1]

Hi , I faced a similar issue with actions on cloudflare. Couldn't find any helpful errors showing up anywhere. I found this thread and then figured out I should get rid of actions and use cloudflare workers instead. My sveltekit application needed an action to airtable and thankfully I found a very good tutorial on the cloudflare website to implement a suitable cloudflare worker.

Thanks to this page I found a way.