fix: source map sources

.changeset/wet-otters-check.md

@@ -0,0 +1,5 @@
+---
+'preact-cli': patch
+---
+
+Fix for source maps containing incorrect paths

packages/cli/package.json

@@ -92,6 +92,7 @@
     "sade": "^1.8.1",
     "size-plugin": "^3.0.0",
     "source-map": "^0.7.2",
+    "source-map-loader": "^1.1.1",
     "stack-trace": "0.0.10",
     "style-loader": "^2.0.0",
     "terser-webpack-plugin": "^4.2.3",

packages/cli/src/lib/webpack/prerender.js

@@ -45,63 +45,69 @@ async function handlePrerenderError(err, env, stack, entry) {
 	let errorMessage = err.toString();
 	let isReferenceError = errorMessage.startsWith('ReferenceError');
 	let methodName = stack.getMethodName();
-	let sourceMapContent, position, sourcePath, sourceLines, sourceCodeHighlight;
 
-	try {
-		sourceMapContent = JSON.parse(readFileSync(`${entry}.map`, 'utf-8'));
-	} catch (err) {
-		process.stderr.write(red(`Unable to read sourcemap: ${entry}.map\n`));
-	}
+	process.stderr.write('\n');
+	process.stderr.write(red(`\n${errorMessage}\n`));
 
-	if (sourceMapContent) {
-		await SourceMapConsumer.with(sourceMapContent, null, consumer => {
-			position = consumer.originalPositionFor({
-				line: stack.getLineNumber(),
-				column: stack.getColumnNumber(),
+	// If a methodName exists, it's likely user code
+	if (methodName) {
+		let sourceMapContent,
+			position,
+			sourcePath,
+			sourceLines,
+			sourceCodeHighlight;
+		try {
+			sourceMapContent = JSON.parse(readFileSync(`${entry}.map`, 'utf-8'));
+		} catch (err) {
+			process.stderr.write(red(`\n\nUnable to read sourcemap: ${entry}.map\n`));
+		}
+
+		if (sourceMapContent) {
+			await SourceMapConsumer.with(sourceMapContent, null, consumer => {
+				position = consumer.originalPositionFor({
+					line: stack.getLineNumber(),
+					column: stack.getColumnNumber(),
+				});
 			});
-		});
-
-		if (position.source) {
-			position.source = position.source
-				.replace('webpack://', '.')
-				.replace(/^.*~\/((?:@[^/]+\/)?[^/]+)/, (s, name) =>
-					require
-						.resolve(name)
-						.replace(/^(.*?\/node_modules\/(@[^/]+\/)?[^/]+)(\/.*)$/, '$1')
-				);
-
-			sourcePath = resolve(env.src, position.source);
-			sourceLines;
-			try {
-				sourceLines = readFileSync(sourcePath, 'utf-8').split('\n');
-			} catch (err) {
+
+			if (position.source) {
+				position.source = position.source
+					.replace('webpack://', '.')
+					.replace(/^.*~\/((?:@[^/]+\/)?[^/]+)/, (s, name) =>
+						require
+							.resolve(name)
+							.replace(/^(.*?\/node_modules\/(@[^/]+\/)?[^/]+)(\/.*)$/, '$1')
+					);
+
+				sourcePath = resolve(env.src, position.source);
+				sourceLines;
 				try {
-					sourceLines = readFileSync(
-						require.resolve(position.source),
-						'utf-8'
-					).split('\n');
+					sourceLines = readFileSync(sourcePath, 'utf-8').split('\n');
 				} catch (err) {
-					process.stderr.write(red(`Unable to read file: ${sourcePath}\n`));
+					try {
+						sourceLines = readFileSync(
+							require.resolve(position.source),
+							'utf-8'
+						).split('\n');
+					} catch (err) {
+						process.stderr.write(
+							red(`\n\nUnable to read file: ${sourcePath}\n`)
+						);
+					}
 				}
-				// process.stderr.write(red(`Unable to read file: ${sourcePath}\n`));
+				sourceCodeHighlight = '';
 			}
-			sourceCodeHighlight = '';
-		}
 
-		if (sourceLines) {
-			for (var i = -4; i <= 4; i++) {
-				let color = i === 0 ? red : yellow;
-				let line = position.line + i;
-				let sourceLine = sourceLines[line - 1];
-				sourceCodeHighlight += sourceLine ? `${color(sourceLine)}\n` : '';
+			if (sourceLines) {
+				for (var i = -4; i <= 4; i++) {
+					let color = i === 0 ? red : yellow;
+					let line = position.line + i;
+					let sourceLine = sourceLines[line - 1];
+					sourceCodeHighlight += sourceLine ? `${color(sourceLine)}\n` : '';
+				}
 			}
 		}
-	}
 
-	process.stderr.write('\n');
-	process.stderr.write(red(`${errorMessage}\n`));
-	// check if we have methodName (ie, the error originated in user code)
-	if (methodName) {
 		process.stderr.write(`method: ${methodName}\n`);
 		if (sourceMapContent & sourceCodeHighlight) {
 			process.stderr.write(
@@ -119,11 +125,11 @@ async function handlePrerenderError(err, env, stack, entry) {
 	} else {
 		process.stderr.write(
 			yellow(
-				'Cannot determine error position. This most likely means it originated in node_modules.'
+				'Cannot determine error position. This most likely means it originated in node_modules.\n\n'
 			)
 		);
-		process.stderr.write('\n\n');
 	}
+
 	process.stderr.write(
 		`This ${
 			isReferenceError ? 'is most likely' : 'could be'

packages/cli/src/lib/webpack/webpack-base-config.js

@@ -172,12 +172,17 @@ module.exports = function createBaseConfig(env) {
 					test: /\.m?[jt]sx?$/,
 					resolve: { mainFields: ['module', 'jsnext:main', 'browser', 'main'] },
 					type: 'javascript/auto',
-					loader: require.resolve('babel-loader'),
-					options: Object.assign(
-						{ babelrc: false },
-						createBabelConfig(env, { browsers }),
-						babelrc // intentionally overwrite our settings
-					),
+					use: [
+						{
+							loader: require.resolve('babel-loader'),
+							options: Object.assign(
+								{ babelrc: false },
+								createBabelConfig(env, { browsers }),
+								babelrc // intentionally overwrite our settings
+							),
+						},
+						require.resolve('source-map-loader'),
+					],
 				},
 				{
 					// LESS

packages/cli/tests/images/build.js

@@ -14,23 +14,23 @@ exports.default = Object.assign({}, common, {
 	'ssr-build/ssr-bundle.89e23.css': 1281,
 	'ssr-build/ssr-bundle.89e23.css.map': 2070,
 	'ssr-build/ssr-bundle.js': 11937,
-	'ssr-build/ssr-bundle.js.map': 32557,
+	'ssr-build/ssr-bundle.js.map': 42893,
 	'ssr-build/asset-manifest.json': 178,
 	'bundle.259c5.css': 901,
-	'bundle.fcca3.js': 21429,
-	'bundle.fcca3.js.map': 111801,
+	'bundle.f79fb.js': 21429,
+	'bundle.f79fb.js.map': 111801,
 	'favicon.ico': 15086,
 	'index.html': 2034,
 	'manifest.json': 455,
 	'preact_prerender_data.json': 11,
 	'push-manifest.json': 450,
 	'asset-manifest.json': 1074,
 	'route-home.chunk.df08e.css': 58,
-	'route-home.chunk.85051.js': 327,
-	'route-home.chunk.85051.js.map': 483,
+	'route-home.chunk.f5172.js': 327,
+	'route-home.chunk.f5172.js.map': 483,
 	'route-profile.chunk.7bcae.css': 61,
-	'route-profile.chunk.6d480.js': 3514,
-	'route-profile.chunk.6d480.js.map': 15454,
+	'route-profile.chunk.03a58.js': 3514,
+	'route-profile.chunk.03a58.js.map': 15454,
 });
 exports['default-esm'] = Object.assign({}, exports.default, {
 	'bundle.*.esm.js': 21135,

yarn.lock

@@ -2055,6 +2055,11 @@ abab@^2.0.0:
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a"
   integrity sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==
 
+abab@^2.0.5:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
+  integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
+
 abbrev@1, abbrev@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
@@ -11932,6 +11937,18 @@ source-map-js@^1.0.2:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
+source-map-loader@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-1.1.3.tgz#7dbc2fe7ea09d3e43c51fd9fc478b7f016c1f820"
+  integrity sha512-6YHeF+XzDOrT/ycFJNI53cgEsp/tHTMl37hi7uVyqFAlTXW109JazaQCkbc+jjoL2637qkH1amLi+JzrIpt5lA==
+  dependencies:
+    abab "^2.0.5"
+    iconv-lite "^0.6.2"
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+    source-map "^0.6.1"
+    whatwg-mimetype "^2.3.0"
+
 source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
@@ -13528,7 +13545,7 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3, whatwg-encoding@^1.0.5:
   dependencies:
     iconv-lite "0.4.24"
 
-whatwg-mimetype@^2.1.0, whatwg-mimetype@^2.2.0:
+whatwg-mimetype@^2.1.0, whatwg-mimetype@^2.2.0, whatwg-mimetype@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
   integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==