Cannot find module @mui/icons-material in v0.16.26

[Aiyualive]

It pertains to wallet-adapter-material-ui. I made a post about it on stackoverflow and I essentially had to stick with v0.16.22 to resolve the issue.

https://stackoverflow.com/questions/75504022/cannot-find-node-module-after-deleting-yarn-lock-package-lock-json?noredirect=1#comment133223432_75504022

[d-reader-josip]

Can confirm, same thing

Might be related to this: https://github.com/solana-labs/wallet-adapter/pull/728/files#diff-0a9b3997ed030b2a1ffc834f3f7b54133507367ac0e15673c01c2b57ab21b10aR3-R11

or this: 5406167#r101354991

[mcintyre94]

Thanks for this, those changes definitely look like they could be causing an issue here so I'd like to take a closer look at this. I'm having trouble reproducing it though, do you have an example repo by any chance?

Here's what I tried:

• Create a new NextJS app with Typescript:

npx create-next-app --typescript wa-test

• Install packages including material-ui:

npm install @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-material-ui @solana/wallet-adapter-wallets

• Verify the installed version is 0.16.26:

$ grep material-ui package-lock.json
        "@solana/wallet-adapter-material-ui": "^0.16.26",
    "node_modules/@solana/wallet-adapter-material-ui": {
      "resolved": "https://registry.npmjs.org/@solana/wallet-adapter-material-ui/-/wallet-adapter-material-ui-0.16.26.tgz",
    "@solana/wallet-adapter-material-ui": {
      "resolved": "https://registry.npmjs.org/@solana/wallet-adapter-material-ui/-/wallet-adapter-material-ui-0.16.26.tgz",

• Remove package-lock.json, run npm install again, verify the installed version is again 0.16.26 . This worked correctly for me

• Remove package-lock.json, run yarn, verify the installed version in yarn.lock:

$ grep material-ui yarn.lock        
"@solana/wallet-adapter-material-ui@^0.16.26":
  resolved "https://registry.yarnpkg.com/@solana/wallet-adapter-material-ui/-/wallet-adapter-material-ui-0.16.26.tgz#c2220119efe33c3923b83294b1b7cf621df622b6"

So it looks like using both npm and yarn I can generate the lockfile with the 0.16.26 version without any issues.

[d-reader-josip]

@mcintyre94 I have my own repo which you can start. If it's too bothersome for you, I can strip it off and have you reproduce on a more bare bone version of it: https://github.com/d-reader-organization/d-reader-frontend

1. clone the repository and check into main
2. npm install
3. copy .env values as pasted below
4. npm run dev (no issues present)
5. npm install @solana/wallet-adapter-material-ui@latest (issues arise)
6. npm install @solana/wallet-adapter-material-ui@0.16.25 (issues gone away)

NEXT_PUBLIC_API_ENDPOINT='https://api.dev.dreader.io'
NEXT_AWS_BUCKET_NAME=d-reader-dev
NODE_ENV='development'
PORT=3000

One thing to bare in mind, but I don't think it actually affect this issue: I rely on my own utility npm package @open-sauce/solomon which is also using a few dependencies from @solana/... org. Again, I don't believe this package is causing this issue in any way, or enabling it. In case you have doubts, solomons source code can be found here: https://github.com/open-sauce-labs/solomon

[mcintyre94]

Thanks! I was mis-understanding where the error happens, I thought it was installing/generating lock files. I'm able to repro this on my test next app:

• Missing dependencies: npm install @emotion/styled @emotion/react

• Add import { WalletConnectButton } from "@solana/wallet-adapter-material-ui" + <WalletConnectButton /> to pages/index.tsx

I guess the next mystery is why our example app seems to work, and if that gives any clues for fixing it here. I noticed that it wasn't hardcoded to the latest version as I thought it was, but it continues to work if I change its dependency to ^0.16.26.

[josip-volarevic]

I have a hunch but can't express myself properly without a PC nearby. I'll look into this in a day or two if the issue persists.

Till then maybe (if this is even possible??) unpublish a faulty version to safe a few devs from headaches?

[steveluscher]

I just hit this and it nearly killed me. Commenting the <ListItemIcon> components out in packages/ui/material-ui/src/WalletMultiButton.tsx makes the problem go away.

I guess I'll keep digging to see what happened here.

[steveluscher]

Prediction: this is 1000% going to come down to two mismatched versions of React existing.

[steveluscher]

Nope. mui/material-ui#35233