wallet-adapter: Incompatibility with NextJS (11.0.0)

When using the latest version of NextJS (with TS), I am unable to use the @solana/wallet-adapter packages.

***/node_modules/@solana/wallet-adapter-react/lib/index.js:1
export * from './ConnectionProvider';
^^^^^^

SyntaxError: Unexpected token 'export'

I’m quite positive it has to do with how the packages are transpiled, and wouldve hoped adding them to the list of transpiled code in my nextjs project (using next-transpile-modules) would work, but unfortunately I was not able to get them working (edit: see update bellow). Any tips? If I get it working I’d be happy to submit a PR for either a readme update or change.

tsconfig:

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": false,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

nextjs config:

module.exports = {
  webpack5: true
}

Update:

I was finally able to get it working taking quite a detour, I’ve had to change my nextjs config to the following:

/* eslint-disable @typescript-eslint/no-var-requires */
const withTM = require('next-transpile-modules')([
  '@solana/wallet-adapter-base',
  '@solana/wallet-adapter-bitpie',
  '@solana/wallet-adapter-coin98',
  '@solana/wallet-adapter-ledger',
  '@solana/wallet-adapter-mathwallet',
  '@solana/wallet-adapter-phantom',
  '@solana/wallet-adapter-react',
  '@solana/wallet-adapter-solflare',
  '@solana/wallet-adapter-sollet',
  '@solana/wallet-adapter-solong',
  '@solana/wallet-adapter-torus',
  '@solana/wallet-adapter-wallets',
  '@project-serum/sol-wallet-adapter',
])

module.exports = withTM({
  webpack5: true
})

That allowed me to use the dependencies, but then the next error popped up:

window is not defined

which means of the packages has a dependency on window (not possible on the server) so I had to dynamically load the wallet provider like so:

ClientWalletProvider.tsx:

import type { WalletProviderProps } from '@solana/wallet-adapter-react'
import { WalletProvider } from '@solana/wallet-adapter-react'
import {
  getLedgerWallet,
  getMathWallet,
  getPhantomWallet,
  getSolflareWallet,
  getSolletWallet,
  getSolongWallet,
} from '@solana/wallet-adapter-wallets'
import type { ReactNode } from 'react'
import { useMemo } from 'react'

export function ClientWalletProvider(
  props: Omit<WalletProviderProps, 'wallets'> & { children: ReactNode }
): JSX.Element {
  const wallets = useMemo(
    () => [
      getPhantomWallet(),
      getSolflareWallet(),
      getLedgerWallet(),
      getSolongWallet(),
      getMathWallet(),
      getSolletWallet(),
    ],
    []
  )

  return <WalletProvider wallets={wallets} {...props} />
}

and in my _App.tsx:

import type { AppProps } from 'next/app'
import dynamic from 'next/dynamic'

const WalletProvider = dynamic(() => import('../ClientWalletProvider'), {
  ssr: false,
})

export default function App({ Component, pageProps }: AppProps): JSX.Element {
  return (
    <WalletProvider autoConnect>
      <Component {...pageProps} />
    </WalletProvider>
  )
}

This works for now, but it is quite the detour. Any other ideas?