Skip to content

Suggestion: improve default source map behaviour for Node users #9601

Closed
@OliverJAsh

Description

@OliverJAsh

Feature request

What is the expected behavior?

Given:

./package.json (all latest versions):

{
  "dependencies": {
    "source-map-support": "^0.5.13",
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.7"
  }
}

./webpack.config.js:

const pathHelpers = require("path");

// Expect `__dirname` to be `/config/target/`.
const ROOT_PATH = __dirname;
const TARGET_PATH = pathHelpers.join(ROOT_PATH, "./target/");
const SRC_PATH = pathHelpers.join(ROOT_PATH, "./src/");

const ENTRY_FILENAME = "index.js";
const OUTPUT_FILENAME = "index.js";

const config = {
  mode: "development",
  target: "node",
  devtool: "source-map",
  entry: pathHelpers.resolve(SRC_PATH, ENTRY_FILENAME),
  output: {
    path: TARGET_PATH,
    filename: OUTPUT_FILENAME
  }
};

module.exports = config;

./src/index.js (entry file):

const fn = () => {
  throw new Error("foo");
};

fn();

When running:

webpack
node --require source-map-support/register ./target/index.js

The error stack trace looks like this:

/Users/oliverash/Development/webpack-source-map-test/target/webpack:/src/index.js:2
    throw new Error('foo')
^
Error: foo
    at fn (/Users/oliverash/Development/webpack-source-map-test/target/webpack:/src/index.js:2:1)

Observe how the path to the source file where the error originated is resolved against the source map, but only partially so. This makes it difficult to interact with the stack trace. E.g. in iTerm, it's usually possibly to Command + click a path to open it, but this is not possible here because the path is invalid. Ideally the original file path would be shown.

IIUC, we can fix this using devtoolModuleFilenameTemplate/moduleFilenameTemplate:

   output: {
     path: TARGET_PATH,
     filename: OUTPUT_FILENAME,
+    devtoolModuleFilenameTemplate: "[absolute-resource-path]"
   }

Now the error stack trace looks like this:

/Users/oliverash/Development/webpack-source-map-test/src/index.js:2
    throw new Error('foo')
^
Error: foo
    at fn (/Users/oliverash/Development/webpack-source-map-test/src/index.js:2:1)

However, I would like to suggest that we make this behaviour the default when using webpack to build code that will be ran by Node (i.e. when target: 'node' as in this example).

Secondly, when using eval-source-map instead of source-map (used above), devtoolModuleFilenameTemplate does not help. The error stack trace always looks like this:

webpack-internal:///./src/index.js:2
    throw new Error('foo')
    ^

Error: foo
    at fn (webpack-internal:///./src/index.js:2:11)

Again, this path is difficult to interact with—ideally the original file path would be shown. What is the recommended fix in this case?

Are you willing to work on this yourself?
yes

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions