babelrc with relative babel plugins are resolved incorrectly.

[gdborton]

🐛 bug report

Parcel builds fail when .babelrc files contain relative paths plugins.

🎛 Configuration (.babelrc, package.json, cli command)

{
  "plugins": [
    "./babel-plugin.js"
  ]
}

🤔 Expected Behavior

The path to the babel-plugin.js should be resolved relative to the babelrc.

😯 Current Behavior

Parcel is attempting to resolve babel-plugin.js from the files that it is transforming.

It creates and error like this:

/Users/gary_borton/code/parcel-tests/src/nested/test.js: Unknown plugin "../babel-plugin.js" specified in "base" at 0, attempted to resolve relative to "/Users/gary_borton/code/parcel-tests/src/nested"
    at /Users/gary_borton/code/parcel-tests/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
    at Array.map (<anonymous>)
    at Function.normalisePlugins (/Users/gary_borton/code/parcel-tests/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/Users/gary_borton/code/parcel-tests/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    at OptionManager.init (/Users/gary_borton/code/parcel-tests/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/gary_borton/code/parcel-tests/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/Users/gary_borton/code/parcel-tests/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at JSAsset.getParserOptions (/Users/gary_borton/code/parcel-tests/node_modules/parcel-bundler/src/assets/JSAsset.js:75:20)

💁 Possible Solution

I looked at this very briefly, looks like Parcel is just creating a new File from babel-core and babel-core is doing the resolving, but is passing babelrc: false
https://github.com/parcel-bundler/parcel/blob/master/src/assets/JSAsset.js#L74

In my mind since the config is coming from babelrc, that should be true, but I'm guessing Parcel is adding additional plugins and that's why it's passing false.

Another potential solution to this would be to resolve the plugins before passing to babel-core.

🔦 Context

💻 Code Sample

🌍 Your Environment

Software	Version(s)
Parcel	1.9.4
Node	8.9.1
npm/Yarn	6.1.0
Operating System	OSX

[gdborton]

I'm using babel plugins to slightly alter the code that parcel sees while prototyping some builds (require.ensure -> import()) and was hoping to just create a babel plugin directly in the code.

My workaround for this for now is to move the babel plugins into nested folders then just npm link them at the root of the repo.

[devongovett]

hmm it seems that babel tries to resolve plugins relative to the file being transformed rather than the .babelrc file. https://github.com/babel/babel/blob/6.x/packages/babel-core/src/transformation/file/options/build-config-chain.js#L37

We might have to resolve them ourselves prior to passing to babel? config is generated here: https://github.com/parcel-bundler/parcel/blob/master/src/transforms/babel.js

[pascalduez]

Hi,

this is also impacting local babel preset paths.

.
├── babel.config.js
├── package.json
├── samples
│   ├── index.html
│   └── index.js
└── src
     └── index.js

package.json

"babel": {
  "presets": [
    "./babel.config.js"
  ]
}

> parcel samples/index.html

Server running at http://localhost:1234 
🚨  /[...]]/samples/index.js: Couldn't find preset "./babel.config.js" relative to directory "/[...]/samples"
    at /[...]]/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (/[...]]/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/[...]]/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/[...]]/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/[...]]/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/[...]]/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/[...]]/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at JSAsset.getParserOptions (/[...]]/node_modules/parcel-bundler/src/assets/JSAsset.js:74:20)
    at <anonymous>

[pascalduez]

So the same issue seems to happens when extending configs.

.
├── .babelrc
├── package.json
├── samples
│   ├── index.html
│   └── index.js
└── src
     └── index.js

.babelrc

{
  "presets": ["@company/whatever"]
}

Presets inside the external config seems applied (React, Flow), but not plugins.

[EvilHacker]

Easy workaround for this in .babelrc.js:

module.exports = {
	plugins: [
		`${__dirname}/relative/path/to/my/local/plugin`,
	]
}

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.