[bug] Can't resolve 'events'; Can't resolve 'buffer'; Can't resolve 'lit-html'

[linghuccc]

Is there an existing issue for this?

• [X] I have searched the existing issues

RainbowKit Version

2.1.3

wagmi Version

2.10.10

Current Behavior

I use below command to create a new react app: yarn create react-app my-app

and then installed rainbowkit using below command: yarn add @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query

Update src/index.js file to below:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import '@rainbow-me/rainbowkit/styles.css';
import {
  getDefaultConfig,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { WagmiProvider } from 'wagmi';
import {
  mainnet,
  polygon,
  optimism,
  arbitrum,
  base,
} from 'wagmi/chains';
import {
  QueryClientProvider,
  QueryClient,
} from "@tanstack/react-query";

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, polygon, optimism, arbitrum, base],
  ssr: true, // If your dApp uses server side rendering (SSR)
});

const queryClient = new QueryClient();

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          <App />
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Then try to run the project using below command: yarn start

Below errors will appear.

Expected Behavior

No error.

Steps To Reproduce

yarn create react-app my-app

cd my-app

yarn add @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query

    Update src/index.js file;

yarn start

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

https://codesandbox.io/p/github/linghuccc/rainbowkit-error/main

Anything else?

No response

[DanielSinclair]

It looks like you're missing some polyfills for your project. Reference the src/polyfills.ts file in this Create React App example and accompanying buffer dependency in the package.json: https://github.com/rainbow-me/rainbowkit/tree/b25db9a1f1f5acc96e28a12e38c2156e4fdbf51d/examples/with-create-react-app

[linghuccc]

It looks like you're missing some polyfills for your project. Reference the src/polyfills.ts file in this Create React App example and accompanying buffer dependency in the package.json: https://github.com/rainbow-me/rainbowkit/tree/b25db9a1f1f5acc96e28a12e38c2156e4fdbf51d/examples/with-create-react-app

Thanks, after I created polyfills.js file, installed buffer, events and lit-html modules, most of the errors disappeared, only the below error persists:

[DanielSinclair]

Ensure that you've followed the Wagmi installation guide and installed the Tanstack peer dependency https://wagmi.sh/react/getting-started#manual-installation

[linghuccc]

Ensure that you've followed the Wagmi installation guide and installed the Tanstack peer dependency https://wagmi.sh/react/getting-started#manual-installation

I suspect the error comes from yarn, but I am not sure how to fix it.

[DanielSinclair]

You might have conflicting peer dependencies installed. Clean your package.json, reference the peer versions here, and give that a try: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next/package.json

[linghuccc]

You might have conflicting peer dependencies installed. Clean your package.json, reference the peer versions here, and give that a try: https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next/package.json

I have tried to use the package json file from the example, but was not successful. Later I changed yarn from v4.3.1 to v1.22.19 and there is no above errors.

Frankly speaking, your reply speed is very fast, but the product has a lot of bugs. Simply following the installation commands also fails. I really do not think rainbowkit is a product ready for use.

[magiziz]

@linghuccc Can you delete node_modules and yarn.lock, then do yarn install again ?

[linghuccc]

@linghuccc Can you delete node_modules and yarn.lock, then do yarn install again ?

Done, still the same. I think the error originated from yarn peer dependency issue.

[magiziz]

@linghuccc Yes that's right. It's a peer dependency issue, but i don't see why this would cause your app to crash. If you run your app is it working again ?

[linghuccc]

@linghuccc Yes that's right. It's a peer dependency issue, but i don't see why this would cause your app to crash. If you run your app is it working again ?

When you say "run your app", I suppose you mean "open the web page" because I am trying to build a react project. The index page will never show up and the error in below reply will always come up: https://github.com/rainbow-me/rainbowkit/issues/2098#issuecomment-2229995195

[magiziz]

@linghuccc Gotcha. Can you re-upload your code to codesandbox or github repo and i'll have a look ?

[linghuccc]

@linghuccc Gotcha. Can you re-upload your code to codesandbox or github repo and i'll have a look ?

Sure, the codes are in below URL: https://github.com/linghuccc/rainbowkit-error

[magiziz]

@linghuccc Gotcha. Can you re-upload your code to codesandbox or github repo and i'll have a look ?

Sure, the codes are in below URL: https://github.com/linghuccc/rainbowkit-error

Thanks! Will take a look and get back.

[magiziz]

@linghuccc Apologies for the delay. I just checked out your code and doesn't seem like i'm getting any errors. I can see some warnings, but you can modify your start command like so.

"start": "GENERATE_SOURCEMAP=false react-scripts start"

The reason why this is happening is because the project uses create-react-app which isn't stable anymore and you should definetely look into using another library such as vite.

[linghuccc]

@linghuccc Apologies for the delay. I just checked out your code and doesn't seem like i'm getting any errors. I can see some warnings, but you can modify your start command like so.

"start": "GENERATE_SOURCEMAP=false react-scripts start"

The reason why this is happening is because the project uses create-react-app which isn't stable anymore and you should definetely look into using another library such as vite.

Thank you for your reply. I have updated start script as you suggested and below is the error I encountered:

I also need to point out, this error does not only appear when using "create-react-app". In fact, in my other post, I have reported similar errors when using "yarn create @rainbow-me/rainbowkit": https://github.com/rainbow-me/rainbowkit/issues/2097

[magiziz]

@linghuccc I was not able to reproduce this for some reason. Did you do npm install and npm start ?

[linghuccc]

@linghuccc I was not able to reproduce this for some reason. Did you do npm install and npm start ?

As I described in the steps, I used "yarn" command, and did not use "npm" command.

[magiziz]

@linghuccc Yes i did yarn install and yarn start. Everything worked fine for me.

[linghuccc]

@linghuccc Yes i did yarn install and yarn start. Everything worked fine for me.

What is your yarn version?

[magiziz]

@linghuccc 1.22.22

[linghuccc]

@linghuccc 1.22.22

I have tried one more time with yarn@1.22.22, but the error remains.

[magiziz]

@linghuccc Can you confirm that this is the right repo ? https://github.com/linghuccc/rainbowkit-error

[linghuccc]

@linghuccc Can you confirm that this is the right repo ? https://github.com/linghuccc/rainbowkit-error

Please refer to below repo for the latest error (yarn version 1.22.22) https://github.com/linghuccc/rainbowkit-yarn.1.22.22

Thank you.

[magiziz]

@linghuccc In your App.js you need to add client to <QueryClientProvider> like this.

const config = getDefaultConfig({
  appName: 'Uniswap Example',
  projectId: process.env.REACT_APP_PROJECT_ID,
  chains: [mainnet, sepolia],
  ssr: true, // If your dApp uses server side rendering (SSR)
  transports: {
    [sepolia.id]: http('https://sepolia.infura.io/v3/' + process.env.REACT_APP_INFURA_KEY),
  }
});

const queryClient = new QueryClient(); // <- here

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          <App />
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  </React.StrictMode>
);

[linghuccc]

@linghuccc In your App.js you need to add client to <QueryClientProvider> like this.

const config = getDefaultConfig({
  appName: 'Uniswap Example',
  projectId: process.env.REACT_APP_PROJECT_ID,
  chains: [mainnet, sepolia],
  ssr: true, // If your dApp uses server side rendering (SSR)
  transports: {
    [sepolia.id]: http('https://sepolia.infura.io/v3/' + process.env.REACT_APP_INFURA_KEY),
  }
});

const queryClient = new QueryClient(); // <- here

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          <App />
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  </React.StrictMode>
);

You are right! I must have missed it during copy and paste!

I immediately went to check projects initialized using "yarn create @rainbow-me/rainbowkit" and "yarn create vite". Luckily I did not make the same mistake for those two projects. Even luckier I found out that those two projects no longer has similar error as before. Well, all at a sudden, I am all good.

Thank you for pointing this out.

[linghuccc]

Thank you so much, magiziz!