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

[eugeneoshepkov]

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 [email protected], while @apollo/client relies on [email protected]. 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

[benjamn]

@eugeneoshepkov The @apollo/[email protected] package requires [email protected] in package.json, so I don't understand why an older version of ts-invariant would be resolved. Are you installing ts-invariant directly in your application?

[eugeneoshepkov]

@benjamn So it comes from graphql-tools, which in turn is a dependency of @graphql-codegen:
https://github.com/dotansimha/graphql-code-generator/blob/master/package.json

I don't have direct dependency of ts-invariant in the package.json

[benjamn]

@eugeneoshepkov If you update to @apollo/[email protected], this problem should disappear, thanks to #7414. Let us know what happens either way, so we can avoid problems like this in the future (that is, by using minor updates instead of patch updates in more cases).

[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 [email protected] in root node_modules folder and [email protected] 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 [email protected] eventually comes from @graphql-modules/[email protected]: 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": webpack/webpack#6505 (comment)

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

[Myilvaganan]

Worked!!! Thanks. I was facing issue with latest version of @apollo/client

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

after resolving node_modules in webpack.config.js, it's working!!!

 resolve: {
       extensions: [".js", ".jsx", ".json", ".ts"],
       modules: [
           'node_modules'
       ]
   },
   resolveLoader: {
       modules: [
           'node_modules'
       ]
   },
   ```