cant run nextUI in prod but have it in dev (vercel) #59623

Urbaninja25 · 2023-12-14T16:07:04Z

Urbaninja25
Dec 14, 2023

Summary

i am creating T3 app with createT3app .
it using "next": "^14.0.0" but _app.tsx file structure

so i did everything i could depending what nextui.org gave us as setup guidance (with providers,without providers,external providers and ext ),but nothing works.

it works like charm in developments with all the styles and features it has but whenever i try to host it on vercel,none of nextui componenets appears at all .

worst thing is that we dont have any proper errorhandling here which provide some workaround in prod logs or in dev console

i will be happy if anyone can help me here!
much appreciated !

Additional information

//depandancies

 "dependencies": {
    "@nextui-org/react": "^2.2.9",
    "@prisma/client": "^5.1.1",
    "@t3-oss/env-nextjs": "^0.7.0",
    "@tanstack/react-query": "^4.32.6",
    "@trpc/client": "^10.37.1",
    "@trpc/next": "^10.37.1",
    "@trpc/react-query": "^10.37.1",
    "@trpc/server": "^10.37.1",
    "@types/node-fetch": "^2.6.9",
    "animejs": "^3.2.1",
    "dotenv": "^16.3.1",
    "framer-motion": "^10.16.16",
    "leaflet": "^1.9.4",
    "leaflet-defaulticon-compatibility": "^0.1.2",
    "next": "^14.0.0",
    "openai": "^4.18.0",
    "react": "18.2.0",
    "react-bootstrap": "^2.9.1",
    "react-dom": "18.2.0",
    "react-hot-toast": "^2.4.1",
    "react-leaflet": "^4.2.1",
    "react-loading-skeleton": "^3.3.1",
    "react-query": "^3.39.3",
    "superjson": "^1.13.1",
    "zod": "^3.22.4"
  }

//thailwind.config

// tailwind.config.js
import { nextui } from "@nextui-org/react";

/** @type {import('tailwindcss').Config} */
const config = {
  content: [
    // ...
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()],
};

export default config;



//_app.tsx

"use client";
import { type AppType } from "next/app";
import { api } from "~/utils/api";
import Head from "next/head";
import "~/styles/globals.css";
import { NextUIProvider } from "@nextui-org/react";
import { Toaster } from "react-hot-toast";

const MyApp: AppType = ({ Component, pageProps }) => {
  return (
    <NextUIProvider>
      <Head>
        <title>KatsuioAI</title>
        <meta name="description" content="Generated by create-t3-app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Toaster position="bottom-center" />
      <Component {...pageProps} />
    </NextUIProvider>
  );
};

export default api.withTRPC(MyApp);


//index.tsx (part of it )

import { Button } from "@nextui-org/react";

existing code ...////


 <Button
                isLoading={isLoading}
                size="sm"
                color="secondary"
                variant="shadow"
                onClick={handleDataFetch}
              >
                Post
              </Button>

//layout.tsx (it will just wrapes all the  jsx contents except  route _app.tsx

import type { PropsWithChildren } from "react";
export const PageLayout = (props: PropsWithChildren) => {
  return (
    <main className="overflow-none flex h-screen  justify-center ">
      <div
        className=" flex w-full flex-col p-4"
        style={{ backgroundColor: "#4b5563" }}
      >
        {props.children}
      </div>
    </main>
  );
};

Example

here is what vercel deploys : https://katsuio-8x0zkvgns-urbaninja25.vercel.app/

danielmintz · 2024-05-06T05:22:57Z

danielmintz
May 6, 2024

I have the same problem did you solve it?

0 replies

diazkhalid · 2024-06-27T16:34:50Z

diazkhalid
Jun 27, 2024

Hi, I had the same problem recently. Try changing import { nextui } from "@nextui-org/react"; in tailwind.config.js to import { nextui } from "@nextui-org/theme"; and don't forget to install the dependencies with npm install @nextui-org/theme. Hope it works for you✌

2 replies

Hacki01 Dec 15, 2024

Thank you!

kyds3k Dec 22, 2024

thank you @diazkhalid! that did the trick for me too!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

cant run nextUI in prod but have it in dev (vercel) #59623

{{title}}

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

cant run nextUI in prod but have it in dev (vercel) #59623

Urbaninja25 Dec 14, 2023

Summary

Additional information

Example

Replies: 2 comments · 2 replies

danielmintz May 6, 2024

diazkhalid Jun 27, 2024

Hacki01 Dec 15, 2024

kyds3k Dec 22, 2024

Urbaninja25
Dec 14, 2023

Replies: 2 comments 2 replies

danielmintz
May 6, 2024

diazkhalid
Jun 27, 2024