fix: use file extension for absolute helper imports in @babel/plugin-transform-runtime

[charlessuh]

Q	A
Fixed Issues?
Patch: Bug Fix?	Yes
Major: Breaking Change?
Minor: New Feature?
Tests Added + Pass?	Yes
Documentation PR Link
Any Dependency Changes?
License	MIT

Note when "absoluteRuntime" is false (the default), @babel/plugin-transform-runtime will inserts imports like @babel/runtime/helpers/esm/classCallCheck, while when it is true, it inserts imports to absolute paths like /Users/you/project/.yarn/cache/@babel-runtime-npm-7.16.0-2f490bebb5-bfbca3ec52.zip/node_modules/@babel/runtime/helpers/esm/classCallCheck.

When using babel to transpile files in an ESM package (aka package.json has "module": true), the latter type fails for me using yarn 3.0.2 and webpack 5.62.1.

[babel-bot]

Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/49744/

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit bf6fcb8:

Sandbox	Source
babel-repl-custom-plugin	Configuration
babel-plugin-multi-config	Configuration

[JLHwung]

As a workaround you can add nodeLinker: node-modules to .yarnrc.yml.

/Users/you/project/.yarn/cache/@babel-runtime-npm-7.16.0-2f490bebb5-bfbca3ec52.zip/node_modules/@babel/runtime/helpers/esm/classCallCheck

is a path returned by require.resolve, which is modified by Yarn PnP. If you want to use absolute path, you can try to add https://github.com/arcanis/pnp-webpack-plugin to your webpack config so it can handle such paths.

[charlessuh]

Just a FYI, this is not specific to yarn and this is ONLY an issue if you have the absoluteRuntime option turned on transpiling files inside an ESM package, so the plugin uses absolute paths.

For example, with npm, the path is different but webpack still returns an error:

BREAKING CHANGE: The request '/Users/chsuh/test/node_modules/@babel/runtime/helpers/esm/classCallCheck' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

[nicolo-ribaudo]

Thanks! I would prefer to merge #12827 instead of this, since it's older. I'm sorry that that PR has been completely forgotten 😅