Apollo Client is not compatible with Next.js _middleware due to eval/new Function calls

[ncphillips]

Intended outcome:

When using Apollo with Next.js I want to be able to use it in their new _middleware API

Actual outcome:

The build fails:

./node_modules/ts-invariant/lib/invariant.esm.js
Dynamic Code Evaluation (e. g. 'eval', 'new Function') not allowed in Middleware pages/_middleware

Import trace for requested module:
./node_modules/apollo-link/lib/bundle.esm.js
./node_modules/apollo-link-context/lib/bundle.esm.js
./pages/_middleware.ts

How to reproduce the issue:

Here is a repository that reproduces the issue

https://github.com/ncphillips/reproduce-apollo-middleware-build-failure

Versions

• apollo-boost: 0.4.9
• apollo-client: 2.6.10

[VincentGillot]

+1 We really need some kind of solution for this we are stuck with Next 12.0.2 now. I'm using Apollo 3.5.5

Only current fix I'm aware of is to manually build the gql query in a fetch api query, which is not really ideal.

[benjamn]

@ncphillips What version do you see in node_modules/ts-invariant/package.json (latest published version is 0.9.3)?

@VincentGillot Same question to you.

To both of you: can you tell if the error is happening because the Function constructor is actually invoked at runtime (it's a fallback to a fallback, so shouldn't be used in most cases), or just because some Next.js static check sees Function in the code and complains?

[ncphillips]

@benjamn it is 0.4.4.

Although apollo-client depends on 0.9.0 it seems that a number of other apollo libs depends on that version:

• apollo-boost
• apollo-cache-inmemory@^1.6.6
• apollo-link-http-common
• apollo-link@^1.2.14, apollo-link@^1.2.3
• apollo-utilities@^1.3.0

[ncphillips]

If I force install the latest version of ts-invariant I get more errors:

$ next build
(node:50958) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification.
(Use `node --trace-warnings ...` to show where the warning was created)
info  - Checking validity of types  
warn  - using beta Middleware (not covered by semver) - https://nextjs.org/docs/messages/beta-middleware
info  - Creating an optimized production build  
Failed to compile.

./node_modules/apollo-boost/node_modules/ts-invariant/lib/invariant.esm.js
Dynamic Code Evaluation (e. g. 'eval', 'new Function') not allowed in Middleware pages/_middleware

Import trace for requested module:
./node_modules/apollo-boost/lib/bundle.esm.js
./pages/_middleware.js

./node_modules/apollo-cache-inmemory/node_modules/ts-invariant/lib/invariant.esm.js
Dynamic Code Evaluation (e. g. 'eval', 'new Function') not allowed in Middleware pages/_middleware

Import trace for requested module:
./node_modules/apollo-cache-inmemory/lib/bundle.esm.js
./node_modules/apollo-boost/lib/bundle.esm.js
./pages/_middleware.js

./node_modules/apollo-client/node_modules/ts-invariant/lib/invariant.esm.js
Dynamic Code Evaluation (e. g. 'eval', 'new Function') not allowed in Middleware pages/_middleware

Import trace for requested module:
./node_modules/apollo-client/bundle.esm.js
./node_modules/apollo-boost/lib/bundle.esm.js
./pages/_middleware.js

./node_modules/apollo-link-http-common/node_modules/ts-invariant/lib/invariant.esm.js
Dynamic Code Evaluation (e. g. 'eval', 'new Function') not allowed in Middleware pages/_middleware

Import trace for requested module:
./node_modules/apollo-link-http-common/lib/bundle.esm.js
./node_modules/apollo-link-http/lib/bundle.esm.js
./node_modules/apollo-boost/lib/bundle.esm.js
./pages/_middleware.js

./node_modules/apollo-link/node_modules/ts-invariant/lib/invariant.esm.js
Dynamic Code Evaluation (e. g. 'eval', 'new Function') not allowed in Middleware pages/_middleware

Import trace for requested module:
./node_modules/apollo-link/lib/bundle.esm.js
./node_modules/apollo-boost/lib/bundle.esm.js
./pages/_middleware.js


> Build failed because of webpack errors
error Command failed with exit code 1.

[ncphillips]

You might be on to something. I do not see any references to eval or new Function inside of the mentioned files. There are some references to variables that contain the words Function

[VincentGillot]

@ncphillips What version do you see in node_modules/ts-invariant/package.json (latest published version is 0.9.3)?

@VincentGillot Same question to you.

To both of you: can you tell if the error is happening because the Function constructor is actually invoked at runtime (it's a fallback to a fallback, so shouldn't be used in most cases), or just because some Next.js static check sees Function in the code and complains?

0.9.3 for me. , As for the second question I'm really not sure.
My error is the same as the one posted by ncphillips.

Thing is the Next warning is now an error in the new version which is why it doesn't build. So no incompatible code might actually be run, specially since we are doing it locally, not on Edge servers.

[ncphillips]

I didn't notice this question

or just because some Next.js static check sees Function in the code and complains?

That is the problem. Their webpack config does static analysis

Here is where the error is created in the code

https://github.com/vercel/next.js/blob/d1a1a4c0f7561235394bdb1911f8a1c99ccdd237/packages/next/build/webpack/plugins/middleware-plugin.ts#L175-L185

[benjamn]

Is everyone here still using Apollo Client v2 (apollo-client instead of @apollo/client)? The older AC2 package does still depend on an older version of ts-invariant, which uses Function as a fallback, so that may be why you're still seeing this problem (if still using AC2). Newer versions also use Function, but I'm still curious who's using AC3 and who's using AC2.

As for the static analysis, I'm almost relieved to hear that's what it is, because I'm quite confident we can obfuscate the code in a way that will thwart any static analysis. If the problem was that Function(...) is actually invoked at runtime, then we would actually have to track down why that's happening and make it stop, which would probably be more difficult.

[benjamn]

Alright, here's my plan for the obfuscation: apollographql/invariant-packages#233

Can anyone provide a reproduction that's using @apollo/client (AC3), so we can verify this solves the problem?

[ncphillips]

@benjamn ours is @apollo/client@^3.1.3

[ncphillips]

I'm going to update my demo repo to use @apollo/client so I can confirm if this works

[ncphillips]

@benjamn

This is using the latest version of @apollo/client, which does not yet have your chages. I've updated the README to show the current error message from yarn build.

https://github.com/ncphillips/reproduce-apollo-middleware-build-failure

(Aside: thanks for your help!)

[benjamn]

Sorry for the preemptive close!

[benjamn]

@ncphillips Can you try @apollo/[email protected] when you have a chance? Using your reproduction (thanks!), that version of @apollo/client makes the error stop for me, though I did have to rm -rf .next before building again, after running npm i @apollo/client@latest.

[ncphillips]

Woo! That worked!

Well, almost

It worked in my reproduction repo but not in my actual repo.

It looks like there's another packages that end up importing old versions of ts-invariant or something:

Packages

    "apollo-link-context": "^1.0.20",
  

Build Errors

info  - Creating an optimized production build  
Failed to compile.

./node_modules/apollo-link/node_modules/ts-invariant/lib/invariant.esm.js
Dynamic Code Evaluation (e. g. 'eval', 'new Function') not allowed in Middleware pages/_middleware

Import trace for requested module:
./node_modules/apollo-link/lib/bundle.esm.js
./node_modules/apollo-link-context/lib/bundle.esm.js
./lib/apollo/getHttpLink.ts
./lib/apollo/initApollo.ts
./lib/apollo/index.ts
./pages/_middleware.ts

./node_modules/apollo-utilities/node_modules/ts-invariant/lib/invariant.esm.js
Dynamic Code Evaluation (e. g. 'eval', 'new Function') not allowed in Middleware pages/_middleware

Import trace for requested module:
./node_modules/apollo-utilities/lib/bundle.esm.js
./node_modules/apollo-link/lib/bundle.esm.js
./node_modules/apollo-link-context/lib/bundle.esm.js
./lib/apollo/getHttpLink.ts
./lib/apollo/initApollo.ts
./lib/apollo/index.ts
./pages/_middleware.ts


> Build failed because of webpack errors
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[benjamn]

This is a bit hacky (just for diagnostic purposes), but can you make any progress by removing those other ts-invariant installations?

rm -rf ./node_modules/apollo-link/node_modules/ts-invariant/
rm -rf ./node_modules/apollo-utilities/node_modules/ts-invariant/

This should force those packages to use ./node_moduels/ts-invariant instead of their own local copies, which presumably has the latest version?

If apollo-link or apollo-utilities are actually using something that's been removed from the ts-invariant package, that might be a problem, but there's a good chance they can use the more recent version with no hiccups. Alternatively, you may be able to replace imports of apollo-link with imports from @apollo/client/link/* packages, and apollo-utilities has become @apollo/client/utilities (which you should be able to import as a standalone package, though again there might be differences in the API compared to the older apollo-utilities package).

[ncphillips]

Okay super interesting. I'll look at importing via @apollo/client instead.

BUT

IT BUILDS

I updated the Next.js Webpack config to always resolve ts-invariant to the root node_modules instance:

config.resolve.alias['ts-invariant'] = path.resolve('./node_modules/ts-invariant')

So I can confirm that that's the issue. I'm going to push forward with this hack approach for my own benefit but I would suggest the apollo-link-context dependency tree be updated for this to ticket to be technically close-able

[vadimsabadosh]

@ncphillips
@benjamn
Hi there!
I have the same error, but I don't use apollo in middleware

My error shows because of this request in middleware and I don't have a solution for this.
Could you tell me please, did you fix this error?

[jchamale]

I had the same problem by importing a function with the async word, could this be related with transpiling? If I rewrite the code to use promises only, it works.

[maximus-lynn]

I've got the same error,

Why hasn't apollo-client just updated the package to [email protected]?

[phryneas]

@maximus-lynn Apollo Client has updated the dependency on ts-invariant to 0.10.3 in May 2022.

[phryneas]

I believe this issue has been resolved a long time ago - as a result, I'm going to close this.

If you are still noticing this problem, please update your dependencies.

Apollo Client 2 is very outdated at this point and we cannot guarantee any compatibility with modern Frameworks.
Also, packages like apollo-link and apollo-link-context have moved into @apollo/client years ago, so you should not need to use these at all nowadays.
Also, please ensure that the problem actually is with Apollo Client - I believe the async/await problems quoted here don't have anything to do with Apollo Client usage.

[github-actions]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.