Apollo-client: Source maps point to non existent files

[biels]

Intended outcome:

Sourcemaps are detected and used correctly.
Actual outcome:
When building a typescript project that uses apollo with source maps, webpack produces the following outpùt:

WARNING in ./node_modules/apollo-client/util/Observable.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find source file '../../src/util/Observable.ts': Error: Can't resolve '../../src/util/Observable.ts' in 'C:\Users\biel\projects\MS\Inv\invoices\invoices-app\node_modules\apollo-client\util'
 @ ./node_modules/apollo-client/core/ObservableQuery.js 21:0-48 419:2-12
 @ ./node_modules/apollo-client/index.js
 @ ./src/core/data/client.ts
 @ ./src/index.tsx
 @ multi ./src/index.tsx webpack-hot-middleware/client

WARNING in ./node_modules/apollo-client/ApolloClient.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find source file '../src/ApolloClient.ts': Error: Can't resolve '../src/ApolloClient.ts' in 'C:\Users\biel\projects\MS\Inv\invoices\invoices-app\node_modules\apollo-client'
 @ ./node_modules/apollo-client/index.js 6:0-42 8:0-24 9:15-27
 @ ./src/core/data/client.ts
 @ ./src/index.tsx
 @ multi ./src/index.tsx webpack-hot-middleware/client

(and many more)

How to reproduce the issue:
Download the package from npm and check that index.js.map has the following content:
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EACL,eAAe,GAIhB,MAAM,wBAAwB,CAAC;AAahC,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAAO,YAAqC,MAAM,gBAAgB,CAAC;AAInE,8CAA8C;AAC9C,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,eAAe,YAAY,CAAC"}
Note the ../src/index.ts which ipoints to a file that doesn't exist. The package does not contain an src directory at all. My guess is that sourcemaps should either be self-contained or the src folder should be included to the npm package.

Versions

  System:
    OS: Windows 10
  Binaries:
    Yarn: 1.7.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 5.6.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    apollo-cache-inmemory: ^1.2.5 => 1.2.5
    apollo-client: ^2.3.5 => 2.3.5
    apollo-link: ^1.2.2 => 1.2.2
    apollo-link-error: ^1.1.0 => 1.1.0
    apollo-link-http: ^1.5.4 => 1.5.4
    react-apollo: ^2.1.9 => 2.1.9

[maapteh]

@hwillson is it possible to distribute your packages without sourcemaps since the reference is false anyway.

[viridia]

I'm having a similar problem with Parcel:

⠋ Building...info: Started listening on localhost:4000
⚠️  Could not load source file "../src/index.ts" in source map of "../../node_modules/apollo-client/index.js".
⚠️  Could not load source file "../src/index.ts" in source map of "../../node_modules/apollo-link-http/lib/index.js".
⚠️  Could not load source file "../src/index.ts" in source map of "../../node_modules/apollo-link/lib/index.js".
⚠️  Could not load source file "../src/index.ts" in source map of "../../node_modules/apollo-cache-inmemory/lib/index.js".
⚠️  Could not load source file "../src/index.ts" in source map of "../../node_modules/apollo-link-context/lib/index.js".
⚠️  Could not load source file "../src/index.ts" in source map of "../../node_modules/apollo-link-error/lib/index.js".
⚠️  Could not load source file "../../src/core/types.ts" in source map of "../../node_modules/apollo-client/core/types.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/errors/ApolloError.ts" in source map of "../../node_modules/apollo-client/errors/ApolloError.js".
⚠️  Could not load source file "../src/link.ts" in source map of "../../node_modules/apollo-link/lib/link.js".
⚠️  Could not load source file "../src/httpLink.ts" in source map of "../../node_modules/apollo-link-http/lib/httpLink.js".
⚠️  Could not load source file "../src/linkUtils.ts" in source map of "../../node_modules/apollo-link/lib/linkUtils.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/zen-observable-ts/lib/index.js".
⚠️  Could not load source file "../src/objectCache.ts" in source map of "../../node_modules/apollo-cache-inmemory/lib/objectCache.js".
⚠️  Could not load source file "../src/inMemoryCache.ts" in source map of "../../node_modules/apollo-cache-inmemory/lib/inMemoryCache.js".
⚠️  Could not load source file "../src/fragmentMatcher.ts" in source map of "../../node_modules/apollo-cache-inmemory/lib/fragmentMatcher.js".
⚠️  Could not load source file "../src/readFromStore.ts" in source map of "../../node_modules/apollo-cache-inmemory/lib/readFromStore.js".
⚠️  Could not load source file "../src/writeToStore.ts" in source map of "../../node_modules/apollo-cache-inmemory/lib/writeToStore.js".
⚠️  Could not load source file "../src/zenObservable.ts" in source map of "../../node_modules/zen-observable-ts/lib/zenObservable.js".
⚠️  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/index.ts" in source map of "../../node_modules/apollo-link-http-common/lib/index.js".
⚠️  Could not load source file "../src/fixPolyfills.ts" in source map of "../../node_modules/apollo-cache-inmemory/lib/fixPolyfills.js".
⚠️  Could not load source file "../src/cacheKeys.ts" in source map of "../../node_modules/apollo-cache-inmemory/lib/cacheKeys.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/depTrackingCache.ts" in source map of "../../node_modules/apollo-cache-inmemory/lib/depTrackingCache.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/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/index.ts" in source map of "../../node_modules/apollo-link-dedup/lib/index.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/dedupLink.ts" in source map of "../../node_modules/apollo-link-dedup/lib/dedupLink.js".

[sturoid]

Same issue as @viridia with apollo-client 2.4.12 and parcel-bundler 1.11.0.

[klemenoslaj]

I have the same issues with Angular CLI, or even with a clean webpack/typescript project.
Is there any plan to fix that?

[maapteh]

@klemenoslaj i dont think so, i made the PR https://github.com/apollographql/apollo-client/pull/4185 and asked the team which route to take since the current one is simply wrong. But no answer...

WARNING in ./node_modules/apollo-cache-inmemory/lib/writeToStore.js
[WEB] Module Warning (from ./node_modules/source-map-loader/index.js):
[WEB] (Emitted value instead of an instance of Error) Cannot find source file '../src/writeToStore.ts': Error: Can't resolve '../src/writeToStore.ts'

Their npm package includes a sourcemap line with a reference not included in the package itself.

[rue-mishakorablin]

Is there any traction on this?

[maapteh]

In version 3 this will be solved, see https://github.com/apollographql/apollo-client/pull/4185#issuecomment-527924492

[maclockard]

Source maps still point to non existent files as of @apollo/client 3.1.0

[maclockard]

looks like there are two issues:

1. prepareDist.js does not copy over the relevant source files to each package
2. prepareDist.js also needs to walk every sourcemap and fix the path so that it points to the copied file

Honestly, this feels like a pretty error prone packaging process. I would be curious why apollo-client doesn't just use a monorepo like apollo-server. If it did, there wouldn't be any need for path rewriting, which doesn't even fully work on the package.jsons since it only rewrites values and not keys (this misses the react-native key).

[prograhammer]

I'm seeing the same problem in v3.1.3. I'm also noticing that sourcesContent is not in the map files, which is very useful for browsers. Perhaps the build process (UglifyJs) or something is breaking the sourcemaps?

[prograhammer]

Here's what I did for a dirty quick work-around to fix those sourcemaps:

Drop this file in your project root, or linked package root, then update the code below to where it can find apollo.
In my case path.resolve('./node_modules/@apollo/client'):

fix-maps.js

/* eslint-disable */
const fs = require('fs');
const path = require('path');
async function* walk(dir) {
    for await (const d of await fs.promises.opendir(dir)) {
        const entry = path.join(dir, d.name);
        if (d.isDirectory()) yield* walk(entry);
        else if (d.isFile()) yield entry;
    }
}
async function main() {
    let counter;
    for await (const p of walk(path.resolve('./node_modules/@apollo/client'))) {
      counter++;
      if (p.indexOf('.js.map') !== -1) {
        const mappath = p;
        const jspath = p.replace('.map', '');
        // @TODO: Make these async for more perf.
        const js = fs.readFileSync(jspath, {encoding:'utf8', flag:'r'});
        const map = JSON.parse(fs.readFileSync(mappath, {encoding:'utf8', flag:'r'}));
        // Add missing source content to the .map files.
        map.sourcesContent = js;
        fs.writeFileSync(mappath, JSON.stringify(map));
      }
    }
    console.log(`Updated ${parseInt(counter)} files`);
}
main();

Then just run it with node fix-maps.js.

[mkaraula]

We are experiencing the same Issue with "@apollo/client": "3.2.2" and parcel

[mkaraula]

When changing sources":["../src/index.ts"] to sources":["./src/index.ts"]in node_modules/@apollo/client/index.js.map the warnings go away.

I dont really know how the build of this project works, otherwise I would contribute a fix by myself. But maybe my finding helps someone who knows the project better than me.

Turns out i just did not delete my parcel cache in between. So my "solution" is actually not working. Sorry for that!