babel / babel/babel-loader

absoluteResourcePath is still relative for many files

Open
#770 8 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
4.8k
Forks
456
Avg merge
9h 19m
Merged PRs (30d)
2

Description

**I'm submitting a bug report**

**Webpack Version:**
4.29.5

**Babel Core Version**:
7.3.3

**Babel Loader Version**:
8.0.5

**Please tell us about your environment:**
OSX

**Current behavior:**

Related issue: https://github.com/babel/babel-loader/issues/480

`absoluteResourcePath` is still relative for some files when using babel-loader:

```js
{ identifier: '../../../src/internal/util/toSubscriber.ts',
shortIdentifier: '../../../src/internal/util/toSubscriber.ts',
resource: '../../../src/internal/util/toSubscriber.ts',
resourcePath: '../../../src/internal/util/toSubscriber.ts',
absoluteResourcePath: '../../../src/internal/util/toSubscriber.ts',
allLoaders: '',
query: '',
moduleId: '',
hash: '5f60',
namespace: '' }
```

Note how `absoluteResourcePath` is not absolute and it's impossible to know what file it refers to (it's inside rxjs, but it could be anywhere). The entry for `main.js` is absolute, but not for files inside rxjs (I suspect it has something to do with those files having original sourcemaps).

I also double checked the published rxjs source maps to make sure the source maps are all correct (they are). I also observed this with multiple other libraries like popper.js, @sentry/browser, react-bootstrap, react-transition-group.

The result of this is a completely messed up file tree in Chrome dev tools, with library files appearing in your source folders (as they are missing the `node_modules` component of the path etc). Even when searching for files it's not clear anymore if a file belongs to a library or to the source (imagine something like `util.js`). This is true even if you're not using the `devtoolModuleFilenameTemplate` option, I just used that in the example for logging.

**Expected/desired behavior:**

`absoluteResourcePath` should be an absolute path to the file inside `/path/to/project/node_modules/rxjs`.

* **If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem along with a gist/jsbin of your webpack configuration.**

Minimal repro: https://github.com/felixfbecker/babel-loader-source-map-bug-repro

Contributor guide

Open the contributing guide

Research direction

Start by running the linked minimal repro and inspecting its webpack configuration, especially the source-map handling and devtoolModuleFilenameTemplate behavior. Compare the generated absoluteResourcePath values for application files and dependencies, then verify that dependency paths resolve under the project’s node_modules directory and produce a correct Chrome DevTools file tree.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, webpack
Domain
build-system
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.