Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

378
Visualizações
`experiments.topLevelAwait: true` does unexpectedly not work - ReactJS still throws error

I have the following index.js file,

import { DataStore } from "aws-amplify";
import { Todo } from "./models";
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import Amplify from "aws-amplify";
import awsconfig from "./aws-exports";

Amplify.configure(awsconfig);

await new DataStore.save(
  new Todo({
    name: "Lorem ipsum dolor sit amet",
    description: "Lorem ipsum dolor sit amet",
  })
);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

Because of the await code snippet, I receive the following error when I run npm run start,

Error: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)
    at /home/saif/Projects/myapp/node_modules/webpack/lib/dependencies/HarmonyDetectionParserPlugin.js:54:11
    at Hook.eval [as call] (eval at create (/home/saif/Projects/myapp/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:16)
    at Hook.CALL_DELEGATE [as _call] (/home/saif/Projects/myapp/node_modules/tapable/lib/Hook.js:14:14)
    at JavascriptParser.walkAwaitExpression (/home/saif/Projects/myapp/node_modules/webpack/lib/javascript/JavascriptParser.js:2320:29)
    at JavascriptParser.walkExpression (/home/saif/Projects/myapp/node_modules/webpack/lib/javascript/JavascriptParser.js:2250:10)
    at JavascriptParser.walkExpressionStatement (/home/saif/Projects/myapp/node_modules/webpack/lib/javascript/JavascriptParser.js:1638:8)
    at JavascriptParser.walkStatement (/home/saif/Projects/myapp/node_modules/webpack/lib/javascript/JavascriptParser.js:1565:10)
    at JavascriptParser.walkStatements (/home/saif/Projects/myapp/node_modules/webpack/lib/javascript/JavascriptParser.js:1459:9)
    at JavascriptParser.parse (/home/saif/Projects/myapp/node_modules/webpack/lib/javascript/JavascriptParser.js:3353:9)
    at /home/saif/Projects/myapp/node_modules/webpack/lib/NormalModule.js:1087:26

It seems easy enough to understand, so I create a webpack.config.js file in the root directory as the same level as the project.json, and fill the contents of it with it,

module.exports = {
  experiments: {
    topLevelAwait: true,
  },
};

I still get the error. Am I supposed to put this somewhere else?

For context, these are my versions,

❯ node --version
v17.9.0
❯ npm --version 
8.5.5

Thanks!

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

As I know Currently there is no top level await support in react , try with this way.

(async () => {
    await new DataStore.save(
      new Todo({
        name: "Lorem ipsum dolor sit amet",
        description: "Lorem ipsum dolor sit amet",
      })
    )
})()
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda