Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
shivamjjha opened this issue Aug 19, 2022 · 2 comments

Comments

@shivamjjha
Copy link

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
Copy link

r1zyn commented Dec 11, 2022

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

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

@shivamjjha
Copy link
Author

@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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants