Custom Babel Plugins not working

[robstown]

Quick, short summary: I am trying to use ES6 decorators with transform-decorators-legacy and transform-decorators but CK3 does not seem to be picking them up. I installed them in my project directory.

Expected results: The specified plugins would be used

Actual results: I get error messages when using transforms

Exact steps to reproduce: See attached zip file project folder. Try to compile main.js

A link to download a simplified project or file that shows the issue: mobx.zip

[subhaze]

Are you using a preset?

[robstown]

I thought that was for the list of selectable presets only (i.e. ones that may be in one of the presets). Custom (i.e., not in list) are easy to implement in parallel with presets

On Thursday, September 1, 2016, Michael Russell notifications@github.com wrote:

Are you using a preset? [image: screenshot 2016-09-01 10 03 21] https://cloud.githubusercontent.com/assets/141903/18170134/2eb787dc-702b-11e6-95ab-06acfddc8792.png

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/bdkjones/codekit3/issues/169#issuecomment-244088488, or mute the thread https://github.com/notifications/unsubscribe-auth/APlUVIxxR2Em10vuLbTuYlCH4xeBBqcgks5qltsVgaJpZM4JxQhJ .

[robstown]

Alternatively, maybe there can be an option to import our own custom p reset....

On Thursday, September 1, 2016, Rob Searle rob@searlegroup.com wrote:

I thought that was for the list of selectable presets only (i.e. ones that may be in one of the presets). Custom (i.e., not in list) are easy to implement in parallel with presets

On Thursday, September 1, 2016, Michael Russell <notifications@github.com javascript:_e(%7B%7D,'cvml','notifications@github.com');> wrote:

Are you using a preset? [image: screenshot 2016-09-01 10 03 21] https://cloud.githubusercontent.com/assets/141903/18170134/2eb787dc-702b-11e6-95ab-06acfddc8792.png

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/bdkjones/codekit3/issues/169#issuecomment-244088488, or mute the thread https://github.com/notifications/unsubscribe-auth/APlUVIxxR2Em10vuLbTuYlCH4xeBBqcgks5qltsVgaJpZM4JxQhJ .

[subhaze]

I'm not sure that's the issue, but assumed it would work the same for any plugins, custom, or not considering the statement "ONLY the active presets are passed to Babel."

There is an option to use custom presets as well, it's right above where you list out the custom plugins IIRC.

[bdkjones]

This isn't my call. Babel itself is the thing that ignores individual plugins if you pass presets instead. It sort of makes sense, I guess. The whole point of presets is to group plugins so that you don't have to pass them individually.

For my two cents, the whole system is FUBAR.

[robstown]

I looked through the handbook and other documentation, and couldn't find anywhere where it said that plugins are ignored if presets are passed. In fact, I saw examples of using both in the handbook:

url

I wander why they are being ignored? Anyways, I tried turning off all presets and specifying a custom plugin (which I put into the local project folder), and I got the following message:

Babel: Transpiling failed:

Error: Cannot find module 'babel-plugin-syntax-jsxtransform-decorators-legacy'
    at Function.Module._resolveFilename (module.js:440:15)
    at Function.Module._load (module.js:388:25)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at /Applications/CodeKit.app/Contents/Resources/engines/node_modules/babel-core/lib/transformation/file/options/option-manager.js:178:75
    at Array.map (native)
    at Function.normalisePlugins (/Applications/CodeKit.app/Contents/Resources/engines/node_modules/babel-core/lib/transformation/file/options/option-manager.js:153:20)
    at OptionManager.mergeOptions (/Applications/CodeKit.app/Contents/Resources/engines/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:36)
    at OptionManager.init (/Applications/CodeKit.app/Contents/Resources/engines/node_modules/babel-core/lib/transformation/file/options/option-manager.js:380:12)
    at File.initOptions (/Applications/CodeKit.app/Contents/Resources/engines/node_modules/babel-core/lib/transformation/file/index.js:223:65)

What about letting us use our own babelrc files? That seems easier to manage then creating out own preset with NPM.

[robstown]

It's getting late, the above message was obviously for a the syntax-jsx box I had checked. I deselected it and that message went away. Are we supposed to have checkboxes for uninstalled plugins?

Once I deselected the syntax-jsx plugin, I still got errors about using decorators even though I asked to inlcude the decorator and custom decorator-legacy plugins. I had them installed in both my project folder and I also installed them in:

/Applications/CodeKit.app/Contents/Resources/engines/node_modules

Am I missing something?

[robstown]

So, after a bit of playing, I got the following message:

Babel: Transpiling failed:

Error: Cannot find module 'babel-plugin-transform-es2015-for-ofbabel-plugin-transform-decorators-legacy'

This seemed like CK3 combined the names instead of adding a new one. I was able to get it to work by adding a comma before the plugin name in the CK3 window (see pic below).

Now I get a message:

Babel: Transpiling failed:

SyntaxError: /Users/Rob/Rob's Stuff/Rob University/Programming Playbox/mobx/JS/test.js: Method has decorators, put the decorator plugin before the classes one.

This indicates that order matters with Babel. I agree, that is silly, but at least it tells me that. The problem is that we have no way to change order with CK3 interface. I think allowing us to use our own babelrc files might alleviate this, but that may be complicated if we need all plugins downloaded locally. I see what I wanted to do is documented in this stackoverflow post:

http://stackoverflow.com/questions/33801311/webpack-babel-6-es6-decorators

Once again, they are using presets and plugins...

[robstown]

another example of using presets and plugins together...

url

This is exactly what I am trying to do.

[subhaze]

Just a quick addition, the official docs on plugins appears to suggest they're both supported and the order in which items are passed is important as well.

The execution orders are:

plugins -> presets The order in which plugins are ran is first -> last The order in which presets are ran is last -> first

[bdkjones]

Jesus H fucking Christ. "Put plugin X before Y." Babel knows it needs plugin X. It knows it HAS plugin X specified. But the thing is too stupid to just make it work? It has to tell the user to rearrange X and Y? This is what shitty programming looks like.

[subhaze]

I thought that might !brighten your day... :/

[bdkjones]

The ordering section of the docs is new. That was not there when I implemented Babel last spring. And I LOVE that plugins are first-to-last and presets are last-to-first. Fucking incredible.

[subhaze]

yeah... i thought that was...... interesting?

I "think" I read somewhere to preserve backwards compatibility, but... I was under the impression that they tossed BC out the window when going from 5 -> 6 anyhow... (shrug)

[robstown]

So now that we are all in agreement Babel has a shitty way of handling presets and plugins, do you think it will be possible to give us finer grain control of how we specify them in our project? Right now, just being able to use the following babelrc file in my CK3 toolchain would make life a little easier... https://github.com/mobxjs/mobx-react-todomvc/blob/master/.babelrc I'd be happy with just being able to use our own babelrc files, we would just need to know if all plugins have to be installed local to the project or just the ones not included in the CK3 installation (or if we have to install them in the CK3 node_modules folder). In a more ideal world, CK3 would provide an npm interface for installing needed plugins and modules and the CK3 UI would allow for mixing presets and plugins as needed (and possibly ordering plugins if that is required).

[bdkjones]

Oh, yea. I'm going to solve the problem. The easiest approach will be to enable .babelrc files, so that's what I'll end up doing. I did some reading and it looks like the Babel team is also aware of what a complete cluserfuck this is, so they plan to solve the problem where present/plugin order matters. WHEN they'll do that...who knows? Babel does seem to move fast and break stuff.

[bdkjones]

Ok. I've fixed a couple things:

1. The issue where a comma wasn't added before the custom plugins string. That's resolved for Beta 16. You'll need to remove your leading comma from the string.
2. The decorators-legacy plugin is now bundled and available in the list. Apparently the regular decorators one is on-hold or something? Available, but doesn't do anything? This whole transpiling thing is a disaster.
3. I'm manually putting the decorators plugin at the start of the plugins list, if you specify that decorators or legacy decorators should be used. Maybe that works? Who knows.
4. Similar to ESLint, there's now an option to disable the Babel UI in CodeKit and just tell the app to use a .babelrc file. You're responsible for supplying that yourself. Babel is going to look for it starting in the folder where your "file-to-be-transpiled" is located and then walking the directory tree upward.
5. I've removed the restriction where plugins and presets could not be used simultaneously. It's now the case that BOTH are passed to Babel, if any of them are active.
6. I've changed the default preset order. As near as I can figure, Babel wants experimental shit run first, so if you enable ALL presets they are now passed in this order: ES2015, ES2016, ES2017, react, stage-3, stage-2, stage-1, stage-0. And because Babel runs them in reverse order (seriously, even Linux is a cleaner mess than this), they're going to run: 0, 1, 2, 3, react, 2017, 2016, 2015. Hopefully that's sort-of correct?

If all else fails, use #4 to configure Babel the way you need it. I think for most people who just want to either compile React or use a few simple features (like template strings), the default Presets in CodeKit's UI will work.

[bdkjones]

Update: With the new build I'm about to publish as Beta 16, I took the example project (mobx) and did the following:

1. Completely deleted the custom plugins string from Project Settings.
2. Left the "Presets" as specified: ES2015, ES2016, React, Stage 0
3. Enabled the "legacy-decorators" plugin, which is now listed in the CodeKit UI.

Having done that, when I clicked "process" on "main.js", the file transpiled successfully. That is, Babel didn't throw any errors. I'm not sure if the output it produced is correct, so @robstown please grab Beta 16 when I post it and test this on your end to make sure you get what you expect. You'll need to follow the 3 steps above.

[bdkjones]

Just pushed Beta 16 / RC1 live. This issue should be fixed. Please verify. Thanks!