Apollo-link: Error when building with v1.2.0: "@types/zen-observable/index has no default export"

[chenkie]

Intended outcome:

Build Angular CLI project with apollo-link. Looks like the latest release has issues with types/zen-observable

Actual outcome:

Got this error:

ERROR in node_modules/apollo-link-context/node_modules/apollo-link/lib/types.d.ts(2,8): error
TS1192: Module '"/tmp/build_6e1e79a9d4e4cc0fceeda16a93512a8c/node_modules/@types/zen
observable/index"' has no default export.

How to reproduce the issue:

Typical Angular CLI setup with apollo-client v2.2.5 and apollo-angular v1.0.1. Only happens with apollo-link v1.2.0

[lirbank]

I have the same issue, using create-react-app.

[yihuaf]

Following this PR: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/23725, adding "allowSyntheticDefaultImports": true to tsconfig.json fixed the issue for me. Not sure if this is considered the proper fix for the issue through.

Maybe the right approach is to change how zen-observable is imported?

[neural22]

Same issue here! solution proposed by @yihuaf didn't work for us.

[neural22]

This is currently our tsconfig.json file, does someone have an idea?
{ "compileOnSave": false, "compilerOptions": { "outDir": "./dist/out-tsc", "baseUrl": "src", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "target": "es5", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2016", "dom" ] } }

[lceck27]

I have the same issue.

[akab]

Same issue. Solution proposed by @yihuaf didn't work, also tried with esModuleInterop = true.

UPDATE:
solved as pointed out by @neural22

[GiuRossi90]

I have the same issue!

[neural22]

Ok, we fixed the problem considering this ( https://stackoverflow.com/questions/43136859/angular-cli-ignores-tsconfig-json ) and adding the option allowSyntheticDefaultImports in the right file (tsconfig.app.json instead of tsconfig.json )

[vic08]

adding allowSyntheticDefaultImports to tsconfig.json helped in my case (using webpack with babel and ts-loader)

[davidnguyen179]

adding "allowSyntheticDefaultImports": true to tsconfig.json worked for me. But I think using

import * as Observable from 'zen-observable';

is better than

import Observable from 'zen-observable';

to files:
node_modules/apollo-link/lib/index.d.ts
node_modules/apollo-link/lib/link.d.ts
node_modules/apollo-link/lib/linkUtils.d.ts
node_modules/apollo-link/lib/types.d.ts

[dwaynelavon]

I added "allowSyntheticDefaultImports": true to tsconfig.json and it caused more errors for my application. My Jest/Enzyme tests broke with that option enabled. Any other solutions??

[davidnguyen179]

@hi @dwaynelavon,

The reason for this problem is related to

node_modules/apollo-link/lib/index.d.ts
node_modules/apollo-link/lib/link.d.ts
node_modules/apollo-link/lib/linkUtils.d.ts
node_modules/apollo-link/lib/types.d.ts

They are using

import Observable from 'zen-observable';

instead of

import * as Observable from 'zen-observable';

[yihuaf]

By the way, this seems to be not only the latest version. I tried to roll back and the same problem is there as well.

[benjamn]

I don't think the namespace import (import * as Observable ...) makes sense, because the namespace is always an object, whereas Observable is supposed to be a constructor function. Please don't use import * as Observable from "zen-observable" or tell others to do the same. Instead, I would recommend waiting for the zen-observable-ts wrapper package that @evans has been working on: https://github.com/apollographql/apollo-link/pull/515

[lirbank]

I agree with @chenkie this issue is around v1.2.0 of apollo-link. If I force apollo-link to 1.1.0 - and set apollo-link-http to 1.3.3 (that's seems to be the last version of apollo-http-ling being compatible with apollo-link 1.2.0), everything works.

{
  "dependencies": {
    "apollo-link-http": "1.3.3"
    ...
  },
    ...
  "resolutions": {
    "apollo-link": "1.1.0"
  }
}