Babel 6 + .babelrc -> TypeError: Cannot read property 'error' of undefined

[alex35mil]

After update to babel@6 I faced following issue: when I place .babelrc file in the root — build fails. When I remove it — fly runs fine.

Repo to reproduce: https://github.com/alexfedoseev/fly-babel-6-issue

/* .babelrc */

{
  "presets": ["es2015", "stage-3"]
}

/* flyfile.js */

export default async function() {
  console.log('!');
}

Screen:

Stack:

$(npm bin)/fly
stack:
  - TypeError: Cannot read property 'error' of undefined
  -     at OptionManager.mergeOptions (~/Dev/Sandboxes/tmp/fly-babel-6-issue/node_modules/fly-util/node_modules/babel-core/lib/transformation/file/options/option-manager.js 126:28)
  -     at OptionManager.addConfig (~/Dev/Sandboxes/tmp/fly-babel-6-issue/node_modules/fly-util/node_modules/babel-core/lib/transformation/file/options/option-manager.js 107:10)
  -     at OptionManager.findConfigs (~/Dev/Sandboxes/tmp/fly-babel-6-issue/node_modules/fly-util/node_modules/babel-core/lib/transformation/file/options/option-manager.js 168:35)
  -     at OptionManager.init (~/Dev/Sandboxes/tmp/fly-babel-6-issue/node_modules/fly-util/node_modules/babel-core/lib/transformation/file/options/option-manager.js 229:12)
  -     at compile (~/Dev/Sandboxes/tmp/fly-babel-6-issue/node_modules/fly-util/node_modules/babel-core/lib/api/register/node.js 117:22)
  -     at normalLoader (~/Dev/Sandboxes/tmp/fly-babel-6-issue/node_modules/fly-util/node_modules/babel-core/lib/api/register/node.js 199:14)
  -     at Object.require.extensions.(anonymous function) [as .js] (~/Dev/Sandboxes/tmp/fly-babel-6-issue/node_modules/fly-util/node_modules/babel-core/lib/api/register/node.js 216:7)
  -     at Module.load (module.js 356:32)
  -     at Function.Module._load (module.js 313:12)
  -     at Module.require (module.js 366:17)
  -     at require (module.js 385:17)
  -     at Object.spawn$ (~/Dev/Sandboxes/tmp/fly-babel-6-issue/node_modules/fly/dist/cli/spawn.js 39:29)
  -     at tryCatch (~/Dev/Sandboxes/tmp/fly-babel-6-issue/node_modules/babel-runtime/regenerator/runtime.js 72:40)
  -     at GeneratorFunctionPrototype.invoke [as _invoke] (~/Dev/Sandboxes/tmp/fly-babel-6-issue/node_modules/babel-runtime/regenerator/runtime.js 334:22)
  -     at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (~/Dev/Sandboxes/tmp/fly-babel-6-issue/node_modules/babel-runtime/regenerator/runtime.js 105:21)
  -     at onFulfilled (~/Dev/Sandboxes/tmp/fly-babel-6-issue/node_modules/co/index.js 65:19)
message: Cannot read property 'error' of undefined

[lukeed]

Removing the .babelrc file yields this error:

[00:16:39] build failed due to ReferenceError: [BABEL] main.js: Unknown option: direct.presets

Fresh repo, flyfile copied from examples/babel, package deps:

"dependencies": {
    "fly": "^0.8.4",
    "fly-babel": "*",
    "babel-preset-es2015": "^6.1.18"
  }

@bucaran Just looks like fly-babel plugin hasn't been fixed/touched since babel bumped to 6.0. There was no presets option in v5 as it compiled es2015 by default

[ghost]

@lukeed Right. Here is how things are looking over at fly-babel.

  "dependencies": {
    "object-assign": "^3.0.0",
    "babel-core": "*",
    "source-map": "^0.4.4"
  },

We want to upgrade fly-babel first.

[lukeed]

@bucaran solved.

If additional presets & plugins (eg, stage3) are desired, they'd have to be pulled in separately. But passing anything through fly-babel's options works as expected, including sourcemaps 🙌

// ...
.babel({
  presets: ['es2015'],
  sourceMaps: true,
  ignore: [
    "foo.js",
    "bar/**/*.js"
  ]
})
// ...

[ghost]

😄 Yay!

[alex35mil]

Hi guys, any update on this?

[lukeed]

@alexfedoseev update to the latest fly-babel changes 👌

[alex35mil]

I'm not sure I follow. I don't use fly-babel to transform the code, I use fly only as task runner, which runs my node servers, shell scripts and webpack builds. So I don't even have fly-babel in my package.json. (fly-babel is a plugin to transform esnext js code to es5, it's not something I must have to run fly tasks, right?)

Here is example of my setup: flyfile + helpers

But actually it's not the point. After update to babel 6 I can't even run this thing when I place .babelrc in the root folder of the project.

[lukeed]

You're kind of doing things the complicated way.

You're using the core Fly package to run a bunch of external shell scripts & webpack commands. IMO, if you want to use webpack, use webpack. If you truly wanted to use Fly, you'd find the appropriate fly plugins to run the same tasks.

As for the actual issue: it's Babel related... nothing to do with Fly.

Option 1
Personally, I never found .babelrc to be reliable, especially when slicing up all my dev tasks into different directories. I believe that Babel/Webpack loses track of root directory configuration files, because the same has happened with files like .bowerrc, etc.

If I were you, I'd ditch the rc file and add additional configuration to your webpack build configs so that the es2015 and/or stage0 presets are loaded correctly.

Option 2
Perhaps your webpack config needs to change its loader. Babel6 reworked a lot of its pieces (documentation on upgrading from 5.x to 6.x is really poor, imo), and babel-loader is one of them. Using loader : 'babel' won't work anymore, at least in my experience.

So you'd need to change this out for the babel-loader package.

For either case (I would do both), here is a working Babel6 + webpack setup that experienced similar issues at one point. (webpack config and package.json)

Again, this issue has nothing to do with Fly.

[alex35mil]

IMO, if you want to use webpack, use webpack. If you truly wanted to use Fly, you'd find the appropriate fly plugins to run the same tasks.

These are different tools. Webpack is bundler, Fly is task runner. I can't run express server with webpack + handle order of building stages of isomorphic application with shell scripts, the same as I can't create bundles for isomorphic application (for example server build working with CSS Modules) with just Fly plugins.

Anyway, provided setup was working fine until babel 6 update and the issue is not with my webpack configs b/c of: https://github.com/alexfedoseev/fly-babel-6-issue — if you'll try to run this one (there is no webpack there, just pure fly) — you'll get an error. If you'll remove .babelrc file from root — it runs fine (see screenshot above).

[alex35mil]

Presets from .babelrc are shared among all tools and build configs: it's used by webpack, babel-eslint & mocha. .babelrc is the only way to keep things DRY, at least I don't know how to share array of presets without duplication. More over it's not possible to pass presets to babel-eslint without .babelrc (link). So "don't use .babelrc" is not an answer.

[lukeed]

Thanks for the simplified repo.

The answer is still 'dont use babelrc'... for now. Fly uses babel-runtime at its core, so your babelrc file is overwriting/meddling with Fly's internal instance.

I'm not a contributor/maintainer, just my two cents, especially since it's so easy to add the desired settings to your webpack configs.

[iamstarkov]

The answer is still 'dont use babelrc'... for now. Fly uses babel-runtime at its core, so your babelrc file is overwriting/meddling with Fly's internal instance.

is pretty sad. @bucaran can you help?

[ghost]

TBH I would like to revert to the original Fly design when I first released it. At the time, while the source code was written in ES6, Flyfiles in JS variants were not supported, at least not out of the box.

Before Fly 1.0 happens, I hope to post a draft of what I would like to change and if I can get enough positive replies I will work on something.

[alex35mil]

@bucaran I updated everything to the latest versions, but issue is still there: https://github.com/alexfedoseev/fly-babel-6-issue

[lukeed]

@alexfedoseev Couple points:

1. You never have to install babel, babel-cli, AND babel in the same project.
2. You don't have to install any of them in order for fly-esnext to work. It's done for you automatically.
3. The fly-esnext installs Babel v5.8, so your babelrc file is sending options (preset) that don't exist for Babel v5.x. This is where the error is coming from.

I've branched your repo with appropriate changes.

In this repo, you don't need to setup/configure a .babelrc at all, but I've included it since you want to use it.

Also, here's a list of valid Babel v5.x options that you can use in your babelrc file

[alex35mil]

@lukeed Basically it means that fly-esnext and babel@6 are not compatible, right?

[lukeed]

You can have them both installed, but there's no point. Fly will use Babel@5 (for now) for parsing its plugins and flyfiles. That's it.

If you install Babel6 (for example, as part of fly-babel), then there will be no overlap.

Keep in mind, there is NO LOSS in features when using babel@5 vs babel@6.... 5 just allows us to require it externally for all Node versions. We will "upgrade" to babel@6 as soon as we find a way to do the same with 6 and all it's sub-modules.

[alex35mil]

You can have them both installed, but there's no point.

@lukeed I feel like I'm missing something. If I can use babel@6 for my stuff, why linked repo is broken and it works only after babel@6 removal?

[lukeed]

Because babel@5 is picking up your babelrc file and because your wrote it with babel@6 options, it's invalid.

The repo only worked because I removed the preset option in your babelrc, which is an invalid babel@5 option.

What you should do is not use a babelrc since fly-esnext doesn't need it, as it will work out of the box.

Then, for your babel@6 usage, pass options directly into fly-babel:

npm install -D fly-babel

exports.scripts = function * () {
  yield this.source('src/scripts/**/.js')
    .babel({
      presets: ['es2015'],
      plugins: [], // etc
    })
    .target('dist/js')
}

[alex35mil]

All of those I could do w/o fly-esnext. The point is to have .babelrc, b/c it's used by test runner, linter etc. There is no other way to pass params to babel-eslint. See my previous comment.

[lukeed]

Then don't use fly-esnext and run your own solution with babel@6

You may have to ignore the path to your fly installation to ensure Babel doesn't start fucking up the code base.