Plugin source maps contain incorrect source paths

[noahtallen]

Description

When sourcemaps are generated for the Gutenberg plugin, a final source map includes a "sources" section pointing back to the original source files. This can be useful for tools which might map a stack trace to a source file in GitHub.

An example source path for the plugin looks like this: webpack://wp/./packages/annotations/build-module/format/@wordpress/annotations/src/format/annotation.js.

With the duplicate path in the string, it's not immediately correct. (Though you could manually edit it with a script pretty easily.)

After digging into the webpack config, I believe this happens because our babel transform step happens outside of webpack. Webpack ultimately imports the build-module code already generated by bin/packages/build.js (which runs babel transform), and this code already includes source maps. In those files, the source file points to @wordpress/annotations/src/format/annotation.js, for example.

I think when webpack transforms those sources, it sees the original directory of the file it imports as packages/annotations/build-module/format, but when it tries to look up the file name, it gets @wordpress/annotations/src/format/annotation.js and combines the two strings.

I'm not yet sure the best approach for fixing this, as this @wordpress/ source map is technically correct if you were consuming the source map as a 3rd party package from npm.

Step-by-step reproduction instructions

Inspect the source maps included in the plugin release.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[noahtallen]

@jsnajdr I'm curious if you have any quick thoughts on this one!

[t-hamano]

@noahtallen It looks like #51401 is trying to solve this problem.

[noahtallen]

Nice, I'll test that!