引用错误发生在“@polkadot/extension/bundle.js”

Question

substrate.

• When

1. I试图在next.js框架中使用polkadot.js实现智能合同的简单UI。WEB的内容是一个简单的调用Flipper契约的UI，它因编译的示例契约而著名，下面的错误被输出。你能告诉我怎么解决吗？

“南方法典”：

import { useEffect, useState } from "react";
import {
  web3Accounts,
  web3Enable,
  web3FromSource,
} from "@polkadot/extension-dapp";
import { InjectedAccountWithMeta } from "@polkadot/extension-inject/types";

const Home = () => {
  const [allAccount, setAllAccount] = useState<InjectedAccountWithMeta[]>([]);

  const getAccounts = async () => {
    const extensions = await web3Enable("my cool dapp");
    if (extensions.length === 0) {
      return;
    }
    const allAccounts = await web3Accounts();
    setAllAccount(allAccounts);
  };

  useEffect(() => {
    getAccounts();
  }, []);

  return (
    <>
      <div>
        {typeof allAccount !== "undefined"
          ? allAccount.map((account) => {
              return (
                <div key={account.address}>
                      <div className="font-bold mb-2 text-white">
                        {account.address}
                      </div>
                </div>
              );
            })
          : ""}{" "}
      </div>
    </>
  );
};

export default Home;

错误信息：

> Build error occurred
ReferenceError: window is not defined
    at file:///Users/shin.takahashi/develop/substrate/flipper_frontend/fillper_frontend/node_modules/@polkadot/extension-dapp/bundle.js:10:13
    at ModuleJob.run (node:internal/modules/esm/module_job:175:25)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15) {
  type: 'ReferenceError'
}

Answer 1

出现此问题是因为part.

• Componentize是服务器端呈现的框架。为了避免此问题，有必要控制不执行相关Extension.

• Adopt的服务器端呈现--使用该组件时从相关Extension.

• Adopt动态导入获取帐户信息的部件，并将服务器端呈现设置为off。

组件示例代码：

import { useEffect, useState } from "react";
import { web3Accounts, web3Enable } from "@polkadot/extension-dapp";
import { InjectedAccountWithMeta } from "@polkadot/extension-inject/types";  

const Extention = () => {
  const [allAccount, setAllAccount] = useState<InjectedAccountWithMeta[]>([]);

  const getAccounts = async () => {
    const extensions = await web3Enable("my cool dapp");
    if (extensions.length === 0) {
      return;
    }
    const allAccounts = await web3Accounts();
    setAllAccount(allAccounts);
  };

  useEffect(() => {
    getAccounts();
  }, []);

  return (
    <>
      <div>
        {typeof allAccount !== "undefined"
          ? allAccount.map((account) => {
              return (
                <div key={account.address}>
                  <div className="font-bold mb-2 text-white">
                    {account.address}
                  </div>
                </div>
              );
            })
          : ""}{" "}
      </div>
    </>
  );
};

export default Extention;

调用组件示例代码：

import dynamic from "next/dynamic";
import { useState } from "react";

const Extention = dynamic(() => import("../component/extention"), {
  ssr: false,
});

const Home = () => {
  const [showExtention, setShowExtention] = useState(false);
  return (
    <>
      <button onClick={() => setShowExtention(true)}>show extention</button>
      {showExtention == true && <Extention></Extention>}
    </>
  );
};

export default Home;