API Routes Not Found. Can You Help?

I've created a very simplified example to explain the errors I'm receiving when trying to create an API route.

First, I created an API route in

routes/api/create-payment-intent.ts

routes/api/create-payment-intent.ts

. This route just logs the request body to keep things simple.

"use server";
import { type APIEvent } from "@solidjs/start/server/types";

export async function POST({ request }: APIEvent) {

  console.log(request.body);

}

"use server";
import { type APIEvent } from "@solidjs/start/server/types";

export async function POST({ request }: APIEvent) {

  console.log(request.body);

}

I've also created a page "StripePage" that uses fetch to make and HTTP POST request to the

/api/create-payment-intent

/api/create-payment-intent

endpoint.

import { JSX, createEffect } from "solid-js";
import { Title } from "@solidjs/meta";

export default function StripePage(): JSX.Element {

  createEffect(async () => {

    fetch("/api/create-payment-intent", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ items: [{ id: "xl-tshirt" }] }),
    });
  });

  return (
    <>
      <Title>Stripe Page</Title>
      <div class="container">
        <h1>Stripe Test Page</h1>
      </div>
    </>
  );
}

import { JSX, createEffect } from "solid-js";
import { Title } from "@solidjs/meta";

export default function StripePage(): JSX.Element {

  createEffect(async () => {

    fetch("/api/create-payment-intent", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ items: [{ id: "xl-tshirt" }] }),
    });
  });

  return (
    <>
      <Title>Stripe Page</Title>
      <div class="container">
        <h1>Stripe Test Page</h1>
      </div>
    </>
  );
}

Here are the issues.

1. When I visit "StripePage" I get the following error:

POST http://localhost:3000/api/create-payment-intent 404 (Cannot find any path matching /api/create-payment-intent.)

POST http://localhost:3000/api/create-payment-intent 404 (Cannot find any path matching /api/create-payment-intent.)

.

This is odd because that route does exist.

2. Even though I'm getting a 404 error, I'm still getting a console.log() output. How is that possible if the route cannot be found?
3. If I was using Express,

request.body

request.body

would give me access to the

items

items

I passed in the body. But when I console.log(request.body) I get the following:

ReadableStream { locked: false, state: 'readable', supportsBYOB: false }

ReadableStream { locked: false, state: 'readable', supportsBYOB: false }

That output is not the JSON I passed in the body.

So what am I doing wrong? Any help would be greatly appreciated.

API Routes Not Found. Can You Help?

I've created a very simplified example to explain the errors I'm receiving when trying to create an API route.

First, I created an API route in

routes/api/create-payment-intent.ts

routes/api/create-payment-intent.ts

. This route just logs the request body to keep things simple.

"use server";
import { type APIEvent } from "@solidjs/start/server/types";

export async function POST({ request }: APIEvent) {

  console.log(request.body);

}

"use server";
import { type APIEvent } from "@solidjs/start/server/types";

export async function POST({ request }: APIEvent) {

  console.log(request.body);

}

I've also created a page "StripePage" that uses fetch to make and HTTP POST request to the

/api/create-payment-intent

/api/create-payment-intent

endpoint.

import { JSX, createEffect } from "solid-js";
import { Title } from "@solidjs/meta";

export default function StripePage(): JSX.Element {

  createEffect(async () => {

    fetch("/api/create-payment-intent", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ items: [{ id: "xl-tshirt" }] }),
    });
  });

  return (
    <>
      <Title>Stripe Page</Title>
      <div class="container">
        <h1>Stripe Test Page</h1>
      </div>
    </>
  );
}

import { JSX, createEffect } from "solid-js";
import { Title } from "@solidjs/meta";

export default function StripePage(): JSX.Element {

  createEffect(async () => {

    fetch("/api/create-payment-intent", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ items: [{ id: "xl-tshirt" }] }),
    });
  });

  return (
    <>
      <Title>Stripe Page</Title>
      <div class="container">
        <h1>Stripe Test Page</h1>
      </div>
    </>
  );
}

Here are the issues.

1. When I visit "StripePage" I get the following error:

POST http://localhost:3000/api/create-payment-intent 404 (Cannot find any path matching /api/create-payment-intent.)

POST http://localhost:3000/api/create-payment-intent 404 (Cannot find any path matching /api/create-payment-intent.)

request.body

request.body

would give me access to the

items

items

I passed in the body. But when I console.log(request.body) I get the following:

ReadableStream { locked: false, state: 'readable', supportsBYOB: false }

ReadableStream { locked: false, state: 'readable', supportsBYOB: false }

That output is not the JSON I passed in the body.

So what am I doing wrong? Any help would be greatly appreciated.

API Routes Not Found. Can You Help?

API Routes Not Found. Can You Help?

Similar Threads

Similar Threads

Similar Threads