Theo's Typesafe Cult•2y ago

Using Mantine instead of Tailwind gives useInsertionEffect Error

I created a new T3 App, I selected only tRPC, Prisma & NextAuth. I installed Mantine afterwards. I'm using Mantine Ring Progress and some other Components. But it is giving me error -

error - useInsertionEffect only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component

while runing npm run dev or npm run build && npm run start I'm not using the app directory. I asked the creator of Mantine, and I've used Mantine Default Template of Next.js, Everything was working as expected in that Template. Link: https://github.com/mantinedev/mantine-next-template Thanks

GitHub

GitHub - mantinedev/mantine-next-template: Next.js + Mantine template

Next.js + Mantine template. Contribute to mantinedev/mantine-next-template development by creating an account on GitHub.

4 Replies

rocawear•2y ago

https://mantine.dev/guides/next/ did you follow this guide

Usage with Next.js

React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience

BabaYaga•2y ago

I surely did... I won't ask a question without going through mantine docs

jingleberry•2y ago

Could you please provide a reproduction in a github repo or code sandbox?

BabaYaga•2y ago

Okay, after fighting it for than 2 days, I got what's causing the issue. It's trpc's serverside rendering.

import { httpBatchLink, loggerLink } from "@trpc/client";
import { createTRPCNext } from "@trpc/next";
import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
import superjson from "superjson";

import { type AppRouter } from "@/server/api/root";

const getBaseUrl = () => {
  if (typeof window !== "undefined") return ""; // browser should use relative url
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
};

export const api = createTRPCNext<AppRouter>({
  config() {
    return {
      transformer: superjson,
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
        }),
      ],
    };
  },
  ssr: false,
});

export type RouterInputs = inferRouterInputs<AppRouter>;
export type RouterOutputs = inferRouterOutputs<AppRouter>;

import { httpBatchLink, loggerLink } from "@trpc/client";
import { createTRPCNext } from "@trpc/next";
import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
import superjson from "superjson";

import { type AppRouter } from "@/server/api/root";

const getBaseUrl = () => {
  if (typeof window !== "undefined") return ""; // browser should use relative url
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
};

export const api = createTRPCNext<AppRouter>({
  config() {
    return {
      transformer: superjson,
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
        }),
      ],
    };
  },
  ssr: false,
});

export type RouterInputs = inferRouterInputs<AppRouter>;
export type RouterOutputs = inferRouterOutputs<AppRouter>;

Previously, (and also generally), I turn that ssr: false to true and this was the whole thing which was causing the error

Gaming

Programming

Using Mantine instead of Tailwind gives useInsertionEffect Error