Next.js Discord

Discord Forum

weird lines appearing?

Answered
futuredevengineer posted this in #help-forum
Open in Discord
Avatar
why is that?
Image
Answered by futuredevengineer
i am running the server as in production lmao
View full answer

31 Replies

Avatar
nothing added in css
actually, the bigger issue is that global.css is not taking effect at all.
Avatar
Then you might be taking a look at some wrong global.css
Go to your root layout and check if its imported there
Avatar
Image
Image
Image
sent duplicated images by mistake, oops
Avatar
Should work. Is your globals.css completely empty?
Also im pretty sure you dont have to name the global style "global.css" but try changing from globals.css to global.css
Avatar
that was there by default
Avatar
I really dont know what the issue is then. This usually happens due to removing everything in page.tsx while keeping the styling from global.css
What does your page.ts file look like?
Avatar
the one in the highest level of app folder hasn't been changed at all.
Avatar
Then how do you even have those inputs and buttons?
Avatar
oh you are speaking specifically about this route
hold on
Avatar
Does the route you are currently on have a global css / stylesheet? And what does its layout (if any) look like?

I was assuming this is the root route
Avatar
"use client";

import React from "react";
import {useState, useEffect} from 'react'
import { redirect } from "next/navigation";


function SignUp(){


    return(
        
    <div className='signupMain'>
    <div className='signupContainer'>
    <form method='POST' onSubmit={handleSubmit}>

    <input className='email' type='text' placeholder='Enter your email address' name="email" value={userInfo?.email} onChange={handleChange}/>
    <input className='username' type='text' placeholder='Enter your username' name='username' value={userInfo?.username} onChange={handleChange}/>
    <input className='password' type='password' placeholder='Enter your password' name='password' value={userInfo?.password} onChange={handleChange}/>
    <input className='location' type='text' placeholder='Enter your location here' name='location' value={userInfo?.password} onChange={handleChange}/>
    <input className='birthdate' type='date' placeholder='Enter your birthdate' name='birthdate' value={userInfo?.birthdate as unknown as string} onChange={handleChange}/>
    <input className='bio' type='text' placeholder='Enter your bio here' name='bio' value={userInfo?.bio} onChange={handleChange}/>
    <input className='profVis' type='text' name='isVisible'  placeholder='Do you want your profile to be visible' value={userInfo?.isVisible as unknown as string} onChange={handleChange}/>
    <div className='errorDiv'>{error}</div>
    <button type='submit' className='subBtn'>Sign up</button>
    </form>
    </div>
    
    </div>
    )

}
export default SignUp;

I trimmed part of the code cause discord has word limit
@Clown this might sound confusing but nextjs keep throwing this at me even tho i don't have toString property anywhere in my code
Image
this happen when i try to type something
ohhh, i figured out why
Avatar
i am running the server as in production lmao
Answer
Avatar
Seems like you have some stylesheet somewhere
Cause you are using classnames
Avatar
no no it is because i was running on production lol
npm start instead of npm run dev
Avatar
Damn i literally dont have any idea lol. Maybe its cursed 😭. Try clearing .next and .node_modules and running
Also npm start doesn't hot reload so make sure you are on npm run dev
OHHHH
😭😭😭
Avatar
yeah, that was the solution
that why global css wasn't updating