"DevTools failed to parse SourceMap" for sapper-template#rollup

[mdempsky]

When I build sapper-template using the rollup configuration, loading the page in Chrome 75 prints Devtools failed to parse SourceMap: http://localhost:3000/client/client.0e04fd89.js.map.

Repro steps are just:

npx degit "sveltejs/sapper-template#rollup" my-app
cd my-app
npm install
npm run build
node __sapper__/build

and then open http://localhost:3000 in Chrome, and open the DevTools console.

Notably, if the webpack config is used and tweaked to enable source maps in production builds like so:

-		devtool: dev && 'inline-source-map'
+		devtool: dev ? 'inline-source-map' : 'source-map',

then there's no error message, and source maps seem to work correctly.

[mdempsky]

Playing around some more, it looks like other source maps are compiling okay. It's just that one particular file that's problematic.

The sapper build output shows:

     702 B about.7c3ca7ba.js
           └ src/routes/about.svelte
   1.06 kB [slug].f6cb11ea.js
           └ src/routes/blog/[slug].svelte
   1.38 kB index.d9fa4aad.js
           └ src/routes/index.svelte
   1.68 kB index.11820701.js
           └ src/routes/blog/index.svelte
   3.84 kB chunk.fee82572.js
           └ node_modules/svelte/internal/index.mjs
   13.3 kB client.0e04fd89.js
           │ src/node_modules/@sapper/app.mjs (38.9%)
           │ src/node_modules/@sapper/internal/App.svelte (22.9%)
           │ src/components/Nav.svelte (12.3%)
           │ src/routes/_error.svelte (11.2%)
           │ src/routes/_layout.svelte (7.2%)
           │ node_modules/svelte/store/index.mjs (3.9%)
           │ src/node_modules/@sapper/internal/manifest-client.mjs (3.3%)
           │ src/client.js (0.2%)
           └ src/node_modules/@sapper/internal/shared.mjs (0.2%)

and it's only the last chunk that's failing.

Maybe because it's the only .js file with multiple sources? Edit: Doesn't seem to be simply a multiple-files problem. Adding a dummy _foo.js file and importing it in about.svelte did not reproduce the issue with that chunk.

[mdempsky]

Looks like the .js.map just isn't valid JSON:

$ python -m json.tool __sapper__/build/client/client.82d27296.js.map 
Invalid \uXXXX escape: line 1 column 7570 (char 7569)

It looks like it's this part of the .js.map file: \n\t\tcss: \undefined,

Which I can't find verbatim in my source tree, but looks like these snippets from src/node_modules/@sapper/internal/manifest-client.mjs:

export const components = [
        {
                js: () => import("../../../routes/index.svelte"),
                css: "__SAPPER_CSS_PLACEHOLDER:index.svelte__"
        },
        {
                js: () => import("../../../routes/about.svelte"),
                css: "__SAPPER_CSS_PLACEHOLDER:about.svelte__"
        },
        {
                js: () => import("../../../routes/blog/index.svelte"),
                css: "__SAPPER_CSS_PLACEHOLDER:blog/index.svelte__"
        },
        {
                js: () => import("../../../routes/blog/[slug].svelte"),
                css: "__SAPPER_CSS_PLACEHOLDER:blog/[slug].svelte__"
        }
];

I'm guessing the attempt at substituting __SAPPER_CSS_PLACEHOLDER is failing.

[mdempsky]

Instrumenting node_modules/sapper/dist/core.js like so:

@@ -544,7 +546,9 @@
 		const source = fs.readFileSync(`${asset_dir}/${file}`, 'utf-8');
 
 		const replaced = source.replace(/["']__SAPPER_CSS_PLACEHOLDER:(.+?)__["']/g, (m, route) => {
-			return JSON.stringify(result.chunks[route]);
+			const xxx = JSON.stringify(result.chunks[route]);
+			console.log("replaced", m, route, xxx);
+			return xxx;
 		});
 
 		fs.writeFileSync(`${asset_dir}/${file}`, replaced);

I see:

replaced "__SAPPER_CSS_PLACEHOLDER:index.svelte__" index.svelte ["index.d9fa4aad.css"]
replaced "__SAPPER_CSS_PLACEHOLDER:about.svelte__" about.svelte []
replaced "__SAPPER_CSS_PLACEHOLDER:blog/index.svelte__" blog/index.svelte ["index.11820701.css"]
replaced "__SAPPER_CSS_PLACEHOLDER:blog/[slug].svelte__" blog/[slug].svelte ["[slug].f6cb11ea.css"]
replaced "__SAPPER_CSS_PLACEHOLDER:index.svelte__\"\n\t},\n\t{\n\t\tjs: () => ...

and it goes on quite a bit longer.

It looks like what's happening is:

1. We're matching here where the JSON string has already been quoted, so it's matching against \"__SAPPER_CSS_PLACEHOLDER:foo__\" instead of just "__SAPPER_CSS_PLACEHOLDER:foo__".

2. Because the regex expects __['"], the regex matches much further than expected, and the resulting match is invalid, hence returns undefined.

3. The unmatched \ at the beginning gets left in place, and we end up with \undefined along with missing out on a lot of data.