Unhandled Rejection (TypeError): this.connection.on is not a function

[mmmshr]

▼ 7 stack frames were expanded.
MetamaskProvider.registerEventListeners
node_modules/web3-providers/dist/web3-providers.umd.js:968
MetamaskProvider.AbstractSocketProvider
node_modules/web3-providers/dist/web3-providers.umd.js:138
new MetamaskProvider
node_modules/web3-providers/dist/web3-providers.umd.js:961
ProvidersModuleFactory.createMetamaskProvider
node_modules/web3-providers/dist/web3-providers.umd.js:1288
ProviderResolver.resolve
node_modules/web3-providers/dist/web3-providers.umd.js:60
Web3.AbstractWeb3Module
node_modules/web3-core/dist/web3-core.umd.js:21
new Web3
node_modules/web3/dist/web3.umd.js:24
▲ 7 stack frames were expanded.
_callee2$
src/components/App.js:18
15 | await window.ethereum.enable()
16 | }
17 | else if (window.web3) {

18 | window.web3 = new Web3(window.web3.currentProvider)
| ^ 19 | }
20 | else {
21 | window.alert('Non-Ethereum browser detected. You should consider trying MetaMask!')
View compiled
▼ 8 stack frames were expanded.
tryCatch
node_modules/babel-preset-react-app/node_modules/regenerator-runtime/runtime.js:45
Generator.invoke [as _invoke]
node_modules/babel-preset-react-app/node_modules/regenerator-runtime/runtime.js:274
Generator.prototype. [as next]
node_modules/babel-preset-react-app/node_modules/regenerator-runtime/runtime.js:97
asyncGeneratorStep
node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:3
_next
node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:25
(anonymous function)
node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:32
App.
node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:21
App.loadWeb3
http://localhost:3000/static/js/main.chunk.js:185:25
▲ 8 stack frames were expanded.
App._callee$
src/components/App.js:9
6 | class App extends Component {
7 |
8 | async componentWillMount() {
9 | await this.loadWeb3()
10 | }
11 |
12 | async loadWeb3() {
View compiled
▼ 28 stack frames were expanded.
tryCatch
node_modules/babel-preset-react-app/node_modules/regenerator-runtime/runtime.js:45
Generator.invoke [as _invoke]
node_modules/babel-preset-react-app/node_modules/regenerator-runtime/runtime.js:274
Generator.prototype. [as next]
node_modules/babel-preset-react-app/node_modules/regenerator-runtime/runtime.js:97
asyncGeneratorStep
node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:3
_next
node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:25
(anonymous function)
node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:32
App.
node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:21
App.componentWillMount
http://localhost:3000/static/js/main.chunk.js:143:36
callComponentWillMount
node_modules/react-dom/cjs/react-dom.development.js:11375
mountClassInstance
node_modules/react-dom/cjs/react-dom.development.js:11468
updateClassComponent
node_modules/react-dom/cjs/react-dom.development.js:14642
beginWork
node_modules/react-dom/cjs/react-dom.development.js:15598
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js:19266
workLoop
node_modules/react-dom/cjs/react-dom.development.js:19306
renderRoot
node_modules/react-dom/cjs/react-dom.development.js:19389
performWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js:20296
performWork
node_modules/react-dom/cjs/react-dom.development.js:20208
performSyncWork
node_modules/react-dom/cjs/react-dom.development.js:20182
requestWork
node_modules/react-dom/cjs/react-dom.development.js:20051
scheduleWork
node_modules/react-dom/cjs/react-dom.development.js:19865
scheduleRootUpdate
node_modules/react-dom/cjs/react-dom.development.js:20526
updateContainerAtExpirationTime
node_modules/react-dom/cjs/react-dom.development.js:20554
updateContainer
node_modules/react-dom/cjs/react-dom.development.js:20611
ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render
node_modules/react-dom/cjs/react-dom.development.js:20907
(anonymous function)
node_modules/react-dom/cjs/react-dom.development.js:21044
unbatchedUpdates
node_modules/react-dom/cjs/react-dom.development.js:20413
legacyRenderSubtreeIntoContainer
node_modules/react-dom/cjs/react-dom.development.js:21040
render
node_modules/react-dom/cjs/react-dom.development.js:21109
▲ 28 stack frames were expanded.
Module../src/index.js
src/index.js:7
4 | import App from './components/App';
5 | import * as serviceWorker from './serviceWorker';
6 |
7 | ReactDOM.render(, document.getElementById('root'));
8 |
9 | // If you want your app to work offline and load faster, you can change
10 | // unregister() to register() below. Note this comes with some pitfalls.
View compiled
webpack_require
/home/ubuntu/social-network/webpack/bootstrap:784
781 | };
782 |
783 | // Execute the module function
784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 785 |
786 | // Flag the module as loaded
787 | module.l = true;
View compiled
fn
/home/ubuntu/social-network/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
150 | return webpack_require(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error. Click the 'X' or hit ESC to dismiss this message.

When trying to instantiate instance of web3 in the app.js file

The console of the browser has this error

Uncaught (in promise) TypeError: this.connection.on is not a function
at MetamaskProvider.registerEventListeners (web3-providers.umd.js:968)
at MetamaskProvider.AbstractSocketProvider (web3-providers.umd.js:138)
at new MetamaskProvider (web3-providers.umd.js:961)
at ProvidersModuleFactory.createMetamaskProvider (web3-providers.umd.js:1288)
at ProviderResolver.resolve (web3-providers.umd.js:60)
at Web3.AbstractWeb3Module (web3-core.umd.js:21)
at new Web3 (web3.umd.js:24)
at _callee2$ (App.js:18)
at tryCatch (runtime.js:45)
at Generator.invoke [as _invoke] (runtime.js:274)
at Generator.prototype. [as next] (runtime.js:97)
at asyncGeneratorStep (asyncToGenerator.js:3)
at _next (asyncToGenerator.js:25)
at asyncToGenerator.js:32
at new Promise ()
at App. (asyncToGenerator.js:21)
at App.loadWeb3 (App.js:23)
at App._callee$ (App.js:9)
at tryCatch (runtime.js:45)
at Generator.invoke [as _invoke] (runtime.js:274)
at Generator.prototype. [as next] (runtime.js:97)
at asyncGeneratorStep (asyncToGenerator.js:3)
at _next (asyncToGenerator.js:25)
at asyncToGenerator.js:32
at new Promise ()
at App. (asyncToGenerator.js:21)
at App.componentWillMount (App.js:10)
at callComponentWillMount (react-dom.development.js:11375)
at mountClassInstance (react-dom.development.js:11468)
at updateClassComponent (react-dom.development.js:14642)
at beginWork (react-dom.development.js:15598)
at performUnitOfWork (react-dom.development.js:19266)
at workLoop (react-dom.development.js:19306)
at renderRoot (react-dom.development.js:19389)
at performWorkOnRoot (react-dom.development.js:20296)
at performWork (react-dom.development.js:20208)
at performSyncWork (react-dom.development.js:20182)
at requestWork (react-dom.development.js:20051)
at scheduleWork (react-dom.development.js:19865)
at scheduleRootUpdate (react-dom.development.js:20526)
at updateContainerAtExpirationTime (react-dom.development.js:20554)
at updateContainer (react-dom.development.js:20611)
at ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:20907)
at react-dom.development.js:21044
at unbatchedUpdates (react-dom.development.js:20413)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:21040)
at Object.render (react-dom.development.js:21109)
at Module../src/index.js (index.js:7)
at webpack_require (bootstrap:784)
at fn (bootstrap:150)