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!
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",
})
)
})()