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... :)

[garronej]

Hello @yamakhalah,

Very sorry about the bad experience and thanks for reporting.

This is very strange, what happen if you move your makeStyles call withing your component?

function Home(){
  const { classes } = useStyles();
  // ...
}

const useStyles = makeStyles()(theme=> {/*...*/});

I'm not suggesting you refactor your code, it's just for figuring out what's going on...

Beside I noticed you used !important
Do you know that you can arbitrarely increace specificity of any rulle if you want:

    gridItemFlex: {
      "&&": {
      padding: '3rem 1rem 3rem 1rem'
      },
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
    },

See https://docs.tss-react.dev/increase-specificity

[yamakhalah]

Hello @yamakhalah,

Very sorry about the bad experience and thanks for reporting.

This is very strange, what happen if you move your makeStyles call withing your component?

function Home(){
  const { classes } = useStyles();
  // ...
}

const useStyles = makeStyles()(theme=> {/*...*/});

I'm not suggesting you refactor your code, it's just for figuring out what's going on...

Beside I noticed you used !important Do you know that you can arbitrarely increace specificity of any rulle if you want:

    gridItemFlex: {
      "&&": {
      padding: '3rem 1rem 3rem 1rem'
      },
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
    },

See https://docs.tss-react.dev/increase-specificity

Indeed, if I put the makeStyle directly in the page code, it works... Very strange behavior, as I have the same structure for managing styles in sub-components and it works without a problem.

[garronej]

I think you might have a circular import issue in your codebase.
Try with named export (export const { useStyles } = makeStyles()(...) and if you sill have the same problem it should be it.
Anyway this isn't related to tss-react.

In my repo I usualy setup this Webpack plugin: https://www.npmjs.com/package/circular-dependency-plugin
It help me detect and prevent circular imports in my codebase at compile time.

Hope it helps