Solana Wallet Adapterで「wallet.tsx:14 require is not defined」エラー

Wallet Adapter for Solana Apps を実装していたときに発生したエラー。

現象

上記のチュートリアルをもとに実装して起動すると以下のエラーが出る。

wallet.tsx:14 Uncaught ReferenceError: require is not defined
    at wallet.tsx:14:1

原因

TypeScriptで読み込めないメソッド（require）を使っている。

import {
    WalletModalProvider,
    WalletDisconnectButton,
    WalletMultiButton
} 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 const Wallet: FC = () => {
    // The network can be set to 'devnet', 'testnet', or 'mainnet-beta'.
    const network = WalletAdapterNetwork.Devnet;

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

対応

requireからimportに変更する。

import('@solana/wallet-adapter-react-ui/styles.css');