TypeError: node.component is not a function

[happysalada]

Describe the bug

when developping, no warning or errors are shown. However upon deploying to cloudflare, and accessing the homepage, the TypeError: node.component is not a function. Since this happens on production, I don't have a stacktrace unfortunately.

Reproduction

here is the repo for reproduction https://github.com/happysalada/sweif on local development, no error or warning, but when deploying to cloudflare, the logs will show the error when trying to access the homepage. deployed to https://sweif.pages.dev/

Logs

the browser logs show just a 500 error.
The backend log just shows what I've pasted in the title

System Info

on local I have

System:
    OS: macOS 12.6.6
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Memory: 123.45 MB / 8.00 GB
    Shell: 0.80.0 - /Users/raphael/.nix-profile/bin/nu
  Binaries:
    Node: 20.3.0 - /nix/store/fvz5l7cygl7x9iq989sq8rs0v8zs44qa-nodejs-20.3.0/bin/node
    npm: 9.6.7 - /nix/store/fvz5l7cygl7x9iq989sq8rs0v8zs44qa-nodejs-20.3.0/bin/npm
  Browsers:
    Brave Browser: 111.1.49.120
    Firefox: 112.0.2
    Safari: 16.5
  npmPackages:
    @sveltejs/adapter-cloudflare: ^2.3.0 => 2.3.0
    @sveltejs/kit: ^1.20.2 => 1.20.2
    svelte: ^3.59.1 => 3.59.1
    vite: ^4.3.9 => 4.3.9

on cloudflare, I'm deploying with node LTS of 18.16.0.

Severity

blocking an upgrade

Additional Information

I've looked at similar past issues where the error was the same, and unfortunately they all don't apply. I'm happy to try anything, if anyone has any ideas.

[Conduitry]

As indicated in the issue template, please provide a minimal repro, not a link to your entire project.

[happysalada]

I've got a minimum repro. The problem seems to be when trying to import an action from a ts file. https://github.com/happysalada/sweif/blob/1e2837c7f91cdfebeff166b1dedcf028626d00d1/src/routes/%2Bpage.server.ts

import type { PageServerLoad, Actions } from './$types';
import { contactSchema, createContact } from '$lib/contact';
import { superValidate } from "sveltekit-superforms/server"

export const load = (async ({ fetch }) => {

  const contactForm = await superValidate(contactSchema, { id: "contactForm" });

  return {
    contactForm
  };
}) satisfies PageServerLoad;

export const actions = {
  createContact,
} satisfies Actions;

this doesn't fail on dev, but fails hard on production deployment.

here is the content of the contact.ts.

import type { Action, Request, Platform } from './$types';
import { z } from 'zod';
import { fail, error } from "@sveltejs/kit";
import { superValidate } from "sveltekit-superforms/server"
import { adminNotification, endUserNotification, EndUserEmailNotification } from "$lib/notifications"
// import { parsePhoneNumber } from 'awesome-phonenumber'

export const contactSchema = z.object({
  firstName: z.string().min(1),
  lastName: z.string().min(1),
  email: z.string().email(),
  // phone: z.string().min(2).refine(phone => parsePhoneNumber(phone).valid),
  phone: z.string().min(6),
  message: z.string(),
})

export const createContact: Action = async ({ request, platform, fetch }: {request: Request, platform: Platform, fetch: any}) => {
  const form = await superValidate(request, contactSchema, {
    id: "contactForm"
  });

  if (!form.valid) {
    return fail(400, { form })
  }

  try {
    await adminNotification({
      topic: platform.env.NTFY_CONTACT_TOPIC,
      title: `New contact request`,
      tags: 'loudspeaker',
      message: `from: ${form.data.firstName} ${form.data.lastName} ${form.data.phone} ${form.data.email}
message: ${form.data.message}`,
      platform,
      fetch
    })
     await endUserNotification({
      apiKey: platform?.env?.ELASTIC_EMAIL_API_KEY || '',
      type: EndUserEmailNotification.ContactForm,
      name: form.data.firstName,
      email: form.data.email,
      fetch,
      options: {name: form.data.firstName},
    })
  } catch (e) {
    console.log(e);
    return error(500, "An error occured, please try again later");
  }
}

the latest commit in the repo, just moves the content of the contact.ts into the page.server.ts and the deployment works. here is the commit that fixes the error https://github.com/happysalada/sweif/commit/02f0a5cf135e29f946e1f0e27d6d295be0c7c21b

I'm guessing that the ./$types import is problematic ? some message in dev, would be amazing. And a better message in prod would be great too. I'm not sure though why this fails in prod and not on dev.

[happysalada]

I have a case where I need to have some action and schema in two different server files, how would I put it in a ts file inside lib then ? (just wondering).

[ghostdevv]

The only times I personally have seen "node.component is not a function" is when there is a +page.server.ts or +page.ts file without a +page.svelte

See: #8270 #7392

If adding any missing +page.svelte files doesn't solve your problem we still need a minimal reproduction, i.e. a separate repository with the minimum amount of code required to recreate the issue.

[happysalada]

@ghostdevv how about the following repo https://github.com/happysalada/sweif/tree/master/src/routes there is a single route (just the main route), with a +page.svelte and a +page.server.ts (and also a +layout.svelte). on dev, no error shows, however, the deployed version at https://sweif.pages.dev is giving the 500 with the node.component is not a function error. let me know if you need anything more.

[ghostdevv]

Your demo url https://sweif.pages.dev/ sometimes has a 500 and sometimes loads fine, I assume something you have running in your app is causing this error - which is why we would need a minimal reproduction (a fresh npm init svelte).

[happysalada]

I've found the problem. I import { Upload } from "tus-js-client" which is supposed to be run on the client side in a ts file. This caused this weird error. Hopefully if someone runs in the same error, this helps them in the future.