Remix action always returns HMTL

Extensions
1

I have a defined route in remix called import-locaitons with the following at the top

// Minimal test action for debugging
export async function action({ request }: ActionFunctionArgs) {
console.log(“TEST ACTION HIT”);
return json({ test: true, message: “This is a test JSON response from the action.” });
}

It also has

export default function ImportLocationsPage()

When I land on the page it renders but when I send a post request from a form to itself using post the action loads but returns html not json.

I expect it to be json?

Am i doing something completely wrong?

Cheers Dan

2

Hi,

The result depend on the request method type:

export const action = async ({ request })  => {
  let response = json([]);

  if (request.method === 'POST') {
    const data = await new Response(request.body).json();

    // POST logic with received data

    response = new Response("OK", { status: 200 });;
  }

  return response;
}
3

Hi @Dchar,

My understanding is if I send a post request to import-locations.tsx then the action is triggered and I return json.

When debugging I can see the output console.log(“TEST ACTION HIT”);

But the response in the network tab has all the html that is generated by the other function. export default function ImportLocationsPage()

My file has both json response for post requests and the normal response for building the page.

The output of this return json({ test: true, message: “This is a test JSON response from the action.” }); is never returned even though the console log before it is triggered.

The network tab always returns the html from the default function.

I did come up with a workaround and just created a file that only had an action in it and that has worked.

The issue is if I have both an action and a default function that returns markup.

Hope this makes sense.

4

Hey @danharper It looks like you already figured this out, but your workaround is totally valid Remix. Check out resource routes for more info!