vue-bulma / nprogress

Progress bars is based on nprogress for Vue
MIT License
184 stars 31 forks source link

Keep getting cannot find className of null #10

Open PanicIsReal opened 7 years ago

PanicIsReal commented 7 years ago

I've done the setup according to the readme, but every time

Uncaught TypeError: Cannot read property 'className' of null
    at classList (bundle.js:34278)
    at addClass (bundle.js:34245)
    at Object.NProgress.render (bundle.js:34059)
    at Object.NProgress.set (bundle.js:33885)
    at Object.NProgress.inc (bundle.js:33985)
    at Object.NProgress.trickle (bundle.js:33990)
    at bundle.js:33942

Any suggestions?

PanicIsReal commented 7 years ago

Seems to work after having removed the parent option from the new

nelsonpecora commented 7 years ago

I'm also getting this. Digging around in the nprogress code since I don't see anything about it in this repo

EDIT: Aha! This happens when I try to call this.$nprogress.start() in the created hook of my component. If I wait until the mounted hook, everything works.

PearRichard commented 7 years ago

I am also getting this issue, but I solved this buy review nprogress.js souce code:

var bar      = progress.querySelector(Settings.barSelector),
        perc     = fromStart ? '-100' : toBarPerc(NProgress.status || 0),
        parent   = document.querySelector(Settings.parent),
        spinner;

    css(bar, {
      transition: 'all 0 linear',
      transform: 'translate3d(' + perc + '%,0,0)'
    });

    if (!Settings.showSpinner) {
      spinner = progress.querySelector(Settings.spinnerSelector);
      spinner && removeElement(spinner);
    }

    if (parent != document.body) {
      addClass(parent, 'nprogress-custom-parent');
    }

the progress bar's default location is the top of window, but we can change this location by pass a node we prefer via the config option. Nprogress will select the node via

document.querySelector(Settings.parent)

So, the solution is, if we want to show the progress bar on the top of the window, just do not pass the parent option or just {parent:"body"}; if we want to set the progress bar in another place, pass the config option like {parent:".my-place"}, after that, you need to add a node with a class named "my-place" on your page, otherwise, it will show an error of null point exception. That's all, guys!

Cholowao commented 6 years ago

close this issue