question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Uncaught TypeError: Cannot read property 'clientWidth' of null

See original GitHub issue

I make a dynamic scrollbar to load users in my project, it will call serverice to get more users every time when I scroll to the bottom like below code block.

constructor(props) {
        super(props);

        this.state = {
            users: this.props.users ? [...this.props.users] : [],
            isBusy: true
        };
        this.lastScrollTop = 0;
        this.onScroll = this.onScroll.bind(this);
    }
onScroll(evt) {
        const scrollTop = evt.target.scrollTop;
        const clientHeight = evt.target.clientHeight;
        const scrollHeight = evt.target.scrollHeight;
        if (clientHeight + scrollTop === scrollHeight) {
            if (this.props.getUsers && this.hasNextPage) {
                this.lastScrollTop = scrollTop;
                this.props.getUsers(Id, this.pageIndex, this.state.searchText);
            }
        }
    }

And in componentWillReceiveProps I update the users in state

componentWillReceiveProps(nextProps) {
        if (this.props.users !== nextProps.users) {
            let users = this.state.usersAndGroups.concat(nextProps.usersAndGroups);
            this.setState({ users , isBusy: false });
        }
    }

Then in i will set the scrollbar to last scroll position

componentDidUpdate() {
        if (this.scrollbar) {
            this.scrollbar.scrollTop(this.lastScrollTop);
        }
    }

Then render it

<ScrollBar
                            style={{ width: '100%', height: '100%' }}
                            onScroll={this.onScroll}
                            ref={(scrollbar) => { this.scrollbar = scrollbar; }}>
                            <div>
                                {this.renderUserList(users)}
                            </div>
                        </ScrollBar>

All works well except it will throw below error in console when I scroll to the bottom to load next page users.

Uncaught TypeError: Cannot read property 'clientWidth' of null
at getInnerWidth
    at Scrollbars._update

And in the callstack is that el is null when get clientWidth el.clientWidth, anyone konw reason?

function getInnerWidth(el) {
                var clientWidth = el.clientWidth;

                var _getComputedStyle = getComputedStyle(el),
                    paddingLeft = _getComputedStyle.paddingLeft,
                    paddingRight = _getComputedStyle.paddingRight;

                return clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight);
            }`

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:1
  • Comments:7

github_iconTop GitHub Comments

4reactions
cdrevecommented, Dec 20, 2018

@guillaume86 Could you make a pull request with the fix so it can be added to this repo as well?

1reaction
guillaume86commented, Dec 21, 2018

A pull request from my fork would not be accepted because I also added a bunch of build artifacts to the repo (time constraints).

Important changes are in the index.js, feel free to do a proper PR: https://github.com/guillaume86/react-custom-scrollbars/commit/206c0be2d6e6d868e622935beccb27b6166de1cc#diff-56dac60181e52c3433963016d0092037

Read more comments on GitHub >

github_iconTop Results From Across the Web

Uncaught TypeError: Cannot read property 'clientWidth' of null
It returns width of browser viewport Which is equivalent or I would say better alternative for traditional javascript.
Read more >
TypeError: Cannot read property 'clientWidth' of Null in JS
The "Cannot read property 'clientWidth' of null" error occurs when trying to access the clientWidth property on a null value. To solve the...
Read more >
TypeError: Cannot read property 'clientWidth' of null : TBX-3675
As I already mentioned in another issue, the Toolbox App should write stack traces to its log file, so that issues like this...
Read more >
Cannot read property 'clientWidth' of null jquery.dataTables ...
Hi All! I am new to datatables. I am using this to display results from ajax call.
Read more >
The "Cannot read property 'clientWidth' of null" error occurs in ...
I upgraded from 17.1 to 17.2 and noticed that the FilesUploadComplete client-side javascript callback was not being called after the first ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found