Cara menggunakan "menunggu" peringkat atas dalam TypeScript Next.js

Question

Apabila saya menggunakan "menunggu" di peringkat atas seperti ini:

const LuckyDrawInstance=await new web3.eth.Contract(abi)

Saya mendapat amaran: "set Experiments.topLevelAwait true" pada terminal. Apabila saya cuba menambahnya pada "tsconfig.json" ia masih tidak berfungsi. Ia mengatakan harta "percubaan" tidak wujud.

Saya boleh membalutnya dalam fungsi async, tetapi saya mahu menetapkannya tanpa fungsi pembalut.

Answer 1

Penyelesaian terkini yang berkesan untuk saya semasa menulis artikel ini ialah menggunakan Babel dan bukannya SWC, kerana Next.js tidak membenarkan konfigurasi SWC tersuai, oleh itu, anda tidak boleh menghantar 允许 topLevelAwait。 swcrc fail.

1. akan dinamakan @babel/plugin-syntax-top-level-await 的 Babel 插件添加到 package.json dalam.

Sebagai contoh.

{
    "devDependencies": {
        "@babel/plugin-syntax-top-level-await": "^7.14.5"
    }
}

2. Dalam package.json 所在项目的根目录中创建 .babelrc fail.

3. In .babelrc 中确保包含 next/babel 预设和 topLevelAwait pemalam.

Sebagai contoh.

{
    "presets": ["next/babel"],
    "plugins": [
        "@babel/plugin-syntax-top-level-await"
    ]
}

Ini adalah penyelesaian paling mudah sehingga pasukan Next.js membenarkan kami memasukkan konfigurasi SWC. Ambil perhatian bahawa dengan melakukan ini, anda tidak akan mendapat manfaat prestasi SWC kerana ia akan dilumpuhkan memihak kepada Babel.

Answer 2

Tiada kaitan dengan tsconfig.json. Anda mesti menetapkannya dalam next.config.js. Versi baharu next.js menggunakan webpack5, yang menyokong menunggu peringkat teratas.

module.exports = {
  webpack: (config) => {
    // this will override the experiments
    config.experiments = { ...config.experiments, topLevelAwait: true };
    // this will just update topLevelAwait property of config.experiments
    // config.experiments.topLevelAwait = true 
    return config;
  },
};

Perhatian

Anda mesti menggunakannya di luar komponen berfungsi:

export default function Navbar() {
  // this will throw error
  // Syntax error: Unexpected reserved word 'await'.
  const provider=await customFunction()

  return (
    <section>          
    </section>
  );
}

13 item seterusnya

Tetapan yang sama digunakan untuk "seterusnya" dalam direktori "halaman" dan "apl": "^13.1.6" . (Oleh kerana ciri ini ialah ciri webpack5webpack5, bukan ciri next.js) Anda boleh mengujinya menggunakan kod contoh berikut:

const _promise = async () => {
  return new Promise((resolve, reject) => resolve(4));
};
// you might get typecsript warning
const val = await _promise();
console.log("val", val);

AMARAN

Memandangkan ia adalah percubaan, ia mungkin rosak dalam beberapa versi