Chrome Extension Popup randomly shrinks to unusable size on browser action icon click

I am using react js & chart.js to render some charts in popup.html

It usually looks like this:

Chrome Extension Chart.js

But, sometimes shrinks down to unusable size like so:

Unusable Chrome extension popup

This happens randomly and I get no error messages in the console when it does.

Simplified Code:

// App.js
class App extends Component {
  state = {
    token: null
  }
  componentDidMount() {
    chrome.storage.local.get('token', function(result) {
      result && result.token && this.setState({ token: result.token });
    });
  }
  render() {
    return (
      
{ this.state.token ? : }
) } } // LineChart.js class LineChart extends Component { componentDidMount() { const canvas = document.getElementById('usageChart'); if (canvas) { this.getChartData() .then(data => { this.chart = new Chart(canvas, { type: 'line', data, options: chartConfig.options }); }); } } render() { return ( ); } }

After checking the popup console, all the components were rendered in both cases, just that the popup window shrunk without any errors.

I tried rendering without chart.js chart and this issue occurred a lesser number of times but was still there.

Obviously, the best answer would be one to describe the exact underlying cause. But, I can’t even understand how to debug this and find the root cause of this issue? Any help in that direction would be great!