S
SolidJS•4w ago
Liquido

how can I see console.log output in Solid Start server actions?

I have an action like this: 
const myAction = action(async function myAction(formData: FormData) {
  console.log(formData.get("image"))
})

function CreateItem() {
  <form action={myAction} method="post">
    <input type="file" name="image" />
  </form>
}
const myAction = action(async function myAction(formData: FormData) {
  console.log(formData.get("image"))
})

function CreateItem() {
  <form action={myAction} method="post">
    <input type="file" name="image" />
  </form>
}
The console.log does not print anywhere for the action. Not in the dev server, nor in browser console. Is there a way to output items from actions?
3 Replies
peerreynders
peerreynders•4w ago
// file: src/routes/index.tsx
import { action } from '@solidjs/router';
import { Title } from '@solidjs/meta';

const myAction = action(async (formData: FormData) => {
    // As is: appears in browser's console
    // Remove comment before `use server`: appears in the server console 
    // 'use server'
  console.log('Action:', formData.get('id'));
}, 'my-action');

export default function Home() {
  return (
    <main style="text-align: left">
      <Title>SolidStart - Home</Title>
      <form action={myAction} method="post">
        <input type="hidden" name="id" value="Hello" />
        <button type="submit">Submit</button>
      </form>
    </main>
  );
}
// file: src/routes/index.tsx
import { action } from '@solidjs/router';
import { Title } from '@solidjs/meta';

const myAction = action(async (formData: FormData) => {
    // As is: appears in browser's console
    // Remove comment before `use server`: appears in the server console 
    // 'use server'
  console.log('Action:', formData.get('id'));
}, 'my-action');

export default function Home() {
  return (
    <main style="text-align: left">
      <Title>SolidStart - Home</Title>
      <form action={myAction} method="post">
        <input type="hidden" name="id" value="Hello" />
        <button type="submit">Submit</button>
      </form>
    </main>
  );
}
Somehow I don't think that is your real question.
Liquido
LiquidoOP•4w ago
my action is running in the server. If I put console.log in a separate server module and import it, everything works but when I put console.log in the client-side component with server action inside, the console.log does not print anything
peerreynders
peerreynders•4w ago
In your OP the action would run client-side (no use server). However there is nothing in the <CreateItem /> that would trigger a submit which is necessary to run the action. Also your action() is missing the second parameter, the name of the action (e.g. my-action). As a proof-of-concept this seems to work: 
// file: src/routes/index.tsx
import { action } from '@solidjs/router';
import { Title } from '@solidjs/meta';

import { saveFile } from '../save-file.js';

const myAction = action(async (formData: FormData) => {
  'use server';
  const file = formData.get('image') as File;
  saveFile(file);
}, 'my-action');

export default function Home() {
  return (
    <main style="text-align: left">
      <Title>SolidStart - Home</Title>
      <form action={myAction} method="post" enctype="multipart/form-data">
        <input type="file" name="image" />
        <button type="submit">Submit</button>
      </form>
    </main>
  );
}
// file: src/routes/index.tsx
import { action } from '@solidjs/router';
import { Title } from '@solidjs/meta';

import { saveFile } from '../save-file.js';

const myAction = action(async (formData: FormData) => {
  'use server';
  const file = formData.get('image') as File;
  saveFile(file);
}, 'my-action');

export default function Home() {
  return (
    <main style="text-align: left">
      <Title>SolidStart - Home</Title>
      <form action={myAction} method="post" enctype="multipart/form-data">
        <input type="file" name="image" />
        <button type="submit">Submit</button>
      </form>
    </main>
  );
}
// file: src/save-file.ts
import { open } from 'node:fs/promises';

export async function saveFile(file: File) {
  const path = `${process.cwd()}/${file.name}`;
  const a = await file.arrayBuffer();
  const f = await open(path, 'w');
  await f.writeFile(Buffer.from(a));
  await f.close();
}
// file: src/save-file.ts
import { open } from 'node:fs/promises';

export async function saveFile(file: File) {
  const path = `${process.cwd()}/${file.name}`;
  const a = await file.arrayBuffer();
  const f = await open(path, 'w');
  await f.writeFile(Buffer.from(a));
  await f.close();
}

Did you find this page helpful?