Can't find ConnectionProvider (Wallet No Longer Works) #532

tiagoapp · 2022-08-21T08:28:33Z

Stopped working for me this night in all projects I've after update (React's Next.js and tried on Svelte too)

Error [ERR_MODULE_NOT_FOUND]: Cannot find module /app/node_modules/@solana/wallet-adapter-react/lib/esm/ConnectionProvider

danvernon · 2022-08-21T10:09:33Z

+1

josip-volarevic · 2022-08-21T10:45:26Z

Just spent a while trying to troubleshoot the same problem.

I'm getting the following error when trying to run my nextjs app:

error - Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\Users\username\project-name\node_modules\@solana\wallet-adapter-material-ui\lib\esm\useWalletDialog' imported from C:\Users\username\project-name\node_modules\@solana\wallet-adapter-material-ui\lib\esm\index.js
    at new NodeError (node:internal/errors:387:5)
    at finalizeResolution (node:internal/modules/esm/resolve:429:11)
    at moduleResolve (node:internal/modules/esm/resolve:1006:10)
    at defaultResolve (node:internal/modules/esm/resolve:1214:11)
    at nextResolve (node:internal/modules/esm/loader:165:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:844:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:431:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_MODULE_NOT_FOUND',
  page: '/'
}

Same thing for other @solana/wallet-adapter libraries. Cannot find WalletProvider, ConnectionProvider, useWalletDialog...

My repository can be found here: https://github.com/josip-volarevic/narentines-holders-only/tree/wallet-adapter-issue
I'll leave the wallet-adapter-issue branch live for reproduction purposes until the issue is fixed

As an additional note, I've tried a few things:

I have another React app that uses older versions of wallet-adapter libraries. I've updated all dependencies there to the latest release and the app works fine! This leads me to believe it's an issue for next applications, or my next application has some faulty configuration
I've tried downgrading dependencies from my faulty nextjs repository and the issue persists. This leads me to believe that the issue is not in the latest release that happened yesterday
My nextjs repository worked yesterday with older dependencies, it broke today when I tweaked a lot of stuff (some of them being dependency updates to @latest). This leads me to believe that stuff broke last night with the newest release.

My React app which is working used the following versions:

"@solana/wallet-adapter-base": "^0.9.5",
"@solana/wallet-adapter-material-ui": "^0.16.4",
"@solana/wallet-adapter-react": "^0.15.4",
"@solana/wallet-adapter-wallets": "^0.15.5",
"@solana/web3.js": "^1.32.0",

It also worked when I've updated everything to the @latest:

"@solana/wallet-adapter-base": "^0.9.14",
"@solana/wallet-adapter-material-ui": "^0.16.12",
"@solana/wallet-adapter-react": "^0.15.16",
"@solana/wallet-adapter-wallets": "^0.18.3",
"@solana/web3.js": "^1.53.0",

Nextjs app didn't work with either version set

I can create a proper minimal error reproduction repository tomorrow in case somebody doesn't do it in the meantime.

tiagoapp · 2022-08-21T11:11:09Z

I’ve been working yesterday on both Next.js and SvelteKit (this one uses Vite instead Webpack) apps and it was working fine.

This morning after updates / trying new fresh new setups none works. Tried with different packet managers too (yarn and pnpm)

josip-volarevic · 2022-08-21T11:17:37Z

@tiagoappetite I assume your repos work with older package versions?

anoushk1234 · 2022-08-21T11:32:55Z

Same issue

grhbit · 2022-08-21T11:55:52Z

Same issue.

And these are the last versions working for me.

{
    "@solana/wallet-adapter-base": "0.9.13",
    "@solana/wallet-adapter-react": "0.15.15",
    "@solana/wallet-adapter-react-ui": "0.9.13",
    "@solana/wallet-adapter-wallets": "0.17.2"
}

danvernon · 2022-08-21T13:11:47Z

@tiagoappetite I assume your repos work with older package versions?

i think some dependencies are causing it, if i yarn in any project that did works - it breaks

jordaaash · 2022-08-21T14:57:44Z

Thanks for all the reports, I'll work on this today.

First I need to isolate the issue, to see if it's reproducible within the repo, and if not, what causes it.

Can you test something and tell me if it works? (I'm typing shell cmds from my phone apologies for any mistakes) --

git clone https://github.com/solana-labs/wallet-adapter.git
cp -R wallet-adapter/packages/starter/nextjs-starter .
cd nextjs-starter
npm install
npm run dev

aslaker · 2022-08-21T15:18:13Z

@jordansexton I just ran those commands and here is the error that I get. I wonder if it has to do with some server side specific code in a dependency trying to run on the frontend in NextJS. I noticed a similar issue yesterday with @gokiprotocol/walletkit. Any chance it is coming from a dependency that both projects rely on?

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/adamslaker/personal/vanth/test/nextjs-starter/node_modules/@solana/wallet-adapter-base/lib/esm/adapter' imported from /Users/adamslaker/personal/vanth/test/nextjs-starter/node_modules/@solana/wallet-adapter-base/lib/esm/index.js

tiagoapp · 2022-08-21T16:10:30Z

@jordansexton following your steps (Next.js) I do get similar error:

Error: Cannot find module '/Users/tiago/wallet-adapter/packages/starter/nextjs-starter/node_modules/@solana/wallet-adapter-base/lib/esm/adapter' imported from /Users/tiago/wallet-adapter/packages/starter/nextjs-starter/node_modules/@solana/wallet-adapter-base/lib/esm/index.js

And in case this helps, here's the issues getting on non-React frameworks that were working fine just yesterday.

Both Next.js and Nuxt.js seems to suffer from a rather similar error

Nuxt.js (Vue)

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/tiago/nuxt3-solana/node_modules/@solana/wallet-adapter-avana/lib/esm/adapter' imported from /Users/tiago/nuxt3-solana/node_modules/@solana/wallet-adapter-avana/lib/esm/index.js

Svelte

We can probably ignore Svelte as it seems a whole different thing and out of scope of this repo... just for reference, since it was working yesterday before those updates.

This file is being treated as an ES module because it has a '.js' file extension and '/Users/tiago/my-app/node_modules/@solana/wallet-adapter-base/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

kgilliam125 · 2022-08-21T16:44:13Z

Curious thing I'm seeing (and seen in other comments), reverting to a prior version of wallet-adapter does not seem to resolve this issue. This makes me think that the problem is with a dependency which is set via ^x.y.z and would grab the most recent version per the rule.

Look through the react and base package.json the only one that stands out it @solana/web3.js which released a new version, 1.53.1, a bit before we started seeing wallet-adapter build failures.

Seems unlikely that the web3.js build itself is bad, but could possibly be a small change in usage that is cascading?

jordaaash · 2022-08-21T16:45:03Z

What if you use npm overrides / yarn resolutions to force a specific pinned exact version?

jordaaash · 2022-08-21T16:53:11Z

I'll be on my computer soon to fix this. Offhand, it sounds like what's going on is that this is related to an aspect of the change I made yesterday.

We still ship CJS and ESM builds, but the ESM build outputs are no longer .mjs files, just .js files. Some build tools might have been broken by this change.

kgilliam125 · 2022-08-21T17:01:05Z

What if you use npm overrides / yarn resolutions to force a specific pinned exact version?

Put this in real quick and ran a build, still the same issue as above. May have been a false lead. Will dig more on my end when I get back to my computer.

tiagoapp · 2022-08-21T17:18:00Z

The problem seems to be from the @solana/wallet-adapter-base

I've a build from 5 days ago with version 0.9.12 it works (the wallets dependencies are asking for this version).

Doing an update changes it to version 0.9.14
So even if we bring it down to 0.9.12 it still doesn't works as all the wallets have version 0.9.14 as dependencies

Before Update

 "@solana/wallet-adapter-avana": {
      "version": "0.1.2",
      "requires": {
        "@solana/wallet-adapter-base": "^0.9.12"
      }
}

After Update

   "@solana/wallet-adapter-avana": {
      "version": "0.1.3",
      "requires": {
        "@solana/wallet-adapter-base": "^0.9.14"
      }

So even you specify on package.json

    "@solana/wallet-adapter-base": "0.9.12",
    "@solana/wallet-adapter-react": "0.15.15",
    "@solana/wallet-adapter-react-ui": "0.9.13",
    "@solana/wallet-adapter-wallets": "0.17.2"

It still doesn't works as the wallets are requiring "@solana/wallet-adapter-base": "^0.9.14"

jordaaash · 2022-08-21T17:45:03Z

Okay, an informational update --

This fails:

git clone https://github.com/solana-labs/wallet-adapter.git
cp -R wallet-adapter/packages/starter/nextjs-starter .
cd nextjs-starter
npm install
npm run dev

This works:

git clone https://github.com/solana-labs/wallet-adapter.git
cp -R wallet-adapter/packages/starter/react-ui-starter .
cd react-ui-starter
npm install
npm start

The difference here is Next.js vs Parcel. My guess is that Parcel is handling imports without explicit .mjs extensions, and Next isn't.

Working on configuration that will resolve this.

jordaaash · 2022-08-21T17:57:25Z

Another data point -- the create-react-app-starter package works. But because Webpack 5 does not handle imports of ESM without .mjs extensions, we have to configure it to do so: https://github.com/solana-labs/wallet-adapter/blob/78b42f46baa200edae60d6a48defa7cd5fd77541/packages/starter/create-react-app-starter/config-overrides.js#L15-L20

Next.js used to use Webpack 5, but I'm confused as to whether it does anymore.

Their docs indicate it's using their Rust compiler, SWC: https://nextjs.org/docs/advanced-features/compiler

However, their docs also indicate you can configure Webpack: https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config

This is what I'll try next.

jordaaash · 2022-08-21T18:22:30Z

Okay, so it appears the difference is that SWC is a replacement for Babel, but Webpack 5 is still used.

Adding this next.config.js file:

/** @type {import('next').NextConfig} */
module.exports = {
    reactStrictMode: true,
    webpack(config, context) {
        console.log(config.module.rules);
        process.exit(1);

        return config;
    },
};

We get this:

[
  { test: /\.m?js/, resolve: { fullySpecified: false } },
  /* ... */
]

This indicates Next is already configured by default to handle .js and .mjs files imported without an extension. This is good and what we'd expect, but unfortunately suggests the problem lies elsewhere.

jordaaash · 2022-08-21T18:56:05Z

Curiously, this issue is also affecting @solana/spl-token, which does build .mjs files:
solana-labs/solana-program-library#3502

tiagoapp · 2022-08-21T20:23:43Z

I've just tried start a new React app with Vite... and it also worked just fine!!

Which puzzles me given that Nuxt.js uses Vite and was also giving an error similar to Next.js Error [ERR_MODULE_NOT_FOUND]: Cannot find module....

jordaaash · 2022-08-21T20:39:14Z

It seems like this may be related to an open issue with Next.js: vercel/next.js#39375

I also tried using the TS config option, "moduleResolution": "nodeNext" and it seems to have no effect. Related: vercel/next.js#38854

However -- I was able to fix the issue locally in a project by manually changing all the imports without extensions to .js.

So what I might need to do is change all of the imports in Wallet Adapter to do this. I'll then have to make sure this doesn't break Parcel, Webpack, etc.

tiagoapp · 2022-08-21T20:51:50Z

I was actually trying something similar.

Those are the default TS config settings on a new React app (Vite)... tried replicate them over Next / Nuxt without any success.

  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  }

josip-volarevic · 2022-08-21T20:55:16Z

Pretty much tried the same ts configuration with nodenext and no luck as well

kgilliam125 · 2022-08-21T20:59:15Z

@jordansexton I opened a support ticket w/ Vercel yesterday related to this. They got back and I brought this thread to their attention.

One thing they suggested which doesn't seem to be the issue, but noting in case it helps someone, specifically using Yarn 3 on Vercel:

We're investigating different options on our side to provide a long term resolution, however in the short term please could you create (or modify if you have it already) your .yarnrc.yml file to include the following setting and then try a few redeploys to see if you experience the same issues on your side:
cacheFolder: .vercel/cache/yarn

jordaaash · 2022-08-21T20:59:27Z

Anyone know if there's an eslint rule that will change all imports to explicit .js? Wallet Adapter currently has implicit imports and also index imports so it would be great to have something that will intelligently fix these now, and also scold us if we don't use them.

jordaaash · 2022-08-21T21:01:28Z

@kgilliam125 interesting, thanks for that context. Unfortunately based on the testing in this thread, this also affects projects that don't use yarn, just using npm.

jordaaash · 2022-08-22T01:32:44Z

Woof. Not how I was planning on spending the day!

This is fixed. Please test it out! Use these dependencies. Probably good to nuke your node_modules to be safe.

{
    "@solana/wallet-adapter-base": "^0.9.15",
    "@solana/wallet-adapter-react": "^0.15.17",
    "@solana/wallet-adapter-react-ui": "^0.9.15",
    "@solana/wallet-adapter-wallets": "^0.18.4",
}

Unfortunately there is no good automated solution to this. Things that didn't work:

Things that did work:

Node module resolution
Regular Expression find/replace
Lots of trial and error

jordaaash · 2022-08-22T01:47:50Z

Correction: use "@solana/wallet-adapter-wallets": "^0.18.4-alpha.1", the Ledger wallet adapter had an import issue.

jordaaash · 2022-08-22T01:55:16Z

BOOM

aslaker · 2022-08-22T01:59:14Z

@jordansexton you are a gentleman and a scholar. Thank you so much for putting so much time into figuring this out!

jordaaash · 2022-08-22T01:59:51Z

Production release going out now.

jordaaash · 2022-08-22T02:28:07Z

https://twitter.com/jordaaash/status/1561540587127353344

These should work!

{
    "@solana/wallet-adapter-base": "^0.9.15",
    "@solana/wallet-adapter-react": "^0.15.17",
    "@solana/wallet-adapter-react-ui": "^0.9.15",
    "@solana/wallet-adapter-wallets": "^0.18.4",
}

Somnus007 · 2022-08-22T02:46:59Z

It works well. Thanks @jordansexton !

silvestrevivo · 2022-08-24T22:39:47Z

Opening a new issue about this change and SvelteKit #541 since @tiagoappetite reported it.

It is out of the scope of this project, but since some frameworks like SvelteKit are working with Vite, it would be interesting to find a solution for them.

jordaaash · 2022-08-25T01:20:14Z

Fixed for CJS projects by #542 and published.

tiagoapp changed the title ~~Can't find ConnectionProvider~~ Can't find ConnectionProvider (Wallet No Longer Works) Aug 21, 2022

aslaker mentioned this issue Aug 21, 2022

Error [ERR_MODULE_NOT_FOUND]: Cannot find module ConnectionProvider imported from @solana/wallet-adapter-react/lib/esm/index.js #531

Closed

jordaaash mentioned this issue Aug 21, 2022

Error to import @solana/spl-token ESM module solana-labs/solana-program-library#3502

Closed

jordaaash mentioned this issue Aug 22, 2022

Fix ESM builds by using explicit file extensions #533

Merged

jordaaash mentioned this issue Aug 22, 2022

Cannot find module @solana/wallet-adapter-base #534

Closed

jordaaash closed this as completed in #533 Aug 22, 2022

kgilliam125 mentioned this issue Aug 28, 2022

Import error during build for esm/adapter in new wallet-adapter versions #545

Closed

jordaaash mentioned this issue Aug 28, 2022

Need eslint config to enforce .js file extensions #546

Closed

Can't find ConnectionProvider (Wallet No Longer Works) #532

Can't find ConnectionProvider (Wallet No Longer Works) #532

Comments

tiagoapp commented Aug 21, 2022

danvernon commented Aug 21, 2022

josip-volarevic commented Aug 21, 2022 • edited Loading

tiagoapp commented Aug 21, 2022

josip-volarevic commented Aug 21, 2022 • edited Loading

anoushk1234 commented Aug 21, 2022

grhbit commented Aug 21, 2022

danvernon commented Aug 21, 2022

jordaaash commented Aug 21, 2022

aslaker commented Aug 21, 2022 • edited Loading

tiagoapp commented Aug 21, 2022 • edited Loading

kgilliam125 commented Aug 21, 2022

jordaaash commented Aug 21, 2022

jordaaash commented Aug 21, 2022

kgilliam125 commented Aug 21, 2022

tiagoapp commented Aug 21, 2022 • edited Loading

jordaaash commented Aug 21, 2022 • edited Loading

jordaaash commented Aug 21, 2022 • edited Loading

jordaaash commented Aug 21, 2022

jordaaash commented Aug 21, 2022

tiagoapp commented Aug 21, 2022 • edited Loading

jordaaash commented Aug 21, 2022

tiagoapp commented Aug 21, 2022 • edited Loading

josip-volarevic commented Aug 21, 2022

kgilliam125 commented Aug 21, 2022

jordaaash commented Aug 21, 2022

jordaaash commented Aug 21, 2022

jordaaash commented Aug 22, 2022 • edited Loading

jordaaash commented Aug 22, 2022

jordaaash commented Aug 22, 2022

BOOM

aslaker commented Aug 22, 2022

jordaaash commented Aug 22, 2022

jordaaash commented Aug 22, 2022

Somnus007 commented Aug 22, 2022

silvestrevivo commented Aug 24, 2022

jordaaash commented Aug 25, 2022

josip-volarevic commented Aug 21, 2022 •

edited

Loading

josip-volarevic commented Aug 21, 2022 •

edited

Loading

aslaker commented Aug 21, 2022 •

edited

Loading

tiagoapp commented Aug 21, 2022 •

edited

Loading

tiagoapp commented Aug 21, 2022 •

edited

Loading

jordaaash commented Aug 21, 2022 •

edited

Loading

jordaaash commented Aug 21, 2022 •

edited

Loading

tiagoapp commented Aug 21, 2022 •

edited

Loading

tiagoapp commented Aug 21, 2022 •

edited

Loading

jordaaash commented Aug 22, 2022 •

edited

Loading