Collect to walletconnect failed Uncaught (in promise) ReferenceError: Buffer is not defined

[0xbeekeeper]

here is my package.json using react-scripts 5.0.0 here is my code when i enter the button, it shows like:

[dmend3z]

I need more details

[willisk]

ran into this issue as well.. this is due to walletconnect relying on nodejs modules which are not supported anymore using webpack 5 (which comes with react-scripts 5)

Solution:

• either downgrade: yarn upgrade [email protected]
• or go through this mess if you require webpack 5 (I do...): https://github.com/WalletConnect/walletconnect-monorepo/issues/748

in short: You need to inject the missing dependencies required by walletconnect into webpack by using react-app-rewired. So go ahead and

yarn add react-app-rewired process util

Create a new file config-overrides.js in the root of your project.

/* config-overrides.js */
const webpack = require('webpack');
module.exports = function override(config, env) {
    config.resolve.fallback = {
        util: require.resolve('util/'),
        url: require.resolve('url'),
        assert: require.resolve('assert'),
        buffer: require.resolve('buffer'),
    };
    config.plugins.push(
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer'],
        }),
    );

    return config;
}

You might as well remove node_modules and yarn.lock/package-lock.json and reinstall packages yarn/npm i (at least I did about 100 times).

And start running your app using react-app-rewired start. The million warnings/errors that you see can apparently safely be ignored (https://github.com/facebook/create-react-app/discussions/11767) and hidden with GENERATE_SOURCEMAP=false react-app-rewired start.

You might also want to directly add this to your package.json scripts:

{
...
  "scripts": {
    "start": "GENERATE_SOURCEMAP=false react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },
}

Et voila, hope it helps.

[matbee-eth]

It helps, thanks!

[Cheesetouched]

ran into this issue as well.. this is due to walletconnect relying on nodejs modules which are not supported anymore using webpack 5 (which comes with react-scripts 5)

Solution:

• either downgrade: yarn upgrade [email protected]
• or go through this mess if you require webpack 5 (I do...): Buffer is not defined error with CRA WalletConnect/walletconnect-monorepo#748

in short: You need to inject the missing dependencies required by walletconnect into webpack by using react-app-rewired. So go ahead and

yarn add react-app-rewired process util

Create a new file config-overrides.js in the root of your project.

/* config-overrides.js */
const webpack = require('webpack');
module.exports = function override(config, env) {
    config.resolve.fallback = {
        util: require.resolve('util/'),
        url: require.resolve('url'),
        assert: require.resolve('assert'),
        buffer: require.resolve('buffer'),
    };
    config.plugins.push(
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer'],
        }),
    );

    return config;
}

You might as well remove node_modules and yarn.lock/package-lock.json and reinstall packages yarn/npm i (at least I did about 100 times).

And start running your app using react-app-rewired start. The million warnings/errors that you see can apparently safely be ignored (facebook/create-react-app#11767) and hidden with GENERATE_SOURCEMAP=false react-app-rewired start.

You might also want to directly add this to your package.json scripts:

{
...
  "scripts": {
    "start": "GENERATE_SOURCEMAP=false react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },
}

Et voila, hope it helps.

Must've saved hours! Thanks man.

[0xbeekeeper]

It helps! thanks!

[talentlessguy]

is this issue resolved?

[altyni86]

Is connecting wallets working on mobile? My app is not connecting on IOS.

[edward-arinin-web-dev]

Is connecting wallets working on mobile? My app is not connecting on IOS.

try this: go to settings on your IOS device > safari > extensions > experimental features and disable NSURLSession WebSocket

this might help

[garciadiazjaime]

downgrading to 4.0.3 it helped me

npm i [email protected]

[ericlewis966]

If we are using React 17 or 18, we can't avoid "Buffer undefined" proflem without "config-overides.js". We have to downgrade react version to use walletconnect libraries.

[ghost]

Just add Buffer to your window object, no need to downgrade anything my package.json

"buffer": "^6.0.3",
"react-scripts": "5.0.1",

index.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Buffer } from 'buffer';

import './index.scss';
import App from './App';

window.Buffer = window.Buffer || Buffer;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

[marcellodesales]

Will definitely try this approach!

[atropos0902]

Just add Buffer to your window object, no need to downgrade anything my package.json

"buffer": "^6.0.3",
"react-scripts": "5.0.1",

index.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Buffer } from 'buffer';

import './index.scss';
import App from './App';

window.Buffer = window.Buffer || Buffer;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

I was able to make it run without installing buffer package.

[ghost]

thanks for the helpful feedback mate

[marcellodesales]

Just add Buffer to your window object, no need to downgrade anything my package.json

"buffer": "^6.0.3",
"react-scripts": "5.0.1",

index.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Buffer } from 'buffer';

import './index.scss';
import App from './App';

window.Buffer = window.Buffer || Buffer;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

I was able to make it run without installing buffer package.

Care about sharing the solution?

[atropos0902]

Just add Buffer to your window object, no need to downgrade anything my package.json

"buffer": "^6.0.3",
"react-scripts": "5.0.1",

index.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Buffer } from 'buffer';

import './index.scss';
import App from './App';

window.Buffer = window.Buffer || Buffer;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

I was able to make it run without installing buffer package.

Care about sharing the solution?

I didn't install buffer package. And add the following to index.tsx.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Buffer } from 'buffer';

import './index.scss';
import App from './App';

window.Buffer = window.Buffer || Buffer;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

[arthur-zhuk]

Just add Buffer to your window object, no need to downgrade anything my package.json

"buffer": "^6.0.3",
"react-scripts": "5.0.1",

index.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Buffer } from 'buffer';

import './index.scss';
import App from './App';

window.Buffer = window.Buffer || Buffer;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

I was able to make it run without installing buffer package.

Care about sharing the solution?

I didn't install buffer package. And add the following to index.tsx.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Buffer } from 'buffer';

import './index.scss';
import App from './App';

window.Buffer = window.Buffer || Buffer;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

Clutch fix sir 👍

[RicFer01]

I did the same

import { Buffer } from 'buffer';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement,
);

window.Buffer = window.Buffer || Buffer;

but I'm still getting in console Uncaught ReferenceError: Buffer is not defined did I miss something?

I'm using

  "react-scripts": "^5.0.1",

and

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.7.0",

I understood that it's not necessary use CRACO or rewired with the solution above, did I miss something?