Open paynecodes opened 3 years ago
Expected, you need to use sourceMapPathOverrides
for webpack or setup it to using file://
protocol
@alexander-akait I'm expecting to need sourceMapPathOverrides. There should be no need for the second mapping though. I'm fairly certain there is an issue here.
hm, I will look at this in near future, we don't override original source maps, so maybe you have broken sourceURL
?
The sourceURL
seems fine with and without source-map-loader
. The decoded sourceMappingURL
incorrect though once this loader is added to an otherwise standard next.js webpack config.
source-map-loader
Relevant eval block from .next/static/chunks/pages/index.js
/***/ "../../libs/ui/lib/Box.js":
/*!********************************!*\
!*** ../../libs/ui/lib/Box.js ***!
\********************************/
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
"use strict";
eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Box = void 0;\nvar react_1 = __importDefault(__webpack_require__(/*! react */ \"../../node_modules/react/index.js\"));\nexports.Box = function (props) {\n return (react_1.default.createElement(\"div\", { className: \"box\" }, props.children));\n};\n//# sourceMappingURL=Box.js.map//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9fTl9FLy4uLy4uL2xpYnMvdWkvbGliL0JveC5qcz81MTliIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFhO0FBQ2I7QUFDQSw0Q0FBNEM7QUFDNUM7QUFDQSw4Q0FBNkMsQ0FBQyxjQUFjLEVBQUM7QUFDN0QsV0FBVztBQUNYLDhCQUE4QixtQkFBTyxDQUFDLGdEQUFPO0FBQzdDLFdBQVc7QUFDWCxrREFBa0QsbUJBQW1CO0FBQ3JFO0FBQ0EiLCJmaWxlIjoiLi4vLi4vbGlicy91aS9saWIvQm94LmpzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiXCJ1c2Ugc3RyaWN0XCI7XG52YXIgX19pbXBvcnREZWZhdWx0ID0gKHRoaXMgJiYgdGhpcy5fX2ltcG9ydERlZmF1bHQpIHx8IGZ1bmN0aW9uIChtb2QpIHtcbiAgICByZXR1cm4gKG1vZCAmJiBtb2QuX19lc01vZHVsZSkgPyBtb2QgOiB7IFwiZGVmYXVsdFwiOiBtb2QgfTtcbn07XG5PYmplY3QuZGVmaW5lUHJvcGVydHkoZXhwb3J0cywgXCJfX2VzTW9kdWxlXCIsIHsgdmFsdWU6IHRydWUgfSk7XG5leHBvcnRzLkJveCA9IHZvaWQgMDtcbnZhciByZWFjdF8xID0gX19pbXBvcnREZWZhdWx0KHJlcXVpcmUoXCJyZWFjdFwiKSk7XG5leHBvcnRzLkJveCA9IGZ1bmN0aW9uIChwcm9wcykge1xuICAgIHJldHVybiAocmVhY3RfMS5kZWZhdWx0LmNyZWF0ZUVsZW1lbnQoXCJkaXZcIiwgeyBjbGFzc05hbWU6IFwiYm94XCIgfSwgcHJvcHMuY2hpbGRyZW4pKTtcbn07XG4vLyMgc291cmNlTWFwcGluZ1VSTD1Cb3guanMubWFwIl0sInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///../../libs/ui/lib/Box.js\n");
/***/ }),
decoded sourceMappingURL
{"version":3,"sources":["webpack://_N_E/../../libs/ui/lib/Box.js?519b"],"names":[],"mappings":"AAAa;AACb;AACA,4CAA4C;AAC5C;AACA,8CAA6C,CAAC,cAAc,EAAC;AAC7D,WAAW;AACX,8BAA8B,mBAAO,CAAC,gDAAO;AAC7C,WAAW;AACX,kDAAkD,mBAAmB;AACrE;AACA","file":"../../libs/ui/lib/Box.js.js","sourcesContent":["\"use strict\";\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.Box = void 0;\nvar react_1 = __importDefault(require(\"react\"));\nexports.Box = function (props) {\n return (react_1.default.createElement(\"div\", { className: \"box\" }, props.children));\n};\n//# sourceMappingURL=Box.js.map"],"sourceRoot":""}
source-map-loader
Relevant eval block from .next/static/chunks/pages/index.js
/***/ "../../libs/ui/lib/Box.js":
/*!********************************!*\
!*** ../../libs/ui/lib/Box.js ***!
\********************************/
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
"use strict";
eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.Box = void 0;\nvar react_1 = __importDefault(__webpack_require__(/*! react */ \"../../node_modules/react/index.js\"));\nexports.Box = function (props) {\n return (react_1.default.createElement(\"div\", { className: \"box\" }, props.children));\n};\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9fTl9FLy4uL2xpYnMvdWkvc3JjL0JveC50c3g/ZjBlYSJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7QUFBQSxxR0FBMEI7QUFFYixXQUFHLEdBQWEsVUFBQyxLQUFLO0lBQ2pDLE9BQU8sQ0FBQyx1Q0FBSyxTQUFTLEVBQUMsS0FBSyxJQUFFLEtBQUssQ0FBQyxRQUFRLENBQU8sQ0FBQyxDQUFDO0FBQ3ZELENBQUMiLCJmaWxlIjoiLi4vLi4vbGlicy91aS9saWIvQm94LmpzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuXG5leHBvcnQgY29uc3QgQm94OiBSZWFjdC5GQyA9IChwcm9wcykgPT4ge1xuICByZXR1cm4gKDxkaXYgY2xhc3NOYW1lPVwiYm94XCI+e3Byb3BzLmNoaWxkcmVufTwvZGl2Pik7XG59Il0sInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///../../libs/ui/lib/Box.js\n");
/***/ }),
decoded sourceMappingURL
{"version":3,"sources":["webpack://_N_E/../libs/ui/src/Box.tsx?f0ea"],"names":[],"mappings":";;;;;;AAAA,qGAA0B;AAEb,WAAG,GAAa,UAAC,KAAK;IACjC,OAAO,CAAC,uCAAK,SAAS,EAAC,KAAK,IAAE,KAAK,CAAC,QAAQ,CAAO,CAAC,CAAC;AACvD,CAAC","file":"../../libs/ui/lib/Box.js.js","sourcesContent":["import React from \"react\";\n\nexport const Box: React.FC = (props) => {\n return (<div className=\"box\">{props.children}</div>);\n}"],"sourceRoot":""}
:warning: Notice the single
../
which is incorrect given the project structure
I'm struggling to debug where this may occur.
To be honestly it is expected, you try to load files outside context
(i.e. /apps/app
), so some sources
are broken, they outside namespace
(i.e. _N_E
) and you need mapping for this too
I hear what you are saying about this being expected. Do you think this is still a bug? I believe there will be many more users who need to resolve source maps this way as webpack 5 adoption grows.
Can you point me at which lines of code may cause this behavior?
There is nothing specified, we just resolve sources
and load them from ts with absolute path, when webpack covert when to relative like path.relative(context, source)
Attempting to reference a related issue: https://github.com/webpack/webpack/issues/3603
So 2 years have passed and this bug has not been fixed ?
@paynecodes You can always send a PR
So 2 years have passed and this bug has not been fixed ?
my bad...
should first check if the sourcemap file sources
in the npm package is correctly mapped.
for example, the source file src/index.ts
is compiled by gulp and output to dist/index.js
and dist/index.js.map
, sourcemap content like this:
{
"version": 3,
"file": "index.js",
"names": [
"..."
],
"sources": [
"index.ts"
],
"sourcesContent": ["..."],
"mappings": "..."
}
the sources
is incorrect, and should be ../src/index.ts
, see gulp-sourcemaps#alter-sources-property-on-sourcemaps
Expected Behavior
Breakpoint should be bound in vscode debugger without
sourceMapPathOverrides
hacks.Actual Behavior
Breakpoint is not bound.
Code
How Do We Reproduce?
Clone and install
yarn install
Start the app
yarn dev
from the rootDebug the app in vscode
Launch Chrome
debug configuration in vscodeSet a breakpoint on line 4 of
libs/ui/src/Box.tsx
launch.json
hack where I map a single../
to what it should be,../../
. Comment out line 16 or launch.json and restart the debugger to reproduce the problem.