@apollo-client 3.3.2 fails to compile due to wrong ts-invariant version resolved

Intended outcome: App compiles

Actual outcome: App compilation is broken

App with the dependency of @apollo/client@^3.3.2 fails to compile, here’s the error output:

WARNING in ./node_modules/@apollo/client/core/index.js 13:0-43
"export 'setVerbosity' (reexported as 'setLogVerbosity') was not found in 'ts-invariant'
 @ ./node_modules/@apollo/client/index.js
 @ ./src/components/App/App.tsx
 @ ./src/components/App/index.ts
 @ ./src/main.tsx
 @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./src/main.tsx

WARNING in ./node_modules/@apollo/client/core/index.js 14:0-12
"export 'setVerbosity' was not found in 'ts-invariant'
 @ ./node_modules/@apollo/client/index.js
 @ ./src/components/App/App.tsx
 @ ./src/components/App/index.ts
 @ ./src/main.tsx
 @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./src/main.tsx

TypeError: Object(...) is not a function
Module../node_modules/@apollo/client/core/index.js
./node_modules/@apollo/client/core/index.js:14
  11 | export { Observable, isReference, makeReference, } from "../utilities/index.js";
  12 | import { setVerbosity } from "ts-invariant";
  13 | export { setVerbosity as setLogVerbosity };
> 14 | setVerbosity("warn");
  15 | import gql from 'graphql-tag';
  16 | export var resetCaches = gql.resetCaches, disableFragmentWarnings = gql.disableFragmentWarnings, enableExperimentalFragmentVariables = gql.enableExperimentalFragmentVariables, disableExperimentalFragmentVariables = gql.disableExperimentalFragmentVariables;
  17 | export { gql };
View compiled

I believe it’s because the older ts-variant version is resolved. apollo-link has a dependency on ts-variant@0.4.0, while @apollo/client relies on ts-variant@0.5.0. My yarn.lock contains these two packages.

Apparently, this is not true in my case.

Meanwhile, I’ve fixed it via package.json’s resolutions:

...
"resolutions": {
    "ts-invariant": "^0.5.0"
  },
...

Versions: System: OS: macOS 10.15.7 Binaries: Node: 12.18.2 - ~/.nvm/versions/node/v12.18.2/bin/node Yarn: 1.22.5 - /usr/local/bin/yarn npm: 6.14.8 - ~/.nvm/versions/node/v12.18.2/bin/npm Browsers: Chrome: 87.0.4280.67 Safari: 14.0.1 npmPackages: @apollo/client: ^3.3.2 => 3.3.2 @apollo/react-ssr: ^4.0.0 => 4.0.0 apollo-datasource-rest: ^0.9.5 => 0.9.5 apollo-server-hapi: ^2.19.0 => 2.19.0

[eugeneoshepkov]

@benjamn Thanks for the fast response! Unfortunately, I’m still having this issue. I wonder if it can be related to my webpack / babel configuration, if it changes default node_modules resolve logic. I have ts-invariant@0.4.0 in root node_modules folder and ts-invariant@0.6.0 in node_modules/@apollo/client/node_modules folder. And the error is still the same:

WARNING in ./node_modules/@apollo/client/core/index.js 13:0-43
"export 'setVerbosity' (reexported as 'setLogVerbosity') was not found in 'ts-invariant'
 @ ./node_modules/@apollo/client/index.js
 @ ./src/components/App/App.tsx
 @ ./src/components/App/index.ts
 @ ./src/main.tsx
 @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./src/main.tsx

WARNING in ./node_modules/@apollo/client/core/index.js 14:0-12
"export 'setVerbosity' was not found in 'ts-invariant'
 @ ./node_modules/@apollo/client/index.js
 @ ./src/components/App/App.tsx
 @ ./src/components/App/index.ts
 @ ./src/main.tsx
 @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./src/main.tsx

I’ve figured out that ts-invariant@0.4.0 eventually comes from @graphql-modules/core@0.7.17: https://github.com/Urigo/graphql-modules/blob/legacy/packages/core/package.json#L20

Update:

It turned out that it was because of resolve.modules configuration, which “forces all modules to resolve from the root node_modules”: https://github.com/webpack/webpack/issues/6505#issuecomment-366502560

@benjamn Thanks again for your help!

[don-hover]

Bumping because I’m seeing this same problem when upgrading from 3.3.21 to 3.4.8.

I see this in the yarn lockfile:

ts-invariant@^0.4.0, ts-invariant@^0.6.1, ts-invariant@^0.9.0:
  version "0.6.2"
  resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.6.2.tgz#2b95c0f25dd9da0c1d3b921e23ee5593133694d4"
  integrity sha512-hsVurayufl1gXg8CHtgZkB7X0KtA3TrI3xcJ9xkRr8FeJHnM/TIEQkgBq9XkpduyBWWUdlRIR9xWf4Lxq3LJTg==

So, although ts-invariant@^0.9.0 is being required by @apollo-client, version 0.6.2 of ts-invariant is being resolved. That’s causing our build to fail with this error:

ERROR in ./node_modules/@apollo/client/utilities/globals/graphql.js 1:0-46                                              
Module not found: Error: Can't resolve 'ts-invariant/process' in '/usr/src/app/node_modules/@apollo/client/utilities/glo
bals'                                                                                                                   
resolve 'ts-invariant/process' in '/usr/src/app/node_modules/@apollo/client/utilities/globals'                          
  Parsed request is a module                                                                                            
  using description file: /usr/src/app/node_modules/@apollo/client/utilities/package.json (relative path: ./globals)