Next.js Discord

Discord Forum

Vercel TypeError deployment for not declaring `styles`

Answered
Transvaal lion posted this in #help-forum
Open in Discord
Transvaal lionOP
I have a main component where I'm calling the child component:
import styles from "@/styles/...scss"
import Child from "@/components/Child"

export default function Parent(){

  return <main>
  <Child styles={styles}/>
 </main>

}


Then the child component simply has

type ChildType = {
  styles : {readonly [key:string] : string}
}

export default function Child({styles}: ChildType){

  return <div className = {styles["main_image"]}
  //code blah blah
</div>
}


and I'm getting an error on vercel saying
TypeError: Cannot read properties of undefined (reading 'main_image') .
Can I not use the Child component like this?
Answered by riský
@Transvaal lion how has your question going (also why can't you import the styles in the client / import in Parent and pass className)
View full answer

9 Replies

riský
is your scss file a module (ie ends with .module.scss)
riský
@Transvaal lion how has your question going (also why can't you import the styles in the client / import in Parent and pass className)
Answer
@riský is your scss file a module (ie ends with .module.scss)
Transvaal lionOP
Yes! It's a module.scss file. Apologies, I only realized this question was answered until you directly replied.
@riský <@161288142396194816> how has your question going (also why can't you import the styles in the client / import in Parent and pass className)
Transvaal lionOP
I can import through the Child component, but I prefer to pass down through the parent component as styles
It seems to work fine when I run it locally, but Typescript seems to have an issue. I'm unclear on why.
It's like when Vercel runs this and sees the child component property styles undefined, it complains. But it should only complain only if I use it in the parent component.
Transvaal lionOP
I have fixed the issue. Instead of using 
className = {styles["main_image"]}

in the Child component, I used it in the parent component. So, it looks something like:

Parent
import styles from "@/styles/...scss"
import Child from "@/components/Child"

export default function Parent(){

  return <main>
  <Child styles={styles["main_image"]}/>
 </main>

}


and in the Child:


type ChildType = {
  styles : string
}

export default function Child({styles}: ChildType){

  return <div className = {styles}
  //code blah blah
</div>
}


I've also changed the type in the Child component to string as I suppose it's the most suitable?