Cyber Grandma Posts - Answer Overflow

Cyber Grandma

Explore posts from servers

SSolidJS SIASapphire - Imagine a framework DTDrizzle Team

•Created by Cyber Grandma on 11/20/2024 in #support

SSR failed to import "drizzle-orm/bun-sqlite"

Hi, here's the error I get

1:20:01 PM [vite] Error when evaluating SSR module /src/db/index.ts: failed to import "drizzle-orm/bun-sqlite"
|- Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. Received protocol 'bun:'
 at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:228:11)
    at defaultLoad (node:internal/modules/esm/load:110:3)
    at ModuleLoader.load (node:internal/modules/esm/loader:567:13)
    at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:442:56)
    at new ModuleJob (node:internal/modules/esm/module_job:76:27)
    at #createModuleJob (node:internal/modules/esm/loader:455:17)
    at ModuleLoader.getJobFromResolveResult (node:internal/modules/esm/loader:266:34)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:247:17)

1:20:01 PM [vite] Error when evaluating SSR module /src/db/index.ts: failed to import "drizzle-orm/bun-sqlite"
|- Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. Received protocol 'bun:'
 at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:228:11)
    at defaultLoad (node:internal/modules/esm/load:110:3)
    at ModuleLoader.load (node:internal/modules/esm/loader:567:13)
    at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:442:56)
    at new ModuleJob (node:internal/modules/esm/module_job:76:27)
    at #createModuleJob (node:internal/modules/esm/loader:455:17)
    at ModuleLoader.getJobFromResolveResult (node:internal/modules/esm/loader:266:34)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:247:17)

I am not sure if I should post this here or in Drizzle server but it seems more like an issue with vite. I've used drizzle successfully in other solid projects so I don't know what is specific here.

2 replies

SSolidJS

•Created by Cyber Grandma on 11/12/2024 in #support

Submission not reactive in JSX ?

Hi, I'm making a login form as such:

export default function LoginPage() {
  const login = action(async (formData: FormData) => {
      const username = String(formData.get('username'))
      const password = String(formData.get('password'))
  
      console.log('login', username, password)
      await sleep(1000)
      return true
  }, 'login')
  
  const submission = useSubmission(login)
  const disabled = () => submission.pending === true;
  
  createEffect(() => {
      console.log('Logging in: ', disabled())
  })

return (
  <main class="w-full min-h-screen flex flex-col justify-center items-center gap-12">
    <h1 class="text-3xl">Admin Login</h1>
    <p>disabled: {disabled() ? 'yes' : 'no'}</p>
    <form action={login} method='post' class="flex-col flex gap-4">
    ....
    </form>
  </main>
  );
};

export default function LoginPage() {
  const login = action(async (formData: FormData) => {
      const username = String(formData.get('username'))
      const password = String(formData.get('password'))
  
      console.log('login', username, password)
      await sleep(1000)
      return true
  }, 'login')
  
  const submission = useSubmission(login)
  const disabled = () => submission.pending === true;
  
  createEffect(() => {
      console.log('Logging in: ', disabled())
  })

return (
  <main class="w-full min-h-screen flex flex-col justify-center items-center gap-12">
    <h1 class="text-3xl">Admin Login</h1>
    <p>disabled: {disabled() ? 'yes' : 'no'}</p>
    <form action={login} method='post' class="flex-col flex gap-4">
    ....
    </form>
  </main>
  );
};

As usual I want to disable the login button while the login action is running. I created the disabled signal for that that just checks if the submission is pending. But for some reason it doesn't update the page but still triggers the createEffect. Am I missing something ?

3 replies

SSolidJS

•Created by Cyber Grandma on 11/5/2024 in #support

SolidStart layout shifts using createAsync

Hi, I found out that I experience layout shifts whenever a createAsync is re-triggered. For example here:

export default function ActivitySubmissions() {
  const [params, setParams] = createStore<ActivitySubmissionsParams>(
    structuredClone(defaultParams),
  );

  const data = createAsync(() => getActivitySubmissions({ ...params }));

  const pagination = () => data()?.pagination;
  const submissions = () => data()?.submissions;

  const setPage = (page: number) => {
    setParams('page', page);
  };

  return (
    <main class="mx-auto flex flex-col gap-8 py-8 sm:w-11/12">
      <TopBar />
      <div class="rounded-md bg-red-300 shadow-md min-h-[1000px]">
        {/* <Suspense fallback={<div>Loading...</div>}>
          <ActivitySubmissionsTable submissions={submissions()} />
        </Suspense> */}
      </div>

      <div class="flex justify-center ">
        <Pagination ...>
            <!-- Omitted -->
        </Pagination>
      </div>
    </main>
  );
}

export default function ActivitySubmissions() {
  const [params, setParams] = createStore<ActivitySubmissionsParams>(
    structuredClone(defaultParams),
  );

  const data = createAsync(() => getActivitySubmissions({ ...params }));

  const pagination = () => data()?.pagination;
  const submissions = () => data()?.submissions;

  const setPage = (page: number) => {
    setParams('page', page);
  };

  return (
    <main class="mx-auto flex flex-col gap-8 py-8 sm:w-11/12">
      <TopBar />
      <div class="rounded-md bg-red-300 shadow-md min-h-[1000px]">
        {/* <Suspense fallback={<div>Loading...</div>}>
          <ActivitySubmissionsTable submissions={submissions()} />
        </Suspense> */}
      </div>

      <div class="flex justify-center ">
        <Pagination ...>
            <!-- Omitted -->
        </Pagination>
      </div>
    </main>
  );
}

I have a "middle div" colored in red here. Whenever I change one of the params (such as page or search filters), the createAsync is retriggered. But while it does that the middle part (in red) disappears for a split second and the page is re-scrolled back up. This makes using the pagination very obnoxious. Has anyone ever experienced that ? I don't understand why in this case it is needed for Solid to re-render the whole div each time.

31 replies

SSolidJS

•Created by Cyber Grandma on 11/2/2024 in #support

Re: Reset a store to its initial value, doesn't react

Hi, I'm trying to reset a store to its initial value, but when I do so the state doesn't react. The only way I can make it to work is to set each property of the store manually.

// A component with a button to reset the filters
function ThereAreNoEvents(props: ThereAreNoEventsProps) {
  return (
    <div>
      <p>There is nothing here :(</p>
      <button
        class="btn btn-primary btn-sm mt-4"
        onClick={() => {
          // Works, but I need to do it for every property
          props.setParams('textSearch', '');

          // Does not work
          props.setParams(structuredClone(defaultSearchParams));
        }}
      >
        Clear filters
      </button>
    </div>
  );
}

export default function EventGroups() {
  const [params, setParams] = createStore<SearchParams>(
    structuredClone(defaultSearchParams),
  );

  const eventGroups = createAsync(
    () => getEventGroups({ ...params }) as Promise<EventGroupWithEvents[]>,
  );

  return (.....)
}

// A component with a button to reset the filters
function ThereAreNoEvents(props: ThereAreNoEventsProps) {
  return (
    <div>
      <p>There is nothing here :(</p>
      <button
        class="btn btn-primary btn-sm mt-4"
        onClick={() => {
          // Works, but I need to do it for every property
          props.setParams('textSearch', '');

          // Does not work
          props.setParams(structuredClone(defaultSearchParams));
        }}
      >
        Clear filters
      </button>
    </div>
  );
}

export default function EventGroups() {
  const [params, setParams] = createStore<SearchParams>(
    structuredClone(defaultSearchParams),
  );

  const eventGroups = createAsync(
    () => getEventGroups({ ...params }) as Promise<EventGroupWithEvents[]>,
  );

  return (.....)
}

3 replies

SSolidJS

•Created by Cyber Grandma on 2/1/2024 in #support

vite:css and postcss creating errors on SSR ?

10:56:50 PM [vite] Internal server error: Attempted to assign to readonly property.
  Plugin: vite:css
  File: /workspaces/motu/node_modules/@solidjs/start/shared/dev-overlay/styles.css
      at <anonymous> (/workspaces/motu/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:38958:18)
      at processTicksAndRejections (:13:78)
38953 |     }
38954 |     catch (e) {
38955 |         e.message = `[postcss] ${e.message}`;
38956 |         e.code = code;
38957 |         e.loc = {
38958 |             column: e.column,
                         ^
TypeError: Attempted to assign to readonly property.

10:56:50 PM [vite] Internal server error: Attempted to assign to readonly property.
  Plugin: vite:css
  File: /workspaces/motu/node_modules/@solidjs/start/shared/dev-overlay/styles.css
      at <anonymous> (/workspaces/motu/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:38958:18)
      at processTicksAndRejections (:13:78)
38953 |     }
38954 |     catch (e) {
38955 |         e.message = `[postcss] ${e.message}`;
38956 |         e.code = code;
38957 |         e.loc = {
38958 |             column: e.column,
                         ^
TypeError: Attempted to assign to readonly property.

Hi, I'm trying to start my solid-start project on another compute but I can't get it to work. I get this weird postcss error during SSR. And I'm using Devcontainers to reproduce my development environment, so I'm even more dazzled that it works on one compute and not on the other lol. Anyone has ever seen this error ?

2 replies

SSolidJS

•Created by Cyber Grandma on 1/19/2024 in #support

For is not Reactive ?

Hi, I've made this filter list using For:

<ul
  tabIndex={0}
  class={`dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52`}
>
  <For each={filters()}>
    {(f) => (
      <li>
        <div
          onClick={() => toggleFilter(f.id)}
          class="flex justify-between"
        >
          <p>{f.label}</p>
          {f.selected ? <FaSolidCheck size={12} /> : null}
        </div>
      </li>
    )}
  </For>
</ul>

<ul
  tabIndex={0}
  class={`dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52`}
>
  <For each={filters()}>
    {(f) => (
      <li>
        <div
          onClick={() => toggleFilter(f.id)}
          class="flex justify-between"
        >
          <p>{f.label}</p>
          {f.selected ? <FaSolidCheck size={12} /> : null}
        </div>
      </li>
    )}
  </For>
</ul>

The signal looks like this:

  const [filters, setFilters] = createSignal([
    { id: 'active', label: 'Active', selected: true },
    { id: 'terminated', label: 'Terminated', selected: false },
  ]);

  const toggleFilter = (id: string) => {
    console.log('before', filters()[0].selected);

    setFilters(
      filters().map((f) => {
        if (f.id === id) {
          f.selected = !f.selected;
        }

        return f;
      }),
    );

    console.log('after', filters()[0].selected);
  };

  const [filters, setFilters] = createSignal([
    { id: 'active', label: 'Active', selected: true },
    { id: 'terminated', label: 'Terminated', selected: false },
  ]);

  const toggleFilter = (id: string) => {
    console.log('before', filters()[0].selected);

    setFilters(
      filters().map((f) => {
        if (f.id === id) {
          f.selected = !f.selected;
        }

        return f;
      }),
    );

    console.log('after', filters()[0].selected);
  };

The console logs show that the value are changing, but the elements are not re-rendering. Am I missing something ?

17 replies

SSolidJS

•Created by Cyber Grandma on 1/17/2024 in #support

onClick function not rendered in the DOM ?

Hi, I'm trying to make a togglable filter list. I use the For element to loop over my list of filters and create a button for each.

<For each={filters()}>
  {(f) => (
    <li>
      <div
        onClick={() => console.log('click')}
        class="flex justify-between"
      >
        <p>{f.label}</p>
        {f.selected ? <FaSolidCheck size={12} /> : null}
      </div>
    </li>
  )}
</For>

<For each={filters()}>
  {(f) => (
    <li>
      <div
        onClick={() => console.log('click')}
        class="flex justify-between"
      >
        <p>{f.label}</p>
        {f.selected ? <FaSolidCheck size={12} /> : null}
      </div>
    </li>
  )}
</For>

The issue I have is that the 'onClick' doesn't run and doesn't appear in the HTML. Here is what I get in the inspector:

<li data-hk="0-0-0-0.....">
  <div class="flex justify-between">
    <p>Active</p><!--$-->
    <svg data-hk="0-0-0-0-0-0....." color="currentColor" ......>
      <path d="M......">
      </path>
    </svg><!--/-->
  </div>
</li>

<li data-hk="0-0-0-0.....">
  <div class="flex justify-between">
    <p>Active</p><!--$-->
    <svg data-hk="0-0-0-0-0-0....." color="currentColor" ......>
      <path d="M......">
      </path>
    </svg><!--/-->
  </div>
</li>

I am new to solid, I'm sorry if this is ends up being a really dumb issue on my part. But currently I'm scratching my head very hard about this onClick

7 replies

Gaming

Programming