"Failed to parse source map from..." causes Apollo Client to not fetch data during dev mode

Intended outcome:

• No warnings during DEV mode
• Apollo Client being able to fetch data properly

Actual outcome:

After upgrading to v3.6.2, and using the DEV mode in the app (created through CRA, current v5.0.1), I get this in the log

Compiled with warnings.

Failed to parse source map from '/project/path/node_modules/ts-invariant/src/invariant.ts' file: Error: ENOENT: no such file or directory, open '/project/path/node_modules/ts-invariant/src/invariant.ts'

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in ./node_modules/ts-invariant/lib/invariant.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/project/path/node_modules/ts-invariant/src/invariant.ts' file: Error: ENOENT: no such file or directory, open '/project/path/node_modules/ts-invariant/src/invariant.ts'

webpack compiled with 1 warning
Files successfully emitted, waiting for typecheck results...
Issues checking in progress...
No issues found.

The result is that the app loads and data is fetched only on that initial load. Subsequent data fetches are not happening in the specified polling interval. This only happens during DEV mode, when I build and deploy the app, it works as before the Apollo Client upgrade. If I check the network tab in the browser, I do not see any requests being sent (after the initial one).

I can make the warning go away by using GENERATE_SOURCEMAP=false in the .env file, but clearly that does not fix the issue.

How to reproduce the issue:

This is visible on the UI we have for Selenium Grid, so you can clone de repository:

git clone --depth=1 https://github.com/SeleniumHQ/selenium

Then cd javascript/grid-ui, npm install and npm start.

Versions

  System:
    OS: macOS 12.3.1
  Binaries:
    Node: 16.15.0 - /opt/homebrew/opt/node@16/bin/node
    npm: 8.5.5 - /opt/homebrew/opt/node@16/bin/npm
  Browsers:
    Chrome: 100.0.4896.127
    Edge: 101.0.1210.32
    Firefox: 99.0.1
    Safari: 15.4
  npmPackages:
    @apollo/client: ^3.6.2 => 3.6.2

[diemol]

Right, to see activity you’d need to start executing WebDriver scripts to create sessions and see things moving, etc… However, I do not think that is necessary to see that subsequent requests are not happening. I recorded a couple of videos to show what I am trying to mean.

Here, in dev mode, the app loads, but no more calls to the graphql endpoint are made.

https://user-images.githubusercontent.com/5992658/168170001-18f9b4a9-4687-4b52-b61b-d36d123f2179.mp4

And here, when the application has been built, so to say production mode, requests to the graphql endpoint are made every 5 seconds (as configured).

https://user-images.githubusercontent.com/5992658/168170336-be26a57f-d49c-43a7-b655-e99ecccdd4e9.mp4

I hope that shows the difference and what I am trying to explain. Thanks for your patience with my slow responses.

[diemol]

@benjamn sorry for the late response, I was sick for a couple of days.

I thought the server was not needed, because even if the server is down, one can see that no more requests happen by inspecting the DevTools network tab in the browser.

But if you want to get it running, the easiest way would be:

docker run -d -p 4444:4444 -e SE_OPTS="--allow-cors true" --shm-size="2g" selenium/standalone-firefox:4.1.4-20220427

I will try the workaround mentioned above and report back soon. Thank you.