Theo's Typesafe Cult•3d ago

create t3 app build error

Hey, The default config for create t3 app, with the following installs: prisma tailwind nextauth trpc results in a build error of:

dashboard:build:    Collecting page data ...
dashboard:build:    Generating static pages (0/4) ...
dashboard:build: Error: <Html> should not be imported outside of pages/_document.
dashboard:build: Read more: https://nextjs.org/docs/messages/no-document-import-in-page
dashboard:build:     at O (E:\coding\project-remake1\apps\dashboard\.next\server\chunks\739.js:6:1263)
dashboard:build: Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
dashboard:build: Error: <Html> should not be imported outside of pages/_document.
dashboard:build: Read more: https://nextjs.org/docs/messages/no-document-import-in-page

dashboard:build:    Collecting page data ...
dashboard:build:    Generating static pages (0/4) ...
dashboard:build: Error: <Html> should not be imported outside of pages/_document.
dashboard:build: Read more: https://nextjs.org/docs/messages/no-document-import-in-page
dashboard:build:     at O (E:\coding\project-remake1\apps\dashboard\.next\server\chunks\739.js:6:1263)
dashboard:build: Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
dashboard:build: Error: <Html> should not be imported outside of pages/_document.
dashboard:build: Read more: https://nextjs.org/docs/messages/no-document-import-in-page

After some debugging, i found that removing NODE_ENV="development" stops the build error from occuring. Why is this?

7 Replies

PeformOP•3d ago

full error

message.txt

PeformOP•3d ago

I am using the default code that is inside of page.tsx/layout.tsx (but i stripped out some of the html: page.tsx

import { auth } from '@/server/auth';
import { api, HydrateClient } from '@/trpc/server';

export default async function Home() {
    const session = await auth();

    if (session?.user) {
        void api.post.getLatest.prefetch();
    }

    return (
        <HydrateClient>
            <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
                <div>
                    <h1>hi</h1>
                </div>
            </main>
        </HydrateClient>
    );
}

import { auth } from '@/server/auth';
import { api, HydrateClient } from '@/trpc/server';

export default async function Home() {
    const session = await auth();

    if (session?.user) {
        void api.post.getLatest.prefetch();
    }

    return (
        <HydrateClient>
            <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
                <div>
                    <h1>hi</h1>
                </div>
            </main>
        </HydrateClient>
    );
}

Layout.tsx

import '@/styles/globals.css';

import { GeistSans } from 'geist/font/sans';
import type { Metadata } from 'next';

import { TRPCReactProvider } from '@/trpc/react';

export const metadata: Metadata = {
    title: 'Create T3 App',
    description: 'Generated by create-t3-app',
    icons: [{ rel: 'icon', url: '/favicon.ico' }],
};

export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
    return (
        <html lang="en" className={`${GeistSans.variable}`}>
            <body>
                <TRPCReactProvider>{children}</TRPCReactProvider>
            </body>
        </html>
    );
}

import '@/styles/globals.css';

import { GeistSans } from 'geist/font/sans';
import type { Metadata } from 'next';

import { TRPCReactProvider } from '@/trpc/react';

export const metadata: Metadata = {
    title: 'Create T3 App',
    description: 'Generated by create-t3-app',
    icons: [{ rel: 'icon', url: '/favicon.ico' }],
};

export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
    return (
        <html lang="en" className={`${GeistSans.variable}`}>
            <body>
                <TRPCReactProvider>{children}</TRPCReactProvider>
            </body>
        </html>
    );
}

PeformOP•3d ago

just as a reference, i do not have a pages directory, and I also do not have a /404 page

webdevkaleem•3d ago

try deleting the .next build folder and restarting your server are you running turbo repo?

PeformOP•2d ago

Hi, Yes I am running turbo repo. I have just tried building after deleting the .next build folder, but still get the same error. (It seems to switch between showing /404 and /500 as the pages that are erroring? However, if I do remove NODE_ENV="DEVELOPMENT" the build errors stop, although I do use my node_env=dev in other apps in my monorepo, so i was hoping to keep this.

webdevkaleem•2d ago

the project sets the NODE_ENV var automatically where you're running the code. It checks automatically if you're on production or development. If removing it fixes the bugs then i would say to remove it you can do your checks and it should still work normally adding a ! operator at the end would ensure all the types example: process.env.NODE_ENV! the ! tells that the variable isn't null (i think) i can't make anything of the error message you have attached above as well i've had no experience with mono repos so i can't say much

PeformOP•2d ago

Okay thank you for the responses 🙂

Gaming

Programming

create t3 app build error

Did you find this page helpful?