Comment utiliser « attendre » de niveau supérieur dans TypeScript Next.js

Question

Lorsque j'utilise « wait » au niveau supérieur comme ceci : constLuckyDrawInstance=awaitnewweb3.eth.Contract(abi) je reçois un avertissement sur le terminal : « setExperiments.topLevelAwaittrue ». Lorsque j'essaie de l'ajouter à "tsconfig.json", cela ne fonctionne toujours pas. Il dit que la propriété « expérimentale » n’existe pas. Je peux l'envelopper dans une fonction asynchrone mais je souhaite le définir sans la fonction d'emballage.

P粉262926195 · Answer

La dernière solution qui a fonctionné pour moi au moment de la rédaction de cet article consiste à utiliser Babel au lieu de SWC, car Next.js n'autorise pas la configuration SWC personnalisée, vous ne pouvez donc pas transmettre de fichiers 允许 topLevelAwait。 swcrc.

sera nommé @babel/plugin-syntax-top-level-await 的 Babel 插件添加到 package.json dans.

Par exemple.

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

Dans package.json 所在项目的根目录中创建 .babelrc fichiers.
Dans le plugin .babelrc 中确保包含 next/babel 预设和 topLevelAwait.

Par exemple.

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

C'était la solution la plus simple jusqu'à ce que l'équipe Next.js nous permette d'inclure la configuration SWC. Notez qu'en faisant cela, vous n'obtiendrez pas les avantages en termes de performances de SWC car il sera désactivé au profit de Babel.

P粉541551230 · Answer

N'a rien à voir avec tsconfig.json. Vous devez le définir dans next.config.js. La nouvelle version de next.js utilise webpack5, qui prend en charge l'attente de niveau supérieur.

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;
  },
};

Attention

Vous devez l'utiliser en dehors d'un composant fonctionnel :

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

  return (
              
    
  );
}

13 articles suivants

Les mêmes paramètres s'appliquent à « suivant » dans les répertoires « pages » et « app » : « ^13.1.6 » . (Parce que cette fonctionnalité est une fonctionnalité webpack5webpack5, pas une fonctionnalité next.js) Vous pouvez la tester en utilisant l'exemple de code suivant :

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

AVERTISSEMENT

Comme il est expérimental, il peut être cassé dans certaines versions