Using CSS modules throws error: TypeError: Cannot read properties of null (reading 'style')

[shivamjjha]

I am using nprogress in a ProgressBar component with jsx.

However, when I try to replace it with my own CSS module, it gives error

My component:

import { useEffect, useTransition } from 'react'
import Router from 'next/router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import styles from '@styles/ProgressBar.module.css'

console.log(styles)

const ProgressBar = () => {
  const [, startTransition] = useTransition()

  // lazy loading nprogress bar
  useEffect(() => {
    NProgress.configure({
      showSpinner: false,
      barSelector: `.${styles.bar}`,
      // parent: '#__next',
      template: `
      <div>
        <div className=${styles.bar}>
          <div className=${styles.peg} />
        </div>
      </div>
      `,
    })
    function routeChangeStart() {
      startTransition(() => {
        if(document.body !=null) {
          NProgress.start()
        }
      })
    }

    function routeChangeEnd() {
      startTransition(() => {
        NProgress.done(true)
      })
    }

    function routeChangeError() {
      startTransition(() => {
        routeChangeEnd()
      })
    }
    Router.events.on('routeChangeStart', routeChangeStart)
    Router.events.on('routeChangeComplete', routeChangeEnd)
    Router.events.on('routeChangeError', routeChangeError)
    return () => {
      Router.events.off('routeChangeStart', routeChangeStart)
      Router.events.off('routeChangeComplete', routeChangeEnd)
      Router.events.off('routeChangeError', routeChangeError)
    }
  }, [])

  return (
    null
  )
}

export default ProgressBar

CSS file (ProgressBar.module.css)

/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: #29d;

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}

/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 50%;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
  animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes nprogress-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes RefreshedLoadingBarProgress {
  from {
    background-position: 125% 0;
  }

  to {
    background-position: 0% 0;
  }
}

@keyframes LoadingBarEnter {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

#nprogress .bar {
  --gradient-lavender: #d300c5;
  --gradient-orange: #ff7a00;
  --gradient-pink: #ff0169;
  --gradient-purple: #7638fa;
  --gradient-yellow: #ffd600;

  animation: 2s linear infinite RefreshedLoadingBarProgress
    /* , .5s ease-out LoadingBarEnter */;
  background: linear-gradient(
    to right,
    var(--gradient-yellow),
    var(--gradient-orange),
    var(--gradient-pink),
    var(--gradient-lavender),
    var(--gradient-purple),
    var(--gradient-yellow)
  ) !important;
  background-size: 500%;
  height: 3px !important;
  transform-origin: left;
  width: 100%;
}

@media (max-width: 767px) {
  #nprogress .bar {
    height: 5px !important;
  }
}

The error thrown:

TypeError: Cannot read properties of null (reading 'style')
    at applyCss (nprogress.js?5707:398:1)
    at eval (nprogress.js?5707:412:1)
    at eval (nprogress.js?5707:82:1)
    at next (nprogress.js?5707:347:1)
    at eval (nprogress.js?5707:353:1)
    at NProgress.set (nprogress.js?5707:77:1)
    at NProgress.done (nprogress.js?5707:152:1)
    at eval (ProgressBar.tsx?8ff9:36:9)
    at startTransition (react-dom.development.js?ac89:17332:1)
    at routeChangeEnd (ProgressBar.tsx?8ff9:35:7)
    at eval (mitt.js?851d:19:17)
    at Array.map (<anonymous>)
    at Object.emit (mitt.js?851d:18:39)
    at eval (router.js?8684:799:39)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (_async_to_generator.js?0e30:23:1)
    at _next (_async_to_generator.js?0e30:12:1)

Error occurs in this function:

function applyCss(element, prop, value) {
      prop = getStyleProp(prop);
      element.style[prop] = value; // here
    }

[r1zyn]

https://www.npmjs.com/package/nprogress#template

To keep the progress bar working, keep an element with role='bar' in there

[shivamjjha]

@r1zyn I changed my conig to:

NProgress.configure({
  showSpinner: false,
  barSelector: styles.bar,
  template: `
      <div className=${styles.bar} role='bar'>
        <div className=${styles.peg}></div>
      </div>
      <div className=${styles.spinner} role='spinner'>
        <div className=${styles['spinner-icon']}></div>
      </div>
      `,
  parent: styles['nprogress-custom-parent'],
  spinnerSelector: styles.spinner
})

Still it shows error:

nprogress.js?5707:397 
        
       Uncaught (in promise) TypeError: Cannot read properties of null (reading 'style')
    at applyCss (nprogress.js?5707:397:1)
    at eval (nprogress.js?5707:408:1)
    at NProgress.render (nprogress.js?5707:233:1)
    at NProgress.set (nprogress.js?5707:70:1)
    at NProgress.inc (nprogress.js?5707:170:1)
    at NProgress.done (nprogress.js?5707:152:1)
    at eval (ProgressBar.tsx?8ff9:34:9)
    at startTransition (react-dom.development.js?ac89:17332:1)
    at routeChangeEnd (ProgressBar.tsx?8ff9:33:7)
    at eval (mitt.js?851d:19:17)
    at Array.map (<anonymous>)
    at Object.emit (mitt.js?851d:18:39)
    at eval (router.js?8684:950:39)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (_async_to_generator.js?0e30:23:1)
    at _next (_async_to_generator.js?0e30:12:1)