如何在打字稿中支持顶级等待？

Question

. Answers to this question are eligible for a +50 reputation bounty. Griffork is looking for a :

I'm running into the same problem and am looking for a functional (working) solution (with example tsconfig).

I'm using version 4.3.5 of typescript with Ionic and have ts(1378) error.

Here are is the tsconfig:

{
  "compilerOptions": {
    "target": "es2017",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "sourceMap": true,
    "noImplicitAny": true,
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "ESNext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

And the code where I'm getting the error:

import { Storage } from '@ionic/storage';

const store = new Storage();
await store.create();

export default store;

According to the error all I needed to change was the target to >=es2017 and the module to esnext or system, but I have that and it still shows me the error.

Don't know if it's relevant but you can see my folder structure here .

Thanks in advance :)

Answer 1

The issue doesn't come from your tsconfig but from webpack.

Top level await is still an experimental feature in webpack. You would have to include experiments: { topLevelAwait: true } in your webpack.config to make it work.

https://webpack.js.org/configuration/experiments/

However create-react-app manages the webpackconfig files for you and you would have to eject from create-react-app to access them.

Ejecting from create-react-app is usually not recommended, especially to add an experimental feature. It could induce more issues than it resolves.

Here are the steps to follow if you still want to try:

npm run eject

add experiments: { topLevelAwait: true } in the return statement of the newly created config/webpack.config.js