NextJS/MUI/TSS - Cannot read properties of undefined (reading 'classes')

[yamakhalah]

Hello,

I get a strange behaviour only when i build my project (works in dev mode).

Style:

`
import { makeStyles } from 'tss-react/mui'
import { landingBackgroundImg } from '@/style/images'

export default makeStyles()((theme) => {
  return {
    headContainer: {
      marginTop: '0vh',
      height: '100%',
      width: '100%',
      backgroundImage: `url(${landingBackgroundImg.src})`,
      backgroundSize: 'cover'
    },

    headerBox: {
      paddingTop: '-5rem'
    },

    columnBox: {
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center'
    },

    columnBoxLeft: {
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'left',
      width: '50%'
    },

    gridContainer: {
      padding: '8rem 10rem 0rem 10rem',
      height: '80vh'
    },

    groupContainer: {
      margin: '7rem 3rem 7rem 3rem'
    },

    gridItemStretch: {
      height: '80%',
    },

    gridHeaderItem: {
      margin:'2rem 0rem 0rem 0rem'
    },

    gridItem: {
      padding: '8rem 1rem 8rem 1rem',
    },

    gridItemFlex: {
      padding: '3rem 1rem 3rem 1rem !important',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
    },

    gridItemFull: {
      padding: '0rem',
      margin: '0rem',
      width: '100vw'
    },

    squaredImg: {
      maxWidth: '55%',
      height: 'auto',
      margin: 'auto'
    },

    logoImg: {
      paddingTop: '2rem',
      maxWidth: '30vw',
      height: 'auto',
      margin: 'auto'
    },

    protocolImg: {
      maxWidth: '15vw',
      height: 'auto',
      margin: 'auto'
    },

    miniatureImg: {
      maxWidth: '20vw',
      height: 'auto',
      margin: 'auto'
    },

    lineImg: {
      padding: '2rem 0rem 2rem 0rem',
      maxWidth: '10vw',
      height: 'auto',
      margin: 'auto'
    },

    coverImg: {
      maxHeight: 'auto',
      margin: 'auto',
      width: '65vw'
    },

    button: {
      width: '24%',
      height: '2.5rem',
      fontSize: '13px',
      fontFamily: 'Raleway',
      fontWeight: 'bold',
      color: 'white',
      borderRadius: '5rem',
      margin: '0rem 2rem 0rem 2rem',
    },

    buttonMedium: {
      width: '24%',
      height: '2.5rem',
      fontSize: '13px',
      fontFamily: 'Raleway',
      fontWeight: 'bold',
      color: 'white',
      borderRadius: '5rem',
      margin: '4rem 2rem 0rem 2rem',
    },

    buttonSmall: {
      width: '15%',
      height: '2.5rem',
      fontSize: '13px',
      fontFamily: 'Raleway',
      fontWeight: 'bold',
      color: 'white',
      borderRadius: '5rem',
      margin: '3rem 2rem 0rem 2rem',
    },

    title: {
      padding: '0rem 0rem 3rem 0rem'
    },

    titleLeft: {
      padding: '1rem 0rem 1rem 0rem'
    },

    body: {
      padding: '1.5rem 0rem 0rem 0rem',
      fontSize: '18px',
      width: '60%'

    },

    bodyLeft: {
      padding: '1.5rem 0rem 0rem 0rem'
    },
  }
})`

I call the function in my home page:

function Home(): JSX.Element {
  const { classes } = useStyle()
  let [protocolData, setProtocolData] = useState<ProtocolProps >(getLandingProtocolDataProps())
  let [selectedProtocolData, setSelectedProtocolData] = useState<ProtocolData>(protocolData.data[0])

Help me to understand please... :)