`experiments.topLevelAwait: true` `出乎意料地不起作用- ReactJS仍然抛出错误

Question

我有以下index.js文件，

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();

由于await代码片段，我在运行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

它看起来很容易理解，所以我在根目录中创建了一个与project.json级别相同的project.json文件，并用它填充它的内容，

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

我还是会犯错误。我该把这个放在别的地方吗？

就上下文而言，这些是我的版本，

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

谢谢!

Answer 1

如我所知，目前没有最高级别的支持在反应，尝试用这种方式。

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