Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

256
Vistas
`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!

7 months ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

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",
      })
    )
})()
7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos