Help needed with setting up the development environment

[seakkus]

Hello,

I am trying to setup the development environment to run rainbowkit's source code locally but I can't seem to figure out why it is not working.

I cloned the repo and then dir into packages/rainbowkit to run 'npm install' which installs the packages and seems to be running the build script afterwards which is where it fails with some basic errors:

============
src/components/AccountModal/AccountModal.tsx:1:19 - error TS7016: Could not find a declaration file for module 'react'. '/Users/apmlabs/dev/rainbowkit/packages/rainbowkit/node_modules/react/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/react if it exists or add a new declaration (.d.ts) file containing declare module 'react';

1 import React from 'react';
~~~~~~~

src/components/AccountModal/AccountModal.tsx:30:10 - error TS2741: Property 'children' is missing in type '{ onClose: () => void; open: boolean; titleId: string; }' but required in type 'DialogProps'.

30
~~~~~~

src/components/Dialog/Dialog.tsx:24:3
24 children: ReactNode;
~~~~~~~~
'children' is declared here.

src/components/AccountModal/AccountModal.tsx:31:12 - error TS2741: Property 'children' is missing in type '{ bottomSheetOnMobile: true; padding: string; }' but required in type 'DialogContentProps'.

31
~~~~~~~~~~~~~

src/components/Dialog/DialogContent.tsx:11:3
11 children: ReactNode;
~~~~~~~~
'children' is declared here.

src/components/AsyncImage/AsyncImage.tsx:1:35 - error TS7016: Could not find a declaration file for module 'react'. '/Users/apmlabs/dev/rainbowkit/packages/rainbowkit/node_modules/react/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/react if it exists or add a new declaration (.d.ts) file containing declare module 'react';

1 import React, { useReducer } from 'react';
~~~~~~~

src/components/AsyncImage/AsyncImage.tsx:11:19 - error TS2339: Property 'width' does not exist on type 'unknown'.

11 width: BoxProps['width'] | number;
~~~~~~~

src/components/AsyncImage/AsyncImage.tsx:12:20 - error TS2339: Property 'height' does not exist on type 'unknown'.

12 height: BoxProps['height'] | number;
~~~~~~~~

src/components/AsyncImage/AsyncImage.tsx:14:27 - error TS2339: Property 'borderRadius' does not exist on type 'unknown'.

14 borderRadius?: BoxProps['borderRadius'];
~~~~~~~~~~~~~~

src/components/AsyncImage/AsyncImage.tsx:15:26 - error TS2339: Property 'borderColor' does not exist on type 'unknown'.

15 borderColor?: BoxProps['borderColor'] | CustomBorderColor;
~~~~~~~~~~~~~

src/components/AsyncImage/AsyncImage.tsx:16:24 - error TS2339: Property 'boxShadow' does not exist on type 'unknown'.

16 boxShadow?: BoxProps['boxShadow'];
~~~~~~~~~~~

src/components/AsyncImage/useAsyncImage.ts:1:39 - error TS7016: Could not find a declaration file for module 'react'. '/Users/apmlabs/dev/rainbowkit/packages/rainbowkit/node_modules/react/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/react if it exists or add a new declaration (.d.ts) file containing declare module 'react';

1 import { useEffect, useReducer } from 'react';
~~~~~~~

src/components/AsyncImage/useAsyncImage.ts:56:38 - error TS7006: Parameter 'x' implicitly has an 'any' type.

56 const [, forceUpdate] = useReducer(x => x + 1, 0);
~

src/components/Avatar/Avatar.tsx:1:35 - error TS7016: Could not find a declaration file for module 'react'. '/Users/apmlabs/dev/rainbowkit/packages/rainbowkit/node_modules/react/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/react if it exists or add a new declaration (.d.ts) file containing declare module 'react';

1 import React, { useContext } from 'react';
~~~~~~~

src/components/Avatar/EmojiAvatar.tsx:1:53 - error TS7016: Could not find a declaration file for module 'react'. '/Users/apmlabs/dev/rainbowkit/packages/rainbowkit/node_modules/react/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/react if it exists or add a new declaration (.d.ts) file containing declare module 'react';

1 import React, { useEffect, useMemo, useState } from 'react';
~~~~~~~

src/components/Avatar/EmojiAvatar.tsx:7:48 - error TS7031: Binding element 'address' implicitly has an 'any' type.

7 export const EmojiAvatar: AvatarComponent = ({ address, ensImage, size }) => {
~~~~~~~

src/components/Avatar/EmojiAvatar.tsx:7:57 - error TS7031: Binding element 'ensImage' implicitly has an 'any' type.

7 export const EmojiAvatar: AvatarComponent = ({ address, ensImage, size }) => {
~~~~~~~~

src/components/Avatar/EmojiAvatar.tsx:7:67 - error TS7031: Binding element 'size' implicitly has an 'any' type.

7 export const EmojiAvatar: AvatarComponent = ({ address, ensImage, size }) => {
~~~~

src/components/Box/Box.ts:2:24 - error TS7016: Could not find a declaration file for module 'react'. '/Users/apmlabs/dev/rainbowkit/packages/rainbowkit/node_modules/react/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/react if it exists or add a new declaration (.d.ts) file containing declare module 'react';

2 import * as React from 'react';
~~~~~~~

src/components/Box/Box.ts:19:56 - error TS7006: Parameter 'ref' implicitly has an 'any' type.

19 ({ as = 'div', className, testId, ...props }: Props, ref) => {
~~~

src/components/Button/ActionButton.tsx:1:19 - error TS7016: Could not find a declaration file for module 'react'. '/Users/apmlabs/dev/rainbowkit/packages/rainbowkit/node_modules/react/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/react if it exists or add a new declaration (.d.ts) file containing declare module 'react';

1 import React from 'react';
~~~~~~~

src/components/Button/ActionButton.tsx:12:24 - error TS2339: Property 'paddingX' does not exist on type 'unknown'.

12 paddingX: BoxProps['paddingX'];
~~~~~~~~~~

src/components/Button/ActionButton.tsx:13:24 - error TS2339: Property 'paddingY' does not exist on type 'unknown'.

13 paddingY: BoxProps['paddingY'];
~~~~~~~~~~

src/components/Button/ActionButton.tsx:15:23 - error TS2339: Property 'height' does not exist on type 'unknown'.

15 height?: BoxProps['height'];
~~~~~~~~

src/components/ChainModal/ChainModal.tsx:7:8 - error TS7016: Could not find a declaration file for module 'react'. '/Users/apmlabs/dev/rainbowkit/packages/rainbowkit/node_modules/react/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/react if it exists or add a new declaration (.d.ts) file containing declare module 'react';

7 } from 'react';
~~~~~~~

src/components/ChainModal/ChainModal.tsx:76:6 - error TS2741: Property 'children' is missing in type '{ onClose: () => void; open: boolean; titleId: string; }' but required in type 'DialogProps'.

76
~~~~~~

src/components/Dialog/Dialog.tsx:24:3
24 children: ReactNode;
~~~~~~~~
'children' is declared here.

src/components/ChainModal/ChainModal.tsx:77:8 - error TS2741: Property 'children' is missing in type '{ bottomSheetOnMobile: true; }' but required in type 'DialogContentProps'.

============

It seems like the issue is with tsc --emitDeclarationOnly but not sure why the types are not being generated - any thoughts? I tried with the latest version of tsc and node but no luck.

Thanks,
-Sedat

[seakkus]

Nevermind - I had not read the contribution instructions properly. Problem solved with pnpm.

[PPnaruto]

hey @seakkus , can you tell me, how did you resolve the env Problems ?, Currently I'm trying to set up the rainbowKit project locally by cloning it. while installing pnpm getting error like "missing RAINBOW_KIT_PROVIDER_API_KEY env".

[Adebesin-Cell]

@PPnaruto In the packages directory, under the example folder, add a .env file and include the value for RAINBOW_KIT_PROVIDER_API_KEY. Additionally, under the RainbowKit configuration, I mean rainbowkit folder in packages, add the same value for RAINBOW_KIT_PROVIDER_API_KEY. Here's how I did mine:

I'm not sure if it's necessary to include the .env.local file in the main project root as well. Let me know if this helps!

[PPnaruto]

Thanks @seakkus, I did the exact same way but still was getting the same error.
Where did you get the Provider_API_KEY, you kept it as empty string ?

[Adebesin-Cell]

Thanks @seakkus, I did the exact same way but still was getting the same error. Where did you get the Provider_API_KEY, you kept it as empty string ?

Hm, it should work, perhaps you share the error message? Let me see if there’s a project missing, cos in contribution guide it said to add API key to rainbow kit and example under packages.

I used one I saw in the project I think, they kept a default wallet connect key.