JulieCezar Posts - Answer Overflow

Topics

JulieCezar

Explore posts from servers

TTCTheo's Typesafe Cult DTDrizzle Team

•Created by JulieCezar on 11/19/2024 in #help

drizzle-kit generate throws SyntaxError: Cannot use import statement outside a module

I have been using drizzle alongside React Native, and everything worked great. Unexpectedly drizzle-kit generate stopped working - I built my app and after that it started throwing... It throws with the following error:

Z:\Projects\React Native Test\project_1\node_modules\react-native\index.js:15
import typeof ActionSheetIOS from './Libraries/ActionSheetIOS/ActionSheetIOS';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1153:20)
    at Module._compile (node:internal/modules/cjs/loader:1205:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at newLoader (Z:\Projects\React Native Test\project_1\node_modules\drizzle-kit\bin.cjs:15044:13)
    at Object.newLoader (Z:\Projects\React Native Test\project_1\node_modules\drizzle-kit\bin.cjs:15044:13)
    at extensions..js (Z:\Projects\React Native Test\project_1\node_modules\drizzle-kit\bin.cjs:17572:28)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Module.require (node:internal/modules/cjs/loader:1115:19)

Z:\Projects\React Native Test\project_1\node_modules\react-native\index.js:15
import typeof ActionSheetIOS from './Libraries/ActionSheetIOS/ActionSheetIOS';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1153:20)
    at Module._compile (node:internal/modules/cjs/loader:1205:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at newLoader (Z:\Projects\React Native Test\project_1\node_modules\drizzle-kit\bin.cjs:15044:13)
    at Object.newLoader (Z:\Projects\React Native Test\project_1\node_modules\drizzle-kit\bin.cjs:15044:13)
    at extensions..js (Z:\Projects\React Native Test\project_1\node_modules\drizzle-kit\bin.cjs:17572:28)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Module.require (node:internal/modules/cjs/loader:1115:19)

I tried deleting node_modules/, .expo/ package-lock and restarting everything, checked if all versions were up to date... with no luck.... I can't figure out why it would throw an error for code, from another library, where it does not even get called... Before I start my project from scratch again, anyone had an issue similar to this? 😅

1 replies

TTCTheo's Typesafe Cult

•Created by JulieCezar on 9/11/2024 in #questions

Is it possible to revalidate path after a useMutation call?

No description

3 replies

TTCTheo's Typesafe Cult

•Created by JulieCezar on 8/30/2024 in #questions

App crashes when TRPC error is thrown on the server

I've found an interesting situation while using TRPc with the T3 template on the server. If the Authentication middleware for the TRPC procedures throws an UNAUTHORIZED error if calling it on the server:

import { api } from "~/trpc/server";

export default async function ProjectPaged({ params }: {
  params: { projectId: string };
}) {
  const project = await api.project.getProject({ projectId: params.projectId });

  return (
    <>
      <div>My Post: {params.projectId}</div>
    </>
  );
}

import { api } from "~/trpc/server";

export default async function ProjectPaged({ params }: {
  params: { projectId: string };
}) {
  const project = await api.project.getProject({ projectId: params.projectId });

  return (
    <>
      <div>My Post: {params.projectId}</div>
    </>
  );
}

It throws a global error. I would expect this to return an actual error or be able to handle it somehow, but instead it throws a global error. In development mode it just crashes

4 replies

TTCTheo's Typesafe Cult

•Created by JulieCezar on 7/30/2024 in #questions

Why does THeo hate on DigitalOcean?

I couldn't not notice in Theo's video about the StackOverflow survey mentioning that people should stop using DigitalOcean, or at least not learn on it. Anyone have any more details about this, or things he said? Because I've found DigitalOcean to be quite cheaper even if they do not have all the possible services like AWS does.

2 replies

TTCTheo's Typesafe Cult

•Created by JulieCezar on 7/12/2024 in #questions

How to implement a "local first" Mobile app storage

I'm trying to learn more about React Native and wanted to create a small habit tracking app. While the details are not that important for this question, one thing that I want to ensure is a local experience even when internet is not available, however all data should be saved in a DB as well. Also, you can have Habits for multiple people, meaning 2 people can edit the same habit while being on/offline. Basically, I would need a way to sync the phone's local storage with my DB. However, while thinking about it I found some gotchas that I don't have a happy solution for. 1. First of all, how does it work. E.g. when the user adds a habit, is it firstly saved locally then synced. Is it saved to the DB and locally at the same time if there is a internet connection? Or something else entirely? 2. Since multiple people can edit the same thing while offline, what happens when they get back online? Does one override the other? Do they merge? - probably something I have to decide myself, but I'm still unsure of the implementation 3. Do I need Real-time data if someone can edit a Habit I'm currently browsing? 4. there is probably more I can't think of but I'm open for suggestions

14 replies

TTCTheo's Typesafe Cult

•Created by JulieCezar on 4/30/2024 in #questions

Is anyone actually using the Effect library in production?

I've stumbled across the Effect (https://effect.website) library which promises "TypeScript for production"... Although a lot of it's features seem very enticing I have some hardships actually using it in my projects... Plus, the way some people shill this product, makes me think it's kinda sus... So... Is anyone using Effect? Are you satisfied? Do you see any cons? Etc.

24 replies

TTCTheo's Typesafe Cult

•Created by JulieCezar on 4/10/2024 in #questions

How does UploadThing onClientUploadComplete work?

No description

2 replies

TTCTheo's Typesafe Cult

•Created by JulieCezar on 3/8/2024 in #questions

Railway approx. pricing for a side project DB

Can anyone give me an estimate for how much a MySQL BD on Railway would cost for a smaller side project with not much traffic? In other words would the 5€ one be enough for that?

2 replies

TTCTheo's Typesafe Cult

•Created by JulieCezar on 1/28/2024 in #questions

Autoanimate throwing errors with T3 eslint config?

No description

4 replies

TTCTheo's Typesafe Cult

•Created by JulieCezar on 1/26/2024 in #questions

Relations using Drizzle and Planetscale

I'm trying to start using Drizzle with Planetscale for my new project, but I have some doubts regarding relations... I know that Planetscale doesn't allow Foreign key constraints on the DB, meaning you need an application level constraint. For example, from the starter template for T3

export const posts = createTable(
  "post",
  {
    id: bigint("id", { mode: "number" }).primaryKey().autoincrement(),
    createdById: varchar("createdById", { length: 255 }).notNull(),
    ...
  },
  (example) => ({
    createdByIdIdx: index("createdById_idx").on(example.createdById),
  }),
);

export const users = createTable("user", {
  id: varchar("id", { length: 255 }).notNull().primaryKey(),
  name: varchar("name", { length: 255 }),
  ...
});

export const usersRelations = relations(users, ({ many }) => ({
  accounts: many(accounts),
  sessions: many(sessions),
}));

export const posts = createTable(
  "post",
  {
    id: bigint("id", { mode: "number" }).primaryKey().autoincrement(),
    createdById: varchar("createdById", { length: 255 }).notNull(),
    ...
  },
  (example) => ({
    createdByIdIdx: index("createdById_idx").on(example.createdById),
  }),
);

export const users = createTable("user", {
  id: varchar("id", { length: 255 }).notNull().primaryKey(),
  name: varchar("name", { length: 255 }),
  ...
});

export const usersRelations = relations(users, ({ many }) => ({
  accounts: many(accounts),
  sessions: many(sessions),
}));

As we can see, the Posts has the createdById attribute, but it's not connected to the User table in any way. My question here are: 1. Why is there no many() relation to posts like accounts and sessions? 2. Since we do not have DB level restrictions, we trust that we will not make mistakes in the app and add wrong user ids to posts? 3. Is it even possible to add wrong author ids to posts? 4. What to do in case or to prevent 3? All help is appreciated 😄

5 replies

TTCTheo's Typesafe Cult

•Created by JulieCezar on 1/20/2024 in #questions

Vite vs Webpack

I have heard Theo mention a couple of times that you should nowadays always start a React project with Vite, if you don't go with NextJs... Since my new job requires me to work with Webpack I had to research it quite a bit, but I'm still a bit lost regarding the Vite vs Webpack battle. TLDR; I know what each of them does differently and that Webpack offers better configuration... Also, most of the articles I read say that Webpack has greater versatility and "is better suited for advanced code splitting and such requirements". But my question here is, does there exist a scenario when Webpack can offer better performance than Vite, and if so what is it? What is that "advanced requirement" everyone is talking about? Or is the difference not worth all the extra effort? And after all that, should I try to convice my boss and team to switch to Vite? 😂

1 replies

TTCTheo's Typesafe Cult

•Created by JulieCezar on 11/9/2023 in #questions

How can I write this type with Zod?

Can someone pls help me to write this type with Zod?

type MyType = {
  transcript: {
    text: Array<{
      "#text": string; 
       start: string; 
       end: string 
     }>;
    [key: string]: Record<string, unknown> | Array<Record<string, unknown>>;
  };
  [key: string]: Record<string, unknown>;
};

type MyType = {
  transcript: {
    text: Array<{
      "#text": string; 
       start: string; 
       end: string 
     }>;
    [key: string]: Record<string, unknown> | Array<Record<string, unknown>>;
  };
  [key: string]: Record<string, unknown>;
};

TLDR: the object and all nested objects need to have the listed attributes but they cann all be extended. I tried something like this but when I try to safe parse it, it says that the data is unknown.

const ZodTranscriptXMLFormat = z.union([
  z.record(z.string(), z.unknown()),
  z.object({
    transcript: z.object({
      text: z.array(
        z.object({
          text: z.array(
            z.object({
              "#text": z.string(),
              start: z.string(),
              end: z.string(),
            }),
          ),
        }),
      ),
    }),
  }),
]);

const ZodTranscriptXMLFormat = z.union([
  z.record(z.string(), z.unknown()),
  z.object({
    transcript: z.object({
      text: z.array(
        z.object({
          text: z.array(
            z.object({
              "#text": z.string(),
              start: z.string(),
              end: z.string(),
            }),
          ),
        }),
      ),
    }),
  }),
]);

4 replies

TTCTheo's Typesafe Cult

•Created by JulieCezar on 10/19/2023 in #questions

Self hosted logging/analytics for Next apps - Prometheus?

I've recently pushed a Next app to production, but by my boss' wishes we had to do self hosting. So now I'm looking at different self hosted metrics/analytics/logging solutions. Prometheus looked promising, so I wanted to ask if anyone had experience adding that to a Next app or has any other recommendations?

9 replies

TTCTheo's Typesafe Cult

•Created by JulieCezar on 7/31/2023 in #questions

T3 or App router?

I've been playing with the App router for some time now and I really like it, however there are still some things for which I think T3 is still better... What do you all use at the moment? Which one are you going to be using forward and why?

4 replies

TTCTheo's Typesafe Cult

•Created by JulieCezar on 7/26/2023 in #questions

What metadata to store when uploading files?

What metadata should I store/is usually stored when uploading a file, image etc.? An how is it stored? Is there a single attribute in the db like metadata or is it somehow split?

3 replies

TTCTheo's Typesafe Cult

•Created by JulieCezar on 7/12/2023 in #questions

Does anyone have experience with TipTap custom Nodes?

I have the following problem... I can't get the update event and value when my custom node changes... I am displaying 2 different elements inside my node, an input and a span. When the value of the input (contentDOM) changes I want to update the span as well... But I can't seem to get it working....

export default Node.create({
  name: "KatexNode",
  content: "text*",
  marks: "",
  group: "block",
  defining: true,

  parseHTML() {
    return [
      {
        tag: "katex-node",
      },
    ];
  },

  addNodeView() {
    return ({
      editor,
      node,
      getPos,
      HTMLAttributes,
      decorations,
      extension,
    }) => {
      // Create a container for the node view
      const dom = document.createElement("div");
      dom.classList.add("katex-node");

      // Create a container for the content
      const content = document.createElement("div");
      content.classList.add("content");

      const katexContent = document.createElement("span");
      katexContent.classList.add("katexContent");

      // Append all elements to the node view container
      dom.append(content, katexContent);

      return {
        // Pass the node view container …
        dom,
        // … and the content container:
        contentDOM: content,
        update(node, decorations, innerDecorations) {
          // How do I get the value here?
          return true;
        },
      };
    };
  },

  addCommands() {
    return {
      setKatexNode:
        (attributes) =>
        ({ commands }) => {
          return commands.setNode(this.name, attributes);
        },
    };
  },

  onUpdate(this) {
     // Or how do I get the value here?
  },
});

export default Node.create({
  name: "KatexNode",
  content: "text*",
  marks: "",
  group: "block",
  defining: true,

  parseHTML() {
    return [
      {
        tag: "katex-node",
      },
    ];
  },

  addNodeView() {
    return ({
      editor,
      node,
      getPos,
      HTMLAttributes,
      decorations,
      extension,
    }) => {
      // Create a container for the node view
      const dom = document.createElement("div");
      dom.classList.add("katex-node");

      // Create a container for the content
      const content = document.createElement("div");
      content.classList.add("content");

      const katexContent = document.createElement("span");
      katexContent.classList.add("katexContent");

      // Append all elements to the node view container
      dom.append(content, katexContent);

      return {
        // Pass the node view container …
        dom,
        // … and the content container:
        contentDOM: content,
        update(node, decorations, innerDecorations) {
          // How do I get the value here?
          return true;
        },
      };
    };
  },

  addCommands() {
    return {
      setKatexNode:
        (attributes) =>
        ({ commands }) => {
          return commands.setNode(this.name, attributes);
        },
    };
  },

  onUpdate(this) {
     // Or how do I get the value here?
  },
});

2 replies

TTCTheo's Typesafe Cult

•Created by JulieCezar on 6/29/2023 in #questions

Good Select component/library for large lists?

I've recently had a usecase where I need to display a large list inside a Select (10k+). Up until now I used only React select, which works perfectly fine up until like 1k items, after that it gets laggy and then at like 2-3k+ it's to janky to be called usable... I also used virtualization for it, but it's still not as smooth as I would expect it to be. Does anyone have any good recommendations?

2 replies

TTCTheo's Typesafe Cult

•Created by JulieCezar on 5/29/2023 in #questions

Prisma does JOINs by fetching all table data and then comparing???

I just watched this video from CodeDamn https://youtu.be/J2j1XwZRi30 And he said that they figured out that Prisma actually doesn't do JOINs as you would expect in SQL, but rather query all the data from the tables and then merge them with their engine or w/e.... Can someone confirm/deny this since querying large tables could potentially be expensive on PlanetScale who charge by row read?

2 replies

TTCTheo's Typesafe Cult

•Created by JulieCezar on 5/25/2023 in #questions

Is Drizzle production ready?

Simple as that, can I safely use Drizzle in production?

2 replies

TTCTheo's Typesafe Cult

•Created by JulieCezar on 5/3/2023 in #questions

What's the difference between React.ComponentProps and React.PropsWithChildren ?

I just saw someone post something on youtube but didnt't really explain it. Whats the difference between these 2, and when should I use either? Except the obvious part that the Component... has the types already included and you just call the type of element.

type Props = React.PropsWithChildren<HTMLButtonElement>;

type Props2 = React.ComponentProps<"button">;

type Props = React.PropsWithChildren<HTMLButtonElement>;

type Props2 = React.ComponentProps<"button">;

And this goes for all these types PropWithChildren, PropsWithRef, PropsWithoutRef and their counterparts ComponentPropsWithRef and ComponentPropsWithoutRef.

2 replies