CoinbaseWalletSDK 不适用于服务器端渲染

Question

我试图在我的NextJS应用程序中加载CoinbaseWalletSDK ，但它总是抛出ReferenceError: localStorage is not defined由于它是在加载窗口之前导入的。 我尝试了动态加载，但它不起作用。 以下是我目前正在使用的。

export async function getServerSideProps({
  params,
}: {
  params: { project_id: string };
}) {

  const project_id = params.project_id;

  let project: any = fakeProjects[0];
  if (project_id && typeof project_id === 'string' && !isNaN(parseInt(project_id))) {
    const id = project_id;
    project = fakeProjects.find(p => p.id === parseInt(id));

    // Fetch project detail here
    let item = await (
      getNFTStatsByProjectId(
        parseInt(project_id)
      )
    );
    if (project && item && item['nftTotal'] && item['nftSold']) {
      if (item.nftSold > item.nftTotal) {
        item.nftSold = item.nftTotal;
      }
      project.nftTotal = item.nftTotal;
      project.nftSold = item.nftSold;
    }
  }
  
  const { coinbaseEth } = (await import('../../components/services/coinbase'));

  return {
    props: { 
      project: project,
      coinbaseEth: coinbaseEth
    },
  };
}

这就是我在 coinbase 服务中所拥有的：

// TypeScript
import CoinbaseWalletSDK from '@coinbase/wallet-sdk'
import Web3 from 'web3'

const APP_NAME = 'Practice App'
const APP_LOGO_URL = process.env.WEBSITE_URL + '/logo.png'
const DEFAULT_ETH_JSONRPC_URL = 'https://mainnet.infura.io/v3/' + process.env.INFURA_PROJECT_ID
const DEFAULT_CHAIN_ID = 1

// Initialize Coinbase Wallet SDK
export const coinbaseWallet = new CoinbaseWalletSDK({
  appName: APP_NAME,
  appLogoUrl: APP_LOGO_URL,
  darkMode: false
})

// Initialize a Web3 Provider object
export const coinbaseEth = coinbaseWallet.makeWeb3Provider(DEFAULT_ETH_JSONRPC_URL, DEFAULT_CHAIN_ID)

// Initialize a Web3 object
export const web3 = new Web3(coinbaseEth as any)

如果这是一个问题， new CoinbaseWalletSDK就是引发错误的地方。

根据我的研究，我需要在页面完全加载后将其导入（这是“窗口”和“localStorage”可用的时间点），我不知道如何实现。 谁能帮我解决这个问题？

Answer 1

我通过稍后加载它来解决它。 我所做的是用这个函数分配这个变量。

  setTimeout(async () => {
    coinbaseEth = (await import('../../components/services/coinbase')).coinbaseEth;
  }, 1000)

我选择不使用 useEffect 因为渲染时该值会丢失，这会阻止函数正常工作。