React examples do not work

[ngmisl]

getting a

Unhandled Runtime Error TypeError: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Failed to convert value to 'CSSStyleSheet'.

[xzilja]

We'll need more details on this i.e. how did you set up the example, did you change anything etc. Also did you follow https://github.com/WalletConnect/web3modal/blob/V2/.github/docs/development.md

[ngmisl]

Download and yarn installed. Setup a dot env

[xzilja]

Just pulled fresh repo for V2 branch and had no issues. Did you run yarn dev and yarn dev:react in separate terminal tabs? Also check if you are using yarn v1

[leoanhvig]

I also got the same error.

[leoanhvig]

[xzilja]

@leoanhvig I noticed you are cd'ing into examples folder to execute commands, ensure you do this

1. Pull repo
2. Run yarn install; yarn build; yarn dev from the root of the monorepo
3. Run yarn dev:react in a separate terminal window from the root of the monorepo

yarn dev only starts packager for the monorepo, you need to execute separate dev commands (in this case react) for each example afterwards.

[leoanhvig]

i pulled back the repo again, followed the steps you instructed but when i run yarn build it still has the error, run yarn dev:react it keeps giving the css error as above

[xzilja]

Really strange, will look into this once we release 2.1, but this same setup is ran by our devs locally and on our CI's. Did you by any chance modify the examples somehow, or all of this is fresh from the github repo?

[leoanhvig]

I just added the .env.local file like the following and didn't modify any of the repo's files

[flopez7]

I also followed the steps you mentioned without making any changes in the code and I got the same error

[xzilja]

@leoanhvig @flopez7 @ngmisl what are your node / yarn versions? And are you also setting up env file in other examples (react-standalone)?

[flopez7]

@0xAsimetriq Standalone worked for me. I'm using node v18.12.1 and yarn 1.22.19

[shavidzet]

A very related issue here with examples. I tested examples/react and examples/react-standalone.

Steps to reproduce:

1. Navigate to examples/react or examples/react-standalone
2. Install npm dependencies by running: yarn install
3. Up and running the app by running: yarn dev
4. Visiting the app in the browser.

Specs:

---

Related with https://github.com/WalletConnect/web3modal/issues/828#issuecomment-1384940716

[leoanhvig]

@0xAsimetriq

[leoanhvig]

i have just run react-standalone and got the same error

[xzilja]

Just in case, but which browsers are you running this in, do they support web components?

[shavidzet]

@0xAsimetriq Yeah, it's supported by all modern browsers: https://caniuse.com/?search=web%20components

This issue is not related to browser compatibility.

[memochou1993]

I got the same error

[SeongHo-Won]

i have just run react-standalone and got the same error too

[xzilja]

@SeongHo-Won DO you mean nextjs-standalone?

Also could you please outline which steps you performed before getting that error (the more details the better 🙏 )

[Exaustia]

Hello, Get the same error to. My step is: Pull the github, navigate in examples/nextJS folder then

• Updated the .env with my project ID
• yarn install
• yarn dev

My node version: v18.14.0 Then got this error :

[0xjaden]

same error

[xzilja]

After several attempts of trying to recreate the issue, we were not able to, so will be closing this.

However, I recorded a video of me getting our lab example going from the scratch, I hope it can help (basically same flow for any other example).

In the video I

1. Clone / Download the project (un-zip it if needed)
2. Install dependencies
3. While dependencies are installing I grab my projectID
4. Once installed, I add .env.local file with my project id to example
5. I then build the monorepo
6. I run yarn dev in first terminal window to build all packages in watch mode
7. I then run yarn dev:lab to run laboratory example in a separate terminal window

Remember, all of these commands are ran from a monorepo root. In your own apps you can just reference the examples, you don't need to compile monorepo since in your case dependencies will be installed from npm not local.

https://user-images.githubusercontent.com/3154053/225848425-8b999662-c169-4e42-8329-8820a7e40d70.mov