How do I resolve the DataCloneError when using web3 and react

Question

I'm trying to add a small amount of web3 code to a react component. When I do so, I'm getting a DataCloneError. The component is as follows:

import React, { Component } from 'react';
import Web3 from 'web3';

class App extends Component {
  async componentDidMount() {
    const web3 = new Web3(window.ethereum);
    await window.ethereum.enable()
    web3.eth.getAccounts().then(console.log)
  }

  render() {
    return (
      <div>
        Hello Web3
      </div>
    );
  }
}

export default App;

The error I'm getting is

inpage.js:1 Uncaught DOMException: Failed to execute 'postMessage' on 'Window': function (error, response) {
            if (!error) {
              resolve(response);
            }

        ...<omitted>... } could not be cloned.
    at i._write (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:1:114976)
    at b (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:1:133822)
    at w (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:1:134428)
    at i.g.uncork (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:1:137191)
    at i._onMessage (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/inpage.js:1:114856)

What am I doing wrong?

Answer 1

Reverting to [email protected] resolved the issue.