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

[aslaker]

I have a starter setup with NextJS and tRPC for my backend logic. I haven't added many libraries except for ChakraUI. I have added the quick start code for the solana-labs/wallet-adapter, but ran into this issue when trying to start the application. I have also added all of the libraries mentioned in the README for the wallet adapter.

To Reproduce Steps to reproduce the behavior: Start the application with a basic setup

Expected behavior The application should start up with no error

Screenshots

Desktop (please complete the following information):

• OS: macOS Monterey 12.5
• Browser Brave
• Version 1.42.97

Additional context Below is the _app.tsx file I am using.

import { ChakraProvider } from '@chakra-ui/react';
import { httpBatchLink } from '@trpc/client/links/httpBatchLink';
import { loggerLink } from '@trpc/client/links/loggerLink';
import { withTRPC } from '@trpc/next';
import { NextPage } from 'next';
import { AppProps } from 'next/app';
import { AppType } from 'next/dist/shared/lib/utils';
import { ReactElement, ReactNode, useMemo } from 'react';
import superjson from 'superjson';
import { AppRouter } from '~/server/routers/_app';
import { SSRContext } from '~/utils/trpc';
import {
  ConnectionProvider,
  WalletProvider,
} from '@solana/wallet-adapter-react';
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import { FakeWalletAdapter } from '@solana/wallet-adapter-wallets';
import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
import { clusterApiUrl } from '@solana/web3.js';

// Default styles that can be overridden by your app
require('@solana/wallet-adapter-react-ui/styles.css');

export type NextPageWithLayout = NextPage & {
  getLayout?: (page: ReactElement) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

const MyApp = (({ Component, pageProps }: AppPropsWithLayout) => {
  // The network can be set to 'devnet', 'testnet', or 'mainnet-beta'.
  const network = WalletAdapterNetwork.Mainnet;

  // You can also provide a custom RPC endpoint.
  const endpoint = useMemo(() => clusterApiUrl(network), [network]);

  const wallets = useMemo(
    () => [
      /**
       * Select the wallets you wish to support, by instantiating wallet adapters here.
       *
       * Common adapters can be found in the npm package `@solana/wallet-adapter-wallets`.
       * That package supports tree shaking and lazy loading -- only the wallets you import
       * will be compiled into your application, and only the dependencies of wallets that
       * your users connect to will be loaded.
       */
      new FakeWalletAdapter(),
    ],
    [],
  );
  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets} autoConnect>
        <ChakraProvider>
          <WalletModalProvider>
            <Component {...pageProps} />
          </WalletModalProvider>
        </ChakraProvider>
      </WalletProvider>
    </ConnectionProvider>
  );
}) as AppType;

function getBaseUrl() {
  if (typeof window !== 'undefined') {
    return '';
  }
  // reference for vercel.com
  if (process.env.VERCEL_URL) {
    return `https://${process.env.VERCEL_URL}`;
  }

  // // reference for render.com
  if (process.env.RENDER_INTERNAL_HOSTNAME) {
    return `http://${process.env.RENDER_INTERNAL_HOSTNAME}:${process.env.PORT}`;
  }

  // assume localhost
  return `http://localhost:${process.env.PORT ?? 3000}`;
}

export default withTRPC<AppRouter>({
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  config() {
    /**
     * If you want to use SSR, you need to use the server's full URL
     * @link https://trpc.io/docs/ssr
     */
    return {
      /**
       * @link https://trpc.io/docs/links
       */
      links: [
        // adds pretty logs to your console in development and logs errors in production
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === 'development' ||
            (opts.direction === 'down' && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
        }),
      ],
      /**
       * @link https://trpc.io/docs/data-transformers
       */
      transformer: superjson,
      /**
       * @link https://react-query.tanstack.com/reference/QueryClient
       */
      // queryClientConfig: { defaultOptions: { queries: { staleTime: 60 } } },
    };
  },
  /**
   * @link https://trpc.io/docs/ssr
   */
  ssr: true,
  /**
   * Set headers or status code when doing SSR
   */
  responseMeta(opts) {
    const ctx = opts.ctx as SSRContext;

    if (ctx.status) {
      // If HTTP status set, propagate that
      return {
        status: ctx.status,
      };
    }

    const error = opts.clientErrors[0];
    if (error) {
      // Propagate http first error from API calls
      return {
        status: error.data?.httpStatus ?? 500,
      };
    }
    // For app caching with SSR see https://trpc.io/docs/caching
    return {};
  },
})(MyApp);

[jdponomarev]

same issue for me

[jordaaash]

Please check out the starter project provided for Next: https://github.com/solana-labs/wallet-adapter/tree/master/packages/starter/nextjs-starter

I just tested this today, so I know it works. You can drag that directory out of the repo, run npm install and npm run dev and it should work.

[jdponomarev]

I could fix it by transpiling modules.. Just put it in next.config.js `/* @type {import('next').NextConfig} / const withTM = require('next-transpile-modules')([ '@solana/wallet-adapter-react', '@solana/wallet-adapter-base', '@solana/wallet-adapter-wallets', '@solana/wallet-adapter-react-ui', '@solana/wallet-adapter-react-ui', '@solana-mobile/wallet-adapter-mobile', '@solana/wallet-adapter-bitkeep', '@solana/wallet-adapter-bitpie', '@solana/wallet-adapter-blocto', '@solana/wallet-adapter-brave', '@solana/wallet-adapter-clover', '@solana/wallet-adapter-coin98', '@solana/wallet-adapter-coinbase', '@solana/wallet-adapter-avana', '@solana/wallet-adapter-coinhub', '@solana/wallet-adapter-exodus', '@solana/wallet-adapter-glow', '@solana/wallet-adapter-huobi', '@solana/wallet-adapter-krystal', '@solana/wallet-adapter-particle', '@solana/wallet-adapter-hyperpay', '@solana/wallet-adapter-ledger', '@solana/wallet-adapter-mathwallet', '@solana/wallet-adapter-neko', '@solana/wallet-adapter-nightly', '@solana/wallet-adapter-salmon', '@solana/wallet-adapter-strike', '@solana/wallet-adapter-nufi', '@solana/wallet-adapter-phantom', '@solana/wallet-adapter-tokenary', '@solana/wallet-adapter-safepal', '@solana/wallet-adapter-saifu', '@solana/wallet-adapter-sky', '@solana/wallet-adapter-slope', '@solana/wallet-adapter-sollet', '@solana/wallet-adapter-solflare', '@solana/wallet-adapter-solong', '@solana/wallet-adapter-spot', '@solana/wallet-adapter-tokenpocket', '@solana/wallet-adapter-torus', '@solana/wallet-adapter-trust', '@solana/wallet-adapter-backpack', '@solana/wallet-adapter-fake', '@solana/wallet-adapter-keystone', '@solana/wallet-adapter-walletconnect' ]);

const nextConfig = { reactStrictMode: true, swcMinify: true, experimental: { images: { allowFutureImage: true } }, output: 'standalone', productionBrowserSourceMaps: true, }

module.exports = withTM(nextConfig);`

[jordaaash]

Transpiring modules shouldn't be required (the starter project doesn't do this). But glad you found something that worked! I'm going to close this since it's a build config issue.

[jdponomarev]

@jordansexton the starter project does not work.. same issue

[kgilliam125]

Dropping by to say I'm having the same issue. I can even redeploy prior working builds of my project and hit the same failure. Last working deploy seems to be on Tuesday Aug 16.

Haven't been able to find many other leads and no build changes on my end since then.

[aslaker]

@jordansexton I'm not sure this solves my problem though. I won't always be starting with your starter project, so I need to have a way to add the wallet to an existing project. In addition, the starter project that you have extends tsconfig files that include relative paths to your root project, which makes it harder to pull it out of your project and use it as is.

I guess I just want to get an understanding of what the issue is. Is it a dependency problem, is it a typescript problem? VsCode finds the ConnectionProvider fine, but it seems like there is an issue with the export in the esm file. It looks like someone else opened up a ticket for this as well about 4 hours ago.

I'll hop in and take a look today to see if there is anything I can find, and open a PR for.

[grhbit]

@jordansexton

The starter project also doesn't work outside of monorepo. I just removed pnpm-workspace.yaml and tried building a starter project. And then I got errors.

[jordaaash]

Reopened, but can you thread replies in #532?

[jordaaash]

Update: https://github.com/solana-labs/wallet-adapter/issues/532#issuecomment-1221687443