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

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

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 12
  • Comments: 24 (10 by maintainers)

Most upvoted comments

+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.

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.

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

Sorry for the preemptive close!