TS1086: An accessor cannot be declared in an ambient context

[cloakedninjas]

Describe the bug
Upgraded to 5.3.3 just now and our Angular build is failing with the following:

[ng]
[ng] ERROR in ../../node_modules/@storybook/channels/dist/index.d.ts:25:9 - error TS1086: An accessor cannot be declared in an ambient context.
[ng]
[ng] 25     get hasTransport(): boolean;
[ng]            ~~~~~~~~~~~~

From a quick google, it appears other repos are facing the same issue due to the use of TypeScript 3.7.0 - but Angular is restricted to <3.5.0

Similar errors
nestjs/nest#3513
googleapis/node-gtoken#244

I believe the breaking change come from TypeScript directly microsoft/TypeScript#33939 - but until a fix is released, the index.d.ts file will need regenerating with npm i typescript@~3.6.0 (swap ^ for ~)

System:

    OS: macOS Mojave 10.14.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 12.14.1 - /usr/local/bin/node
    npm: 6.13.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 79.0.3945.117
    Safari: 13.0.4
  npmPackages:
    @storybook/addon-actions: ^5.3.3 => 5.3.3
    @storybook/addon-knobs: ^5.3.3 => 5.3.3
    @storybook/addon-links: ^5.3.3 => 5.3.3
    @storybook/addon-notes: ^5.3.3 => 5.3.3
    @storybook/addon-storyshots: ^5.3.3 => 5.3.3
    @storybook/addons: ^5.3.3 => 5.3.3
    @storybook/angular: ^5.3.3 => 5.3.3
    @storybook/cli: ^5.3.3 => 5.3.3

[cloakedninjas]

I had a stab at doing the upgrade but got lost in the package structure 😅 - The end result (after dist files are generated) should make @storybook/channels/dist/index.d.ts:25 go

From

get hasTransport(): boolean;

To

readonly hasTransport: boolean;

[siropo]

I had the same issue. I resolve it by update the Typescript package to the latest version

[IsharaMadawa]

I had the same issue. I resolve it by update the Typescript package to the latest version

@siropo What version? i'm using angular 8.3.20 and typescript 3.5.3. And i got same error when try to build the project.

[siropo]

@IsharaMadawa "typescript": "3.7.4"

[IsharaMadawa]

@IsharaMadawa "typescript": "3.7.4"

@siropo Can you drop the package.json here?

[siropo]

@IsharaMadawa why? Just try to update your typescript version and check if it is working

[cloakedninjas]

If you're running older version of Angular, e.g. 8.1.0 you'll see the following error

The Angular Compiler requires TypeScript >=3.4.0 and <3.5.0 but 3.x.y was found instead.

[IsharaMadawa]

If you're running older version of Angular, e.g. 8.1.0 you'll see the following error

The Angular Compiler requires TypeScript >=3.4.0 and <3.5.0 but 3.x.y was found instead.

yes. i got this error and had to update angular also

[yarsunny]

@IsharaMadawa Did you upgrade to angular 9 rc version ?
I see the below error
The Angular Compiler requires TypeScript >=3.4.0 and <3.5.0 but 3.x.y was found instead.
in angular 8.2.3 as well

[konstantintieber]

This also breaks for us using the latest version of Angular 8.2.x :/

[shivarajnaidu]

[flvanroekel]

I have the 3.7.4 version of Typescript and the 8.3.21 version of Angular and I am getting the same message! Please help! :-)

[alex-vas]

Updating with ng update --next @angular/cli --force to 9.0.0-rc.12 which uses typescript @ "3.7.5", has helped the issue indeed.

[mshibl]

Getting this same issue with typescript 3.7.5 and storybook/react 5.3.9

[Snargol]

ng update --next @angular/cli --force
npm install typescript@latest

;)

[Janaki96]

ng update --next @angular/cli --force
npm install typescript@latest

;)
It worked,Thank you Snargol.

[cloakedninjas]

Confirmed, upgrading to Angular 9 (and by extension Typescript 3.7.5), this issue is resolved

[lychyi]

Upgrading to TypeScript 3.7.x isn't a great option for library maintainers. This means that the change from 3.6 to 3.7 (technically a breaking change) gets passed down to our consumers and we can't assume they can readily upgrade TypeScript either.

@ndelangen I think this can be rectified by changing https://github.com/storybookjs/storybook/blob/next/package.json#L218 to typescript@~3.6.0, since typescript@^3.4.0 resolves to 3.7.5 right now. Then we can save the 3.7 upgrade until until Storybook 6.0 since it's actually a breaking change.

What do you think?

[ndelangen]

Sounds like a plan @lychyi

Want to open a PR against the next branch?

We'll cherry-pick it into master and release as a patch @shilman

[lychyi]

You got it!

[lychyi]

@ndelangen @shilman

Should Storybook 6 utilize TypeScript 3.7 since it's going to be offered as a breaking change anyway? If so, I think this should actually get changed in master and not next. The current PR #9826 is against next but I can rehash that to point to master instead, let me know.

Consequently, if TS 3.7+ is not really important, it could be upgraded as part of Storybook 7 or beyond as well?

[shilman]

works for me @lychyi. thanks so much for taking care of this & thinking it through!!! 💯

re: 3.7 in storybook 6.0. i'm not sure about whether 3.7 is necessary, will let one of the typescript guys speak to that @ndelangen @kroeder @gaetanmaisse

[lychyi]

FWIW, next already utilizes 3.7, which to its merit, has really neat features like optional chaining (foo?.bar) and the nullish coalescing operator (foo ?? bar). Changing this only in master for Storybook 5.3.x would be the least disruptive to the current state of things.

Also, I just learned that the getter/setter emit is only a breaking change for "typescript": "<=3.5". TS 3.6 future-proofed this feature so another option is to have people upgrade to TS3.6 if they can't upgrade to TS3.7 for whatever reason. Breaking changes in TS3.6 is not nearly as bad.

However, using TS3.7 still hurts Angular folks not able to upgrade to 9.x yet. Angular 8.x is locked at ~3.5.3.

So the main tradeoff I suggested weighing in on is: "Would we be comfortable saying that Storybook 6 is not compatible with Angular 8 so that we could leverage the latest and greatest that TypeScript 3.7 has to offer?"

[shilman]

@lychyi Great summary. Uninformed gut feel says definitely 3.7 for 6.0. Seize the future!! 😈

[rohittagadiya]

Getting same issue :)

[shilman]

@rohittagadiya did you update to latest?

[pankajdaffodil]

Try "skipLibCheck": true, inside tsconfig.json eg.

"compilerOptions": {
    "baseUrl": "src",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    **"skipLibCheck": true,**
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },

Hope it will help you !!

[P-dro]

Tente " skipLibCheck": true , dentro do tsconfig.json, por exemplo.

"compilerOptions": {
    "baseUrl": "src",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    **"skipLibCheck": true,**
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },

Espero que ajude você !!

Works!!!! Thanks

[LuisHCK]

Try "skipLibCheck": true, inside tsconfig.json eg.

"compilerOptions": {
    "baseUrl": "src",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    **"skipLibCheck": true,**
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },

Hope it will help you !!

Works pretty well, Thanks <3

[deborahjames]

Adding "skipLibCheck": true, in the compilerOptions inside file tsconfig.json worked for me. Thank you so much .

[switch120]

Chiming in - skipLibCheck: true works a charm. This is great for those who can't risk an ng update mid-QA cycle. Thanks!

[shafeek2112]

Try "skipLibCheck": true, inside tsconfig.json eg.

"compilerOptions": {
    "baseUrl": "src",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    **"skipLibCheck": true,**
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },

Hope it will help you !!

Thank you. Working well.

[rafaelgoncalves2010]

Try "skipLibCheck": true, inside tsconfig.json eg.

"compilerOptions": {
    "baseUrl": "src",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    **"skipLibCheck": true,**
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },

Hope it will help you !!

Thank you <3

[yangxingting]

change version to :
"ngx-swiper-wrapper": "~8.0.1"

Can solve this problem

[nvolodymyr]

ng update --next @angular/cli --force
npm install typescript@latest

;)

[SasikalaGanapathy]

Im using angular 5 is it possible to use ngx-file-upload

[Yahiani-dev]

ng update @angular-devkit/build-angular