Apollo-client with parcel warnings

Question

Have been trying to setup apollo-client with parcel for my react app. Things work fine but in the console, there are plenty of warnings regarding missing source files in node_modules/apollo-client in my CI pipeline.

Have tried clearing yarn cache, removing node_modules and installing again. But the warnings are persistent. I might be missing something with parcel or babel configuration. Found few hints but they were webpack specific.

Following are the logs:

⚠️  Could not load source file "../../src/data/store.ts" in source map of "../node_modules/apollo-client/data/store.js".
⚠️  Could not load source file "../../src/util/Observable.ts" in source map of "../node_modules/apollo-client/util/Observable.js"
.
⚠️  Could not load source file "../../src/core/QueryManager.ts" in source map of "../node_modules/apollo-client/core/QueryManager.js".
⚠️  Could not load source file "../../src/data/mutations.ts" in source map of "../node_modules/apollo-client/data/mutations.js".
⚠️  Could not load source file "../../src/scheduler/scheduler.ts" in source map of "../node_modules/apollo-client/scheduler/scheduler.js".
⚠️  Could not load source file "../../src/data/queries.ts" in source map of "../node_modules/apollo-client/data/queries.js".
⚠️  Could not load source file "../../src/errors/ApolloError.ts" in source map of "../node_modules/apollo-client/errors/ApolloError.js".
⚠️  Could not load source file "../../src/core/networkStatus.ts" in source map of "../node_modules/apollo-client/core/networkStatus.js".
⚠️  Could not load source file "../src/ApolloClient.ts" in source map of "../node_modules/apollo-client/ApolloClient.js".
⚠️  Could not load source file "../../src/core/ObservableQuery.ts" in source map of "../node_modules/apollo-client/core/ObservableQuery.js".
⚠️  Could not load source file "../src/index.ts" in source map of "../node_modules/apollo-client/index.js".
⚠️  Could not load source file "../../src/core/types.ts" in source map of "../node_modules/apollo-client/core/types.js"

Answer 1

I ran into the same problem when setting up apollo-client with parcel for my react app (and am not using typescript). While I get the same warnings, the app does compile and does work. If I understand the situation correctly, parcel is trying to resolve sourcemaps from node_modules, but is not finding them correctly in the case of apollo-client.

An easy workaround to suppress the warnings is to add a simple tsconfig.json file to your project root:

./tsconfig.js

{
  "exclude": [
    "./node_modules",
    "**/*.spec.ts"
  ]
}

Answer 2

The cause for this problem is that parceljs tries to find the source files from the source maps. The files are existent you can check that by simply looking into the distributed folder. I do not know why the warnings are shown. However you are not alone with that problem see: https://github.com/parcel-bundler/parcel/issues/2185

To suppress the warnings you can use a CLI option: --log-level 1. However keep in mind that you will suppress all warnings, which I do not recommend!

If anyone is coming across the error: Property name expected type of string but got null you can use the following options to solve that problem: npx parcel watch ./server/src/YOUR_SOURCE_INDEX --out-dir ./YOUR_DESTINATION --no-hmr --target node

Also there is an issue for that too: https://github.com/apollographql/apollo-server/issues/2453