2

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 :)

LoyalPotato
  • 401
  • 4
  • 15
  • 2
    Are you sure that a target >= es2017 is enough? Top level awaits are a proposal in stage 4, and so not even part of es2020. – trincot Jul 19 '21 at 16:02
  • I'm just going based on the error, but I just tried setting the target to ES2021 and still have the same error – LoyalPotato Jul 19 '21 at 16:04
  • 1
    As a workaround you can just wrap the code in a self-executing `async function`. – Thomas Jul 19 '21 at 17:09
  • @Thomas yeah I did that, was just wondering if I was doing something wrong or missing something else – LoyalPotato Jul 19 '21 at 20:07
  • @LoyalPotato - https://stackoverflow.com/a/69789625/4376643 - this is about getting it to work with typescript and ts-node. https://www.stefanjudis.com/today-i-learned/top-level-await-is-available-in-node-js-modules/ - is about getting it to work with with nodejs. The secret is to get TS setup to produce ES code, not CommonJS. So it is a mix of the two references. – Craig Hicks Jan 27 '22 at 23:59

1 Answers1

2

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

To demonstrate that this is not a typescript compiler issue.

  1. Create a new project npm init
  2. Add only typescript to your project npm install typescript --save-dev
  3. Create your tsc.config file with the settings you want but with target es2017 or newer and module esnext or system.
  4. Create 1 file with top level await.
  5. Compile with npx tsc.
  6. Everything works.

Here is the ts.config I used for reference:

{
    "compilerOptions": {
        "target": "es2017",
        "module": "system"
    },
    "include": ["topLevelAwait.ts"]
}
SamiElk
  • 2,272
  • 7
  • 20
  • I'm the one who bountied the question. The asker afaik is not using webpack and I am definitely not using webpack. The problem is the typescript compiler is erroring. – Griffork Jan 26 '22 at 03:04
  • Hi, the OP is certainly using webpack since his tsconfig is close to the default config created by create react app and create react app uses web pack under the hood. Are you using any framework? I edited my answer to demonstrate that the typescript compiler works. – SamiElk Jan 26 '22 at 03:34
  • 1
    No I'm not. I'll give your update a go! – Griffork Jan 27 '22 at 23:29
  • It did work in my test project even when I changed "module" to "ES2022". It wasn't working in my big project so there must be something else going wrong there (no frameworks in that one either). – Griffork Jan 28 '22 at 04:39
  • 1
    I think I needed to update typescript. I suspect that a later version of typescript changed the behaviour for the ES2022 spec. – Griffork Mar 14 '22 at 11:03