ESLint cannot get correct value on createHttpLink

Help
,
1

So when im linting my nextJS project with apollo etc. I’m getting the error TypeError: Cannot read property 'value' of null.

And then it specific sends the line to this code: * marks the line that it says the error is on.

 const httpLink = createHttpLink({
*   uri: `${process.env.domain}/apiroute`,
 });

Tried looking around but cannot find any solution, i have tried checking the eslint packages but no luck.

My eslint packages of right now:

"eslint": "^7.32.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-next": "^11.1.2",
"eslint-plugin-graphql": "^4.0.0",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.25.2",
"eslint-plugin-react-hooks": "^4.2.0",
1 Like
2

Use the search all feature in vs code, turn on regex mode, and put in [^?].values. Should help you find a null-unsafe access if you have any in your code.

Otherwise, please provide the stack trace.

3

The thing is its not that like the only that trace if litterely the error im getting using this code

import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';

const httpLink = createHttpLink({
  uri: `url`,
});

const headsLink = setContext((_, { headers }) => ({
  headers: {
    ...headers,
    'X-GraphQL-Cost-Include-Fields': true,
    Accept: 'application/graphql',
  },
}));

const client = new ApolloClient({
  link: headsLink.concat(httpLink),
  cache: new InMemoryCache()
});

export default client

And when i run npx next lint the only stack trace im getting is this

PS C:\Users\Melon\Documents\Projects\%Project%> npx next lint
info  - Loaded env from C:\Users\Melon\Documents\Projects\%Project%\.env
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
TypeError: Cannot read property 'value' of null
Occurred while linting C:\Users\Melon\Documents\Projects\%Project%\lib\client.js:5

I can still program my code but i cant lint, so its kinda a struggle if i miss something in the code :stuck_out_tongue:

4

Sounds like the issue is in webpack or the webpack config. Have you tried disabling it or looking at the webpack bundle?

I don’t really use nextjs, but I didn’t even know they had a client-side setup.

Maybe hit up nextjs’ github, or look through webpack’s issues?

5

Will do that to thanks.

But the thing is it happened after an apollo client update so thats why i naturally went here.

6

Does nest provide its own version of Apollo Client? If so, you might have issues stemming from that.

Yarn v3 can help make dependency issues more obvious, if the issue might be stemming from there.