Incorrect sourceMappingURL path

[paynecodes]

• Operating System: macOS 11.2.3
• Node Version: 14.16.0
• NPM Version: 6.14.11
• yarn version: 1.22.10
• webpack Version: 5.31.0
• source-map-loader Version: 2.0.1

Expected Behavior

Breakpoint should be bound in vscode debugger without sourceMapPathOverrides hacks.

Actual Behavior

Breakpoint is not bound.

Code

// apps/app/next.config.js
module.exports = {
  future: {
    webpack5: true,
  },
  webpack: (config) => {
    config.module.rules.push({
      test: /\.js$/,
      enforce: "pre",
      use: ["source-map-loader"],
    });
    config.ignoreWarnings = [/Failed to parse source map/];

    return config;
  },
};

// .vscode/launch.json
{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/apps/app",
      "trace": true,
      "sourceMapPathOverrides": {
        // This seems fine, perhaps necessary
        "webpack://_N_E/*": "${webRoot}/*",
        // This is addressing a bug where sourceMappingURL only
        // has has `../` instead of `../../`
        "webpack://_N_E/../libs/*": "${webRoot}/../../libs/*"
      }
    }
  ]
}

How Do We Reproduce?

Clone and install

• Clone https://github.com/paynecodes/source-map-loader-issue
• Run yarn install

Start the app

• Run yarn dev from the root

Debug the app in vscode

• Run the Launch Chrome debug configuration in vscode
  
• Set a breakpoint on line 4 of libs/ui/src/Box.tsx

  import React from "react";
  
  export const Box: React.FC = (props) => {
    return <div className="box">{props.children}</div>;
  }

• This breakpoint will only be hit with the 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.

  { "webpack://_N_E/../libs/*": "${webRoot}/../../libs/*" }

[alexander-akait]

Expected, you need to use sourceMapPathOverrides for webpack or setup it to using file:// protocol

[paynecodes]

@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.

[alexander-akait]

hm, I will look at this in near future, we don't override original source maps, so maybe you have broken sourceURL?

[paynecodes]

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.

Without 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":""}

With 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":""}

⚠️ Notice the single ../ which is incorrect given the project structure

I'm struggling to debug where this may occur.

[alexander-akait]

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

[paynecodes]

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?

[alexander-akait]

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)

[paynecodes]

Attempting to reference a related issue: webpack/webpack#3603

[peakchen90]

So 2 years have passed and this bug has not been fixed ?

[alexander-akait]

@paynecodes You can always send a PR

[peakchen90]

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