diff --git a/.changeset/wet-otters-check.md b/.changeset/wet-otters-check.md new file mode 100644 index 000000000..74cb4fc5a --- /dev/null +++ b/.changeset/wet-otters-check.md @@ -0,0 +1,5 @@ +--- +'preact-cli': patch +--- + +Fix for source maps containing incorrect paths diff --git a/packages/cli/package.json b/packages/cli/package.json index ae8c3b499..ec1c0e44a 100644 --- a/packages/cli/package.json +++ b/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", diff --git a/packages/cli/src/lib/webpack/prerender.js b/packages/cli/src/lib/webpack/prerender.js index 5fa5ab94a..846d391ff 100644 --- a/packages/cli/src/lib/webpack/prerender.js +++ b/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' diff --git a/packages/cli/src/lib/webpack/webpack-base-config.js b/packages/cli/src/lib/webpack/webpack-base-config.js index a98b25d17..31f95e4e1 100644 --- a/packages/cli/src/lib/webpack/webpack-base-config.js +++ b/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 diff --git a/packages/cli/tests/images/build.js b/packages/cli/tests/images/build.js index 13646ae80..fb41975a1 100644 --- a/packages/cli/tests/images/build.js +++ b/packages/cli/tests/images/build.js @@ -14,11 +14,11 @@ 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, @@ -26,11 +26,11 @@ exports.default = Object.assign({}, common, { '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, diff --git a/yarn.lock b/yarn.lock index 730ac5af8..543da18bf 100644 --- a/yarn.lock +++ b/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==