QUESTION: Did someone manage to get this working with Next.js

[munanadi]

There seems to be some issue with npm packages being transpiled with Next.js.

This looks like an issue on Next.js side as sol-wallet-adapter works fine. Just curious if someone figure out a good config file to get this working!

[ElvisYong]

Hey @Aadhinana not sure if this will help but I've gotten mine to work by using next-transpile-modules. My next.config.js looks something like this:

const withTM = require('next-transpile-modules')([
    '@project-serum/sol-wallet-adapter',
    '@gokiprotocol/walletkit',
    '@saberhq/use-solana',
]);

/** @type {import('next').NextConfig} */
module.exports = withTM({
    reactStrictMode: true,
    webpack5: true,
});

[munanadi]

I did try this but this does not seem to work as well. I have a barebones <ConnectWalletButton> and a disconnect()

[ElvisYong]

@Aadhinana Would you be able to provide any form of error or code snippets so we can possibly understand why it does not work? Thanks!

[smrnjeet222]

error - ./node_modules/@saberhq/use-solana/dist/cjs/adapters/slope.js:5:30
Module not found: ESM packages (@solana/wallet-adapter-base) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

Import trace for requested module:
./node_modules/@saberhq/use-solana/dist/cjs/providers.js
./node_modules/@saberhq/use-solana/dist/cjs/index.js
./node_modules/@gokiprotocol/walletkit/dist/cjs/WalletKitProvider.js
./node_modules/@gokiprotocol/walletkit/dist/cjs/index.js
./pages/_app.tsx

https://nextjs.org/docs/messages/module-not-found