"use server" confusion

i have this action in a

src/routes/tables.tsx

src/routes/tables.tsx

file.

const schedule_action = action(async (data) => {
  "use server";
  schedule(data.tableId, data.date, data.time);
  console.log("we doin it");
}, "schedule-action");

const schedule_action = action(async (data) => {
  "use server";
  schedule(data.tableId, data.date, data.time);
  console.log("we doin it");
}, "schedule-action");

the

schedule

schedule

function just inserts a new row into sqlite. this will work just fine in this file where the component that has the

<form>

<form>

which consumes it lives. however, if i move this to eg

src/server/tables/actions.ts

src/server/tables/actions.ts

like:

"use server";

import { action } from "@solidjs/router";
import { schedule } from "~/lib/database";

export const schedule_action = action(async (data) => {
  schedule(data.tableId, data.date, data.time);
}, "schedule-action");

"use server";

import { action } from "@solidjs/router";
import { schedule } from "~/lib/database";

export const schedule_action = action(async (data) => {
  schedule(data.tableId, data.date, data.time);
}, "schedule-action");

and import the file from there, vite complains

Module "fs" has been externalized for browser compatibility. Cannot access "fs.access" in client code.

Module "fs" has been externalized for browser compatibility. Cannot access "fs.access" in client code.

etc and my app does not work as expected (doesn't react to clicks).

So I'm wondering how does "use server" exactly work and what are the caveats? why does it not behave as expected in my case?

SolidJS•5mo ago•

2 replies

jalelegenda

"use server" confusion

i have this action in a

src/routes/tables.tsx

src/routes/tables.tsx

file.

const schedule_action = action(async (data) => {
  "use server";
  schedule(data.tableId, data.date, data.time);
  console.log("we doin it");
}, "schedule-action");

const schedule_action = action(async (data) => {
  "use server";
  schedule(data.tableId, data.date, data.time);
  console.log("we doin it");
}, "schedule-action");

the

schedule

schedule

function just inserts a new row into sqlite. this will work just fine in this file where the component that has the

<form>

<form>

which consumes it lives. however, if i move this to eg

src/server/tables/actions.ts

src/server/tables/actions.ts

like:

"use server";

import { action } from "@solidjs/router";
import { schedule } from "~/lib/database";

export const schedule_action = action(async (data) => {
  schedule(data.tableId, data.date, data.time);
}, "schedule-action");

"use server";

import { action } from "@solidjs/router";
import { schedule } from "~/lib/database";

export const schedule_action = action(async (data) => {
  schedule(data.tableId, data.date, data.time);
}, "schedule-action");

and import the file from there, vite complains

Module "fs" has been externalized for browser compatibility. Cannot access "fs.access" in client code.

Module "fs" has been externalized for browser compatibility. Cannot access "fs.access" in client code.

etc and my app does not work as expected (doesn't react to clicks).

So I'm wondering how does "use server" exactly work and what are the caveats? why does it not behave as expected in my case?

"use server" confusion

Similar Threads

"use server" confusion

Similar Threads

Similar Threads

Similar Threads