ts-invariant: Unknown token 'export'

[qroac]

Intended outcome:
I upgraded the node version used in our project. The old version was 12.19. The error occours with anything above that from12.22 to 16.x.
I expected our project to be built as before using the next minor patch version of node.

Actual outcome:
An import in apollo-client from ts-invariant issues an error: SyntaxError: Unexpected token 'export'

As you can see in the stacktrace below, @apollo/client/utilities/globals/fix-graphql has a deep-import for remove from ts-invariant/process/index.js
So it seens that fix-graphql as commonJS module requires a ecmascript Module.

I noticed that the deep import from index.js is not required, because ts-invariant/process comes with its own package.json.
For a test I renamed the import to ... from 'ts-invariant/process' and my whole application was up and running again.

In the source of apollo-client I can see that the import is just like I need it to be.
So, where is this index.js in the import path coming from?

$ yarn __watch-server
lerna notice cli v4.0.0
lerna info versioning independent
lerna notice filter including "server"
lerna info filter [ 'server' ]
lerna info Executing command in 1 package: "yarn run watch"
server: clean-webpack-plugin: /home/michael/Projekte/JS/app-mivao-expo44/packages/server/build has been removed.
server: webpack is watching the files…
server: [hardsource:e5244391] Tracking node dependencies with: package.json, node_modules/*.
server: [hardsource:e5244391] Reading from cache e5244391...
server: ℹ ｢node-hmr-plugin｣: node /home/michael/Projekte/JS/app-mivao-expo44/packages/server/build/index.js, env: { LAST_EXIT_CODE: 0 }
server: Hash: a16d236880b8fd9ec3fc
server: Version: webpack 4.46.0
server: Time: 589ms
server: Built at: 18.03.2022 14:26:52
server:    Asset     Size  Chunks                    Chunk Names
server: index.js  885 KiB   index  [emitted]  [big]  index
server: Entrypoint index [big] = index.js
server: [0] multi webpack/hot/poll?200 raf/polyfill ./src/index.ts 52 bytes {index} [built]
server: [@babel/runtime/helpers/defineProperty] external "@babel/runtime/helpers/defineProperty" 42 bytes {index} [built]
server: [@babel/runtime/helpers/interopRequireDefault] external "@babel/runtime/helpers/interopRequireDefault" 42 bytes {index} [built]
server: [@babel/runtime/helpers/objectWithoutProperties] external "@babel/runtime/helpers/objectWithoutProperties" 42 bytes {index} [built]
server: [@babel/runtime/helpers/slicedToArray] external "@babel/runtime/helpers/slicedToArray" 42 bytes {index} [built]
server: [@graphql-tools/schema] external "@graphql-tools/schema" 42 bytes {index} [built]
server: [apollo-server-errors] external "apollo-server-errors" 42 bytes {index} [built]
server: [bcryptjs] external "bcryptjs" 42 bytes {index} [built]
server: [dotenv/config] external "dotenv/config" 42 bytes {index} [built]
server: [express] external "express" 42 bytes {index} [built]
server: [i18next] external "i18next" 42 bytes {index} [built]
server: [i18next-express-middleware] external "i18next-express-middleware" 42 bytes {index} [built]
server: [performance-now] external "performance-now" 42 bytes {index} [built]
server: [raf/polyfill] external "raf/polyfill" 42 bytes {index} [built]
server: [universal-cookie-express] external "universal-cookie-express" 42 bytes {index} [built]
server:     + 324 hidden modules
server: ts-invariant js
server: /home/michael/Projekte/JS/app-mivao-expo44/node_modules/ts-invariant/process/index.js:21
server: export function install() {
server: ^^^^^^
server: SyntaxError: Unexpected token 'export'
server:     at Object.compileFunction (node:vm:352:18)
server:     at wrapSafe (node:internal/modules/cjs/loader:1031:15)
server:     at Module._compile (node:internal/modules/cjs/loader:1065:27)
server:     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
server:     at Module.load (node:internal/modules/cjs/loader:981:32)
server:     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
server:     at Module.require (node:internal/modules/cjs/loader:1005:19)
server:     at require (node:internal/modules/cjs/helpers:102:18)
server:     at Object.ts-invariant/process/index.js (/home/michael/Projekte/JS/app-mivao-expo44/packages/server/build/index.js:25031:18)
server:     at __webpack_require__ (/home/michael/Projekte/JS/app-mivao-expo44/packages/server/build/index.js:750:30)
server:     at fn (/home/michael/Projekte/JS/app-mivao-expo44/packages/server/build/index.js:61:20)
server:     at Object.../../node_modules/@apollo/client/utilities/globals/fix-graphql.js (/home/michael/Projekte/JS/app-mivao-expo44/packages/server/build/index.js:11007:14)
server:     at __webpack_require__ (/home/michael/Projekte/JS/app-mivao-expo44/packages/server/build/index.js:750:30)
server:     at fn (/home/michael/Projekte/JS/app-mivao-expo44/packages/server/build/index.js:61:20)
server:     at Object.../../node_modules/@apollo/client/utilities/globals/index.js (/home/michael/Projekte/JS/app-mivao-expo44/packages/server/build/index.js:11093:19)
server:     at __webpack_require__ (/home/michael/Projekte/JS/app-mivao-expo44/packages/server/build/index.js:750:30)
server: ℹ ｢node-hmr-plugin｣: Node app stopped, exit code: 1

Versions npx envinfo@latest --preset apollo --clipboard

System: OS: Linux 5.11 Ubuntu 20.04.3 LTS (Focal Fossa) Binaries: Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node Yarn: 3.2.0-rc.12 - /usr/bin/yarn npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm Browsers: Firefox: 98.0.1

Project is based on apollo-universal-starter-kit using lerna and yarn workspaces
https://github.com/sysgears/apollo-universal-starter-kit

[tobiasdiez]

I think this is at least related to https://github.com/apollographql/invariant-packages/issues/227. Thus probably upgrading ts-invariant here in apollo-client to >0.10 should help.

[carlhopf]

agree, upgrading ts-invariant to ^0.10.0 should fix the issue. it now has the correct type: module field in package.json. source files should load correctly as esm (instead commonjs).

[tobiasdiez]

@benjamn Latest with https://github.com/apollographql/apollo-client/commit/d12921abab4e542d1b3cd9192fbdce5639cd35b5, apollo-client uses a recent enough version of ts-invariant which fixes this issue (at least for me it is working now). I think this issue can be thus closed.

[bignimbus]

Hi all, closing this per the conversation above. Let us know if you need more support here!