React UI components do not work in Next.js

[IAmConnorWilson]

Next.js throws errors when libraries try to import global styling. See the following issue:

vercel/next.js#19936

Looks like there might be a patch on the way in Next but is there any way we can pull this out and have users manually add css file? Open to other suggestions

[jordaaash]

Hmm, interesting. What about using the IgnorePlugin for Webpack in the Next.js config to ignore the file, then import it manually?

[IAmConnorWilson]

Wasn't able to get anything going with the ignore plugin or babel but I think this library does the trick

https://github.com/martpie/next-transpile-modules

added to the next.config.js file:

const withTM = require('next-transpile-modules')(['@solana/wallet-adapter-react-ui']);

module.exports = (_, { defaultConfig }) => {
  // Next.js config
  const nextConfig = {
    ...defaultConfig,
    reactStrictMode: true,
  };

  return withTM(nextConfig);
};

[jordaaash]

Oh, this is what the Next.js starter project already does: https://github.com/solana-labs/wallet-adapter/blob/2c29262405f971f950563f2ff229c1a7a2ff2582/packages/starter/nextjs-starter/next.config.js#L2

[jordaaash]

Since the React UI package is already being transpiled this way, I'll close this issue:
https://github.com/solana-labs/wallet-adapter/blob/2c29262405f971f950563f2ff229c1a7a2ff2582/packages/starter/nextjs-starter/next.config.js#L11

[pakaplace]

Wallets is undefined when transpiling those modules. Here's my next config where I'm transpiling the modules.
node_modules/@solana/wallet-adapter-ant-design/lib/WalletModal.js (25:25) @ WalletModal TypeError: Cannot read property 'map' of undefined

/** @type {import('next').NextConfig} */
const withTM = require('next-transpile-modules')([
  '@solana/wallet-adapter-react',
  '@solana/wallet-adapter-base',
  '@solana/wallet-adapter-ant-design',
  '@solana/wallet-adapter-wallets',
  '@solana/wallet-adapter-react',
]);

module.exports = withTM({
  reactStrictMode: true,
  webpack: (config) => {
    config.resolve.fallback = { fs: false, path: false, os: false };
    return config;
  },
});

[jordaaash]

Please check https://github.com/solana-labs/wallet-adapter/tree/master/packages/starter/example which has a complete example of using every provided UI framework for React with Next.js, and also shows how to import the styles and the Next config setup needed.

[carlosbane]

For next 13, sprinkling a little "use client" at the top of the file did it for me :)