Vincent Udén Posts - Answer Overflow

Vincent Udén

Explore posts from servers

•Created by Vincent Udén on 11/9/2023 in #support

`unstable_clientOnly` doesn't solve SSR issues when importing a dependency

I'm running SolidStart and have had some issues throughout with certain deps that do not play well on the server side. Usually this has been resolved using unstable_clientOnly to ignore the dependency on the server side. This time it's not working though. This works fine in my component using npm run dev, but not using npm run build.

const HexColorPicker = unstable_clientOnly(async () => (await import("solid-colorful")).HexColorPicker);

const HexColorPicker = unstable_clientOnly(async () => (await import("solid-colorful")).HexColorPicker);

I have tried

export default defineConfig({
  plugins: [solid({ adapter: vercel({ edge: false })})],
  optimizeDeps: {
    include: [],
    exclude: ["solid-colorful"],
  },
  ssr: {
    noExternal: ["solid-colorful"],
  },
});

export default defineConfig({
  plugins: [solid({ adapter: vercel({ edge: false })})],
  optimizeDeps: {
    include: [],
    exclude: ["solid-colorful"],
  },
  ssr: {
    noExternal: ["solid-colorful"],
  },
});

to no success. The component itself is also wrapped in a unstable_clientOnly so it's content shouldn't even be loaded on the server at all. I can't fathom why npm run build is even trying to go over the file at all. ANY help or pointers would be much appreciated as I have been struggling for hours at this point

2 replies

TTCTheo's Typesafe Cult

•Created by Vincent Udén on 9/27/2023 in #questions

SSR with tRPC (9.x) works for one query but not the other even though they're practically identical

I've got a component where I have two querys, one is usually faster than the other but I want to run both for side effects on the server. I use them like this:

const Gallery = () => {
  const { data: fastImages, refetch: fastRefetch, isLoading, isFetching } = trpc.useQuery(
    ["gallery.getAllS3ThumbnailsFast", { categoryName: "Gallery" }],
    { context: { skipBatch: true }}
  );
  const { data: slowImages, refetch: slowRefetch } = trpc.useQuery(
    ["gallery.getAllS3Thumbnails", { categoryName: "Gallery" }],
    { context: { skipBatch: true }}
  );

const Gallery = () => {
  const { data: fastImages, refetch: fastRefetch, isLoading, isFetching } = trpc.useQuery(
    ["gallery.getAllS3ThumbnailsFast", { categoryName: "Gallery" }],
    { context: { skipBatch: true }}
  );
  const { data: slowImages, refetch: slowRefetch } = trpc.useQuery(
    ["gallery.getAllS3Thumbnails", { categoryName: "Gallery" }],
    { context: { skipBatch: true }}
  );

"gallery.getAllS3Thumbnails" is properly SSRed with the correct headers beting set, but the "gallery.getAllS3ThumbnailsFast" is not. They're pretty much the same on the server except that the faster query skips some fetches to other services. Does anyone have a clue what could be going on?

4 replies

TTCTheo's Typesafe Cult

•Created by Vincent Udén on 9/18/2023 in #questions

Implementing an anonymous "like"-function for my webpage

I'd like for my users to be able to "like" my blog posts as an extra point of feedback for me to consider while writing. This should be done without creating an account as I'd expect no one to invest that much effort into my website. For now I've settled on using some hardware + software characteristics to create an anonymous fingerprint of a users browser in order to make a small attempt at weeding out duplicate likes. Is there any obvious negatives to storing these fingerprints as plain text in my DB? They're not specific enough to identify a user (nowhere near) and I can't store them hashed since I have no username or the likes to search the tables with. This approach eliminates the need for cookies (which I would like to stay away from if possible) and would give me "good enough" protection against refreshing and liking again. Something does still feel a little bad about having the fingerprints just laying around in plain text though. Am I too paranoid?

7 replies

SSolidJS

•Created by Vincent Udén on 8/28/2023 in #support

No Vercel Logs

Hi! I've deployed a solid-start app using Auth.js which I originally generated using create-jd-app to vercel. Trouble is my serverless functions are not working at all /api/auth/session just produces

A server error has occurred

FUNCTION_INVOCATION_FAILED

A server error has occurred

FUNCTION_INVOCATION_FAILED

My reading has led me to believe that the next step is to look at vercel logs, but I'm not getting any runtime logs. Has anyone bumped into anything similar? I'm really out of ideas here.

3 replies

TTCTheo's Typesafe Cult

•Created by Vincent Udén on 8/4/2023 in #questions

"Size" of API routes in NextJS

2 replies

TTCTheo's Typesafe Cult

•Created by Vincent Udén on 8/1/2023 in #questions

Vs Code highlighting newlines

5 replies

TTCTheo's Typesafe Cult

•Created by Vincent Udén on 7/27/2023 in #questions

VS Code Plugin showing gzipped size of imports

I've seen some people on streams (Ryan Carniato among others I'm pretty sure?) use a plugin for VS Code which shows a "commented" gzipped size of imports next to each import in VS Code. Anyone know what it's called?

5 replies

SSolidJS

•Created by Vincent Udén on 7/6/2023 in #support

createResource refetch causes full page refresh

I'm using SolidStart, dabbling for the first time with data fetching using Solid, apologies in advance for any simple misunderstandings. I've got an API route giving me a list of projects which I've put into a resource in the following manner:

/* ... */
const [projects, { refetch: refetchProjects }] = createResource(getProjects);
/* ... */

/* ... */
const [projects, { refetch: refetchProjects }] = createResource(getProjects);
/* ... */

The fetching function itself is as follows

async function getProjects() {
  const response = await fetch("/api/projects", { method: "GET" });
  if (response.ok) {
    return response.json();
  } else {
    return [];
  }
}

async function getProjects() {
  const response = await fetch("/api/projects", { method: "GET" });
  if (response.ok) {
    return response.json();
  } else {
    return [];
  }
}

When manually triggering refetchProjects() in an onClick the entire page flashes white in what seems like a full page reload. Any ideas as to what I'm doing wrong? Are resources the wrong solution?

9 replies

TTCTheo's Typesafe Cult

•Created by Vincent Udén on 5/6/2023 in #questions

Supabase broken DNS

Hi! I just restored an inactive project on Supabase and now I can't connect to the DB anymore. I know what the problem is. The DNS lookup from url to ip address is not working, since I can connect to the database using psql if I use an external ip lookup service and feed it the actual ip of the database. But if I use the url for the DB, it can't resolve the host name. Has anyone had similar problems? Do I just need to wait for the DNS records to propagate? Or are there any better solutions?

2 replies

TTCTheo's Typesafe Cult

•Created by Vincent Udén on 4/10/2023 in #questions

React-Transition-Group

5 replies

TTCTheo's Typesafe Cult

•Created by Vincent Udén on 2/1/2023 in #questions

Neat background pattern images

Has anyone got any good resources for background patterns such as the grid used on tailwinds docs? Im mostly looking for subtle, simple, geometric patterns to use at low opacity on flat/subtle gradient background.

3 replies

TTCTheo's Typesafe Cult

•Created by Vincent Udén on 12/21/2022 in #questions

HookWebpackError during `next build`

2 replies

TTCTheo's Typesafe Cult

•Created by Vincent Udén on 12/19/2022 in #questions

SyntaxError Cannot use import statement outside a module

6 replies

TTCTheo's Typesafe Cult

•Created by Vincent Udén on 11/26/2022 in #questions

UnoCss

I feel like a complete idiot. Im looking to add UnoCss to a fresh ct3a repo. Should I just go fro the CLI version and add it to my build and dev scripts?

20 replies

TTCTheo's Typesafe Cult

•Created by Vincent Udén on 11/24/2022 in #questions

Link to page with tabs

Hi! I've got a page in my ct3a project which has three "tabs" one can open (only one at a time). By default when opening the page, the first tab is open. However I want to redirect a user to the page with a specific tab open. What'd be the best/standard way to do this? Something with dynamic routing? Cookies?

15 replies

TTCTheo's Typesafe Cult

•Created by Vincent Udén on 10/4/2022 in #questions

Standalone CLI in t3 project

Hi! So I wrote a question a while ago about making a little script for interacting with my db through prisma (https://discordapp.com/channels/966627436387266600/1024739607553786011) I was recommended ts-node to run the file, but that doesn't work at all. I think it has something to do with es6 imports/exports but it's really cryptic and I can't find much information about it. The error message looks like this:

PS E:\Github\frazzot-portfolio> npx ts-node .\src\utils\dbUtils.ts
(node:14184) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
E:\Github\frazzot-portfolio\src\utils\dbUtils.ts:3
export {};
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1055:15)
    at Module._compile (node:internal/modules/cjs/loader:1090:27)
    at Module.m._compile (E:\Github\frazzot-portfolio\node_modules\ts-node\src\index.ts:1618:23)
    at Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Object.require.extensions.<computed> [as .ts] (E:\Github\frazzot-portfolio\node_modules\ts-node\src\index.ts:1621:12)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at phase4 (E:\Github\frazzot-portfolio\node_modules\ts-node\src\bin.ts:649:14)

PS E:\Github\frazzot-portfolio> npx ts-node .\src\utils\dbUtils.ts
(node:14184) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
E:\Github\frazzot-portfolio\src\utils\dbUtils.ts:3
export {};
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1055:15)
    at Module._compile (node:internal/modules/cjs/loader:1090:27)
    at Module.m._compile (E:\Github\frazzot-portfolio\node_modules\ts-node\src\index.ts:1618:23)
    at Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Object.require.extensions.<computed> [as .ts] (E:\Github\frazzot-portfolio\node_modules\ts-node\src\index.ts:1621:12)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at phase4 (E:\Github\frazzot-portfolio\node_modules\ts-node\src\bin.ts:649:14)

And the file is simply

console.log("Hello");

export {};

console.log("Hello");

export {};

Has anyone else ran in to problems like this? Any help, pointers or other recommendations for how I could run a .ts file in my t3 project without running the whole web app would be greatly appreciated

20 replies

TTCTheo's Typesafe Cult

•Created by Vincent Udén on 9/28/2022 in #questions

Creating CLI for interacting with prisma database

Hi! I'm looking to write a little script in my create-t3-app which would allow me to easily add an entry to the database. I don't want this exposed in the web app, and I think it's inconvenient to just add a function call which runs once that I then, later delete. Is there any way for me to just create a .ts file which I can run in isolation in the project? Maybe parse some command line arguments and such?

9 replies

Gaming

Programming