Error: Cannot find module `use-sync-external-store/shim/with-selector`

[sinnrrr]

Hello, thanks for such a great package!

I have some troubles with connecting web3-react to my application. I'm having the following error:

Error: Cannot find module '/Users/dmytro/Work/learn/web3-react/packages/example/node_modules/use-sync-external-store/shim/with-selector' imported from /Users/dmytro/Work/learn/web3-react/packages/example/node_modules/@web3-react/core/node_modules/zustand/esm/index.mjs
Did you mean to import use-sync-external-store/shim/with-selector.js?

Tried launching the official example under packages/example, but also got the same issue.

EDIT: I've detected, that it occurs when I'm destructuring from connector hooks (so the problem lies in initializeConnector function):

import { hooks } from "../connectors/metaMask";

const { useProvider } = hooks;

[NoahZinsmeister]

hm, i haven't seen this before. undoubtedly it's related to the v4 of zustand, which introduces use-sync-external-store (see pmndrs/zustand#550)

[BennyH26]

Having the same problem, can't figure out a workaround

[earthtojake]

+1 having the same problem, works in the example but not in our implementation, can't find a work around

[michaelxuwu]

Ran into the same issue with Next.js. I found importing dynamically with no SSR (as in the example) solved this for me.

[sinnrrr]

+1 having the same problem, works in the example but not in our implementation, can't find a work around

Did you try running example yourselves (on localhost)? It’s strange, because official example doesn’t work for me as well as my own implementation.

[BennyH26]

Ran into the same issue with Next.js. I found importing dynamically with no SSR (as in the example) solved this for me.

Using dynamic imports like the example fixed this problem for me. Thank you for the workaround until we can have a more robust solution!

[fjun99]

Ran into the same issue with Next.js. I found importing dynamically with no SSR (as in the example) solved this for me.

Using dynamic imports like the example fixed this problem for me. Thank you for the workaround until we can have a more robust solution!

This works for me. bypass this error just like you.

[BowgartField]

Is it possible to correct this issue ? this is very annoying @NoahZinsmeister

[mauver]

This problem is still not working on build mode.

dynamic loading is working on "yarn dev" only.

how to solve it?

[mmoderwell]

@mauver @BowgartField I believe I've got a solution! Strange to see this work but in /node_modules/@web3-react/core/node_modules/zustand/esm/index.mjs you should see the first two lines as:

import { useDebugValue } from 'react';
import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';

Add a .js extension to line two so you have:

import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector.js';

Never great editing stuff in `/node_modules/ but hopefully this works for ya'll as a temporary fix.

[pedroapfilho]

Maybe it's the version of Zustand used here? It should be added to the zustand library

[AzzouQ]

For those who use yarn, you can also add the following to your package.json without modifying anything in node_modules.

  "resolutions": {
    "zustand": "^3.6.9"
  }

It will force @web3-react to use the stable version of zustand instead of the beta (which is likely to cause the bug). Note that if you use another library that rely on zustand, that version will be used too.

With this or #379 (comment), there's a weird log in nextJS console:

error - ../src/index.ts (40:4) @ <unknown>
ReferenceError: window is not defined
null

@mmoderwell can you confirm this ? Or those are something on my own.

[sinnrrr]

@AzzouQ it seems like web3-react does not handle SSR, that is why the components, that make use of web3-react are loaded dynamically without SSR.

[AzzouQ]

Indeed, Adding .js or using resolution work without dynamic but only in dev.
When trying to build with SSR or SSG, dynamic is required for the build to not fail...