React application will mount loadingbar.js on render, then the object becomes undefined on prop/state update

Question

I am using React and was using progressbar.js for my widgets progress. Which was working fine. I am switching to use loadingBar.js instead. I get the page to load and each widget (multiple) loads right away as expected, then when the prop/state gets updated the object "ldBar" from the loadingBar.js becomes undefined, despite seeing it on the initial render.

I know that the initial render is working via the object in my progress bar component because I can change the style from within it and it renders fine with the initial progress. I have tried importing the JS module from higher/parent levels in my react application but receive the same errors.

import React, { Component } from 'react';
// import throbber from './throbber5.gif';
// import ProgressBar from 'progressbar.js';
import './loading-bar.js';
import './loading-bar.css';

class ProgBar extends Component {

  constructor(props) {
    super(props);
    this.state = {
      percent: 0
    };
  }

  componentWillReceiveProps() {

  }

  componentDidMount() {
    console.log("progbar mounted.");

    let bar = new ldBar('#'+this.props.owner, {
      preset: 'stripe'
    });

    this.timerID = setInterval(
      () => this.tick(bar),
      10000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick(bar) {
    this.setState({percent: this.props.percent});
    if (this.state.percent > 0) {
      bar.set(this.state.percent);
    } else if (this.state.percent === undefined) {
      bar.set(1);
    }
  }

  render() {
    return (
      <div  
      data-value={this.state.percent} 
      key={this.props.owner} 
      id={this.props.owner}>
      </div>
    );
  }

}

export default ProgBar;

Not sure why the object that gets rendered properly becomes undefined once a state/prop is updated. Error:

./src/ProgBar.js Line 23: 'ldBar' is not defined no-undef

[edit: 7/22/19] Here is the line inside the loading-bar.js that is erroring (709):

  return window.addEventListener('load', function(){
    var i$, ref$, len$, node, results$ = [];
    for (i$ = 0, len$ = (ref$ = document.querySelectorAll('.ldBar')).length; i$ < len$; ++i$) {
      node = ref$[i$];
      if (!node.ldBar) {
        results$.push(node.ldBar = new ldBar(node));
      }
    }
    return results$;
  }, false);
})();
module.exports = ldBar;

[edit: 7/23/19] Here is the stack from the error. Some Node errors as well:

Search for the keywords to learn more about each error.
__stack_frame_overlay_proxy_console__   @   index.js:2178
handleErrors    @   webpackHotDevClient.js:178
./node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage  @   webpackHotDevClient.js:211
./node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent @   eventtarget.js:51
(anonymous) @   main.js:278
./node_modules/sockjs-client/lib/main.js.SockJS._transportMessage   @   main.js:276
./node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit @   emitter.js:50
WebSocketTransport.ws.onmessage @   websocket.js:35

score 0 · Answer 1 · answered Jul 19 '19 at 21:58

0

Can you please try this as a work-around, will look to something different if it doesnt work:

Outside your class definition just below import './loading-bar.css';

let bar = new ldBar;

Update componentDidMount functionality as:

  componentDidMount(){
    bar = bar('#'+this.props.owner, {
      preset: 'stripe'
    });

    this.timerID = setInterval(
      () => this.tick(bar),
      10000
    );
  }

answered Jul 19 '19 at 21:58

Sultan H.

2,908
2
11
23

This didn't work. Getting the same error message. Thanks. – chonerman Jul 22 '19 at 19:14
Sorry for that, can you show the content, or the return argument inside `import './loading-bar.js';` that file. – Sultan H. Jul 22 '19 at 19:17
I added this information to the original question/post. – chonerman Jul 22 '19 at 23:32

score 0 · Accepted Answer · answered Oct 21 '19 at 19:51

0

From the loadingbar.js website, you need to use a wrapper for this to work properly with React.

There is potential that it will be fixed in a future release to work with react.

answered Oct 21 '19 at 19:51

chonerman

117
11

React application will mount loadingbar.js on render, then the object becomes undefined on prop/state update

2 Answers2