babel / babel-brunch

Brunch plugin for Babel

The compiler for writing next generation JavaScript.

Supporting Babel

Babel (pronounced "babble") is a community-driven project used by many companies and projects, and is maintained by a group of volunteers. If you'd like to help support the future of the project, please consider:

• Giving developer time on the project. (Message us on Twitter or Slack for guidance!)
• Giving funds by becoming a sponsor on Open Collective or GitHub (which goes to our Open Collective account)!

Sponsors

Our top sponsors are shown below! [Become a sponsor]

Intro

Babel is a tool that helps you write code in the latest version of JavaScript. When your supported environments don't support certain features natively, Babel will help you compile those features down to a supported version.

In

// ES2020 nullish coalescing
function greet(input) {
  return input ?? "Hello world";
}

Out

function greet(input) {
  return input != null ? input : "Hello world";
}

Try it out at our REPL.

FAQ

Who maintains Babel?

Mostly a handful of volunteers, funded by you! Please check out our team page!

Is there a Babel song?

I'm so glad you asked: Hallelujah —— In Praise of Babel by @angus-c, audio version by @swyx. Tweet us your recordings!

Looking for support?

For questions and support please join our Slack Community (you can sign up here for an invite), ask a question on Stack Overflow, or ping us on Twitter.

Where are the docs?

Check out our website: babeljs.io, and report issues/features at babel/website.

Want to report a bug or request a feature?

Please read through our CONTRIBUTING.md and fill out the issue template at babel/issues!

Want to contribute to Babel?

Check out:

• Our #development Slack channel and say hi! (sign-up)
• Issues with the good first issue and help wanted label. We suggest also looking at the closed ones to get a sense of the kinds of issues you can tackle.

Some resources:

• Our CONTRIBUTING.md to get started with setting up the repo.
• Our discussions/notes/roadmap: babel/notes
• Our progress on TC39 proposals: babel/proposals
• Our blog which contains release posts and explanations: /blog
• Our videos page with talks about open source and Babel: /videos
• Our podcast

How is the repo structured?

The Babel repo is managed as a monorepo that is composed of many npm packages.

License

MIT

babel-brunch's Issues

babel polyfill included?

Hello, is this polyfill package included? And, is that possible to also include babel-object-rest-spread?

Transpile npm modules written in ES6

Sorry if this is a stupid question, but I can't figure out how to process npm modules written in ES6 through babel-brunch.

Right now I'm trying to use Foundation 6.2, which is written in ES2015, but babel-brunch seems to only transpile app.js, then concatenating Foundation's files as is.

Relevant part of app.js:

import 'what-input';
import 'foundation-sites/js/foundation.core';
import 'foundation-sites/js/foundation.util.mediaQuery';
import 'foundation-sites/js/foundation.util.triggers';
import 'foundation-sites/js/foundation.util.motion';
import 'foundation-sites/js/foundation.offcanvas';

$(document).foundation();

I could do import 'foundation-sites', which would import the precompiled ES5 file from dist/, but I don't want to use the huge file with all plugins included.

Uncaught SyntaxError: Unexpected end of input

When you have a JavaScript block without implementation, just with comments, the "unexpected end of input" errors starts to appear.

if (true) {
  // this comment breaks everything
}

It happens for any statement, even a function:

var test = function() {
  // same thing
}

Screenshot:

How to use with AngularJS?

Hi,

This probably isn't an issue and is more of a "how-to".

I am trying to upgrade to AngularJS skeleton project to use ES6. My config currently turns off the module definition and wrapper:

  modules:
    definition: false
    wrapper: false

So far all I have installed for ES6 support is Babel Brunch (npm install --save babel-brunch). Since I will be using ES6 modules I have removed the above config. But after doing that I have noticed two issues:

• My vendor files ('javascript/vendor.js': /^bower_components/) still get all the module polyfill code e.g. endsWith, unalias and require defined at the top of the file.
• I am using angularjs-templates-brunch to produce my template file (joinTo: 'javascript/templates.js'). The template file now includes all of the polyfill code and each of my templates get wrapped up in modules like require.register("post/post.tpl", ... { . This means that I can't just require a templates module and I need to explicitly require each template module somewhere in my code so that it will execute code to declare the Angular module (angular.module('templates')):

require.register("posts/posts.tpl", function(exports, require, module) {
(function() {
    var module;

    try {
        // Get current templates module
        module = angular.module('templates');

Hopefully that makes some sense, so my questions are:

1. Is it correct that my app, vendor and template files are all defining the module polyfill code? Can Babel Brunch be configured to put that pollyfill code in a separate file?
2. How can I turn the module wrapping off for just my templates?
3. https://babeljs.io/docs/setup/ has the config property as ESbabel and not babel, are both correct?

Update to @babel/preset-env

The recommended preset is read-only by babel. We should update the docs to reflect the new package.

Source maps are mapped to transpiled source

I've noticed I can't find a way to use the original source instead of the source compiled by babel.

Is this perhaps a limitation of babel-brunch right now or am I missing something in my config somewhere?

Using latest versions of brunch, babel, and babel-brunch.

Abbreviated config:

presets: ['latest']
plugins: [
    'transform-class-properties'
    'transform-object-rest-spread'
    'transform-runtime'
]

Abbreviated package.json:

    "babel-brunch": "^6.1.1",
    "babel-cli": "^6.24.0",
    "babel-plugin-transform-class-properties": "^6.23.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.23.0",
    "brunch": "^2.10.9",

pattern option isn't respected when react preset is used (broken in v6.0.2)

Because of the change in 3ffee2b, when react preset is used, it's impossible to restrict babel compiling to files with es6 and jsx patterns. This causes problems with vanilla JS where this is transformed to undefined (expected behavior: babel/babelify#37 (comment)).

My current workaround is to use v6.0.1, but it would be helpful if the existing pattern option is respected.

TypeError: Cannot use 'in' operator to search for 'version' in false

After installing this plugin, without changing any of my Brunch config, brunch build thinks for a second, then exits with

TypeError: Cannot use 'in' operator to search for 'version' in false
at Object.getArg (./node_modules/brunch/node_modules/source-map/lib/source-map/util.js:23:18)
  at new SourceMapConsumer (./node_modules/brunch/node_modules/source-map/lib/source-map/source-map-consumer.js:53:24)
  at updateMap (./node_modules/brunch/lib/fs_utils/source_file.js:32:268)
  at updateCache (./node_modules/brunch/lib/fs_utils/source_file.js:64:18)
  at ./node_modules/brunch/lib/fs_utils/source_file.js:84:11
  at ./node_modules/brunch/lib/fs_utils/pipeline.js:85:20
  at getDependencies (./node_modules/brunch/lib/fs_utils/pipeline.js:42:14)
  at ./node_modules/brunch/lib/fs_utils/pipeline.js:80:16
  at JavaScriptCompiler.compile (./node_modules/javascript-brunch/lib/index.js:23:10)
  at ./node_modules/brunch/lib/fs_utils/pipeline.js:96:31
  at fn (./node_modules/brunch/node_modules/async-waterfall/index.js:19:24)
  at Object._onImmediate (./node_modules/brunch/node_modules/async-waterfall/index.js:58:22)
  at processImmediate [as _immediateCallback] (timers.js:336:15)

One of my first paths, node_modules/jquery/dist/jquery.js, yields false for the sourceMap property. Not sure what that means or where false comes from. My Brunch config makes no mention of source maps; I try to let defaults do the right thing.

Compilation not triggering

Hi there. I've installed this plugin to the best of my ability, but I can't seem to trigger compilation. I am doing this in an effort to get a working brunch-react toolchain going.

Normal js file changes are triggering a compilation (under brunch watch --server) however jsx and es6 file changes are not. I'm almost certain I'm doing something wrong - but I can't figure it out. Sorry for the trouble.

exports.config =
  # See http://brunch.io/#documentation for docs.
  files:
    javascripts:
       joinTo:
        'js/app.js': /^app/
        'js/vendor.js': /^(node_modules|vendor|bower_components)/
    stylesheets:
      joinTo: 'app.css'
    templates:
      joinTo: 'app.js'
    plugins:
      babel:
        presets: ['es2015']
        ignore: [
          /^(bower_components|vendor)/
          'app/legacyES5Code/**/*'
        ]
        pattern: /\.(es6|jsx)$/

Use options defined in the .babelrc file

It would be pretty sweet if the babel-brunch plugin could use the options defined in the .babelrc file, if it exists. Something like this should work.

JSON.parse(fs.readFileSync(path.join(__dirname, '.babelrc'), 'utf8'));

I haven't thought much about the load order of using .babelrc options vs brunch-config.js options. I'll let smarter people who have stronger opinions worry about that.

How to use es6 modules ?

Hello,

I'm trying to build a small es6 react demo with babel-brunch. The build using brunch works fine, but the code inside app.js doesn't seem to be executed...

Do I need to add something to use es6 modules ? Thanks.

Publish new npm version

It seems that the package as available on NPM is still using babel-preset-latest instead of babel-preset-env, and the readme reflects the same incongruences over at https://www.npmjs.com/package/babel-brunch

I'm thinking a new NPM version should be published so that changes made to the repo (5 months ago?) are available on NPM.

[BREAKING] Use babel-preset-env instead of babel-preset-latest

From Babel's Slack:

Support configuration for different environments.

Currently, with .babelrc you can use the env option to set specific options when in a certain environment:

{
  "env": {
    "production": {
      "plugins": ["transform-react-constant-elements"]
    }
  },
  "presets": ["es2015"]
}

will use preset-es2015 for all envs and add transform-react-constant-elements just for prod.

I'll work on this.

SyntaxError: Unexpected token when building

Hi! 👋

I'm trying to compile a library and brunch outputs a build error, which does not happen with other build tools.

The library in question is React relay network layer.

Here's the error I get

>  proj [master] ✗ LOGGY_STACKS=1 brunch build
18:36:50 - error: Processing of node_modules/react-relay-network-layer/lib/middleware/gqErrors.js failed. SyntaxError: Unexpected token (80:376)
  at Parser.pp$4.raise (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:2488:13)
  at Parser.pp.unexpected (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:623:8)
  at Parser.pp.semicolon (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:600:59)
  at Parser.pp$1.parseReturnStatement (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:894:55)
  at Parser.pp$1.parseStatement (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:744:32)
  at Parser.pp$1.parseBlock (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1040:23)
  at Parser.pp$3.parseFunctionBody (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:2362:22)
  at Parser.pp$1.parseFunction (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1132:8)
  at Parser.pp$1.parseFunctionStatement (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:868:15)
  at Parser.pp$1.parseStatement (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:739:17)
  at Parser.pp$1.parseBlock (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1040:23)
  at Parser.pp$3.parseFunctionBody (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:2362:22)
  at Parser.pp$1.parseFunction (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1132:8)
  at Parser.pp$3.parseExprAtom (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1999:17)
  at Parser.pp$3.parseExprSubscripts (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1872:19)
  at Parser.pp$3.parseMaybeUnary (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1849:17)
  at Parser.pp$3.parseExprOps (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1791:19)
  at Parser.pp$3.parseMaybeConditional (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1774:19)
  at Parser.pp$3.parseMaybeAssign (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1750:19)
  at Parser.pp$3.parseParenAndDistinguishExpression (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:2056:30)
  at Parser.pp$3.parseExprAtom (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1978:41)
  at Parser.pp$3.parseExprSubscripts (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1872:19)
  at Parser.pp$3.parseMaybeUnary (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1849:17)
  at Parser.pp$3.parseExprOps (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1791:19)
  at Parser.pp$3.parseMaybeConditional (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1774:19)
  at Parser.pp$3.parseMaybeAssign (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1750:19)
  at Parser.pp$3.parseExpression (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1722:19)
  at Parser.pp$1.parseStatement (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:777:45)
  at Parser.pp$1.parseBlock (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1040:23)
  at Parser.pp$3.parseFunctionBody (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:2362:22)
  at Parser.pp$1.parseFunction (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1132:8)
  at Parser.pp$3.parseExprAtom (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1999:17)
  at Parser.pp$3.parseExprSubscripts (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1872:19)
  at Parser.pp$3.parseMaybeUnary (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1849:17)
  at Parser.pp$3.parseExprOps (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1791:19)
  at Parser.pp$3.parseMaybeConditional (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1774:19)
  at Parser.pp$3.parseMaybeAssign (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1750:19)
  at Parser.pp$3.parseExprList (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:2418:20)
  at Parser.pp$3.parseSubscripts (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1900:29)
  at Parser.pp$3.parseExprSubscripts (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1875:21)
  at Parser.pp$3.parseMaybeUnary (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1849:17)
  at Parser.pp$3.parseExprOps (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1791:19)
  at Parser.pp$3.parseMaybeConditional (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1774:19)
  at Parser.pp$3.parseMaybeAssign (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1750:19)
  at Parser.pp$3.parseExpression (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:1722:19)
  at Parser.pp$1.parseStatement (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:777:45)
  at Parser.pp$1.parseTopLevel (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:672:23)
  at Parser.parse (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:529:15)
  at Object.parse (/Users/felixdescoteaux/petprojects/proj/node_modules/acorn/dist/acorn.js:3378:37)
  at parse (/Users/felixdescoteaux/petprojects/proj/node_modules/detective/index.js:9:18)
  at Function.exports.find (/Users/felixdescoteaux/petprojects/proj/node_modules/detective/index.js:44:15)
  at module.exports (/Users/felixdescoteaux/petprojects/proj/node_modules/detective/index.js:23:20)
  at /Users/felixdescoteaux/petprojects/proj/node_modules/deppack/lib/explore.js:61:43
  at sourceFile (/Users/felixdescoteaux/petprojects/proj/node_modules/deppack/lib/explore.js:104:18)

18:36:50 - info: compiled 17 files into 3 files, copied index.html in 1.3 sec

I have came across that problem on a larger project but have put together a minimal repo here using brunch and importing that library.

I have no idea what could cause this. Thanks a lot!

Related issue: relay-tools/react-relay-network-layer#45

transform-class-properties in .babelrc results in error

When specifying transform-class-properties in brunch-config.js like this:

plugins: {
    babel: {
        plugins: ["transform-class-properties"]
    }
}

we get no errors, but when solely specifying in .babelrc and not in the brunch config, we get an Missing class properties transform error. This does not happen with other transform-plugins, such as transform-decorators or transform-object-rest-spread for example.

---

Expected behaviour: No error

Actual behaviour: Missing class properties transform error.

EDIT: Here's the error

01:40:02 - error: Compiling of app/test.js failed. L6:4 Missing class properties transform.
     4 | 
     5 | class Foo {
   > 6 |     static bar = 'bar';
       |     ^
     7 | }

brunch-config.js:

exports.files = {
    javascripts: {
        entryPoints: { 'app/initialize.js': 'app.js' }
    },
    stylesheets: {joinTo: 'app.css'}
};

exports.modules = {
    autoRequire: {'app.js': ['initialize']}
};

.babelrc:

{
  "presets": [
    "latest",
    "react"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-decorators",
    "transform-object-rest-spread"
  ]
}

npm up-to-date
node up-to-date
dependencies up-to-date

Don't compile bower components

I'm using 6to5-brunch plugin and I want to turn it off for bower components (because it's unnecessary and takes much time).
How can I do that?

Babel JSX Support: File extension question.

I use Babel's JSX feature in my React project, but I prefer to use a .jsx extension on files that are using it to make it clear, at a glance, which files are components (plus I get some nice editor features).

What's the best way to configure babel-brunch / brunch to accept *.jsx files as well as *.js?

Allow plugins/presets with explicit name

Some of the plugins don't follow the babel-plugin-${name} convention, which as result cannot be included, because babel-brunch is always adding the bable-plugin- prefix to the name here: https://github.com/babel/babel-brunch/blob/master/index.js#L36

We should somehow let the consumer specify, if the name should be used as is, or not.
My idea is to use a simple ! at the end of the plugin / preset -name

for example

plugins: {
    babel: {
      ignore: [/web\/static\/vendor/],
      presets: ['es2015', 'es2016', 'react'],
      plugins: [
         "transform-object-rest-spread", // this will resolve babel-plugin-transform-object-rest-spread
         "babel-root-import!", {                 // this will resolve babel-root-import because of `!` at the end
             "rootPathSuffix": "src/js"
         }]
    }

Explicit plugin name without babel-plugin- prefix, how?

Hi, i'm trying to install jsx-control-statements plugin, but babel-brunch shows an error

Unknown plugin "...\babel-plugin-jsx-control-statements"
Any solution for disabling auto prefix?

.babelrc is ignored

I have this exact same issue posted here #52.
But it should have been fixed in #53.

My versions:
brunch v2.10.10
babel-brunch v6.1.1

My .babelrc:

{
  "presets": ["env", "react"],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread",
    "glamorous-displayname"
  ]
}

The error message: Missing class properties transform.

If I add this in brunch-config.coffee, it works:

exports.config =
  plugins:
    babel:
      presets: [
        'env'
        'react'
      ]
      plugins: [
        'transform-class-properties'
        'transform-object-rest-spread'
        'glamorous-displayname'
      ]

---

Am I missing something? 😭
If I delete the content of .babelrc, I got Unexpected EOF so the file is read…

Thanks in advance for your help!

Upgrading to Babel 7

Hello, are there any plans to allow upgrading to Babel 7? I saw the pull request and tried to replicate it but getting errors. Are the changes in that pull request working for anyone? Or is there some work-around? I have not been able to find anything online.

.jsx not compiling

babel-preset-env has been consumed by Babel mono-repo

babel-preset-env has been consumed by Babel mono-repo. the new location for babel-preset-env is Here
Please update and push new version to NPM i think NPM is 15 commits behind?

Cannot use plugin or preset options

I believe these lines:

const mappedPresets = opts.presets.map(ps => resolve(config.paths.root, 'node_modules', `babel-preset-${ps}`));
const mappedPlugins = opts.plugins.map(pg => resolve(config.paths.root, 'node_modules', `babel-plugin-${pg}`));

means that setting plugin or preset options is not supported, e.g.,

{
  "plugins": [
    ["transform-async-to-module-method", {
      "module": "bluebird",
      "method": "coroutine"
    }]
  ]
}

{
  "presets": [
    ["es2015", { "loose": true, "modules": false }]
  ]
}

as ${ps} would resolve to ["es2015", { "loose": true, "modules": false }].

Trying to set options fails with an Unknown plugin error.

SyntaxError: export declarations may only appear at top level of a module

Repo

require.register("@absinthe/socket-relay/src/index.js", function(exports, require, module) {
  require = __makeRelativeRequire(require, {}, "@absinthe/socket-relay");
  (function() {
    // @flow

// @create-index

export {default as createFetcher} from "./createFetcher.js";
export {default as createSubscriber} from "./createSubscriber.js";
export {default as isSubscribed} from "./isSubscribed.js";
  })();
});

I need to comment out all files that use @absinthe/socket-relay or react-router-native (same error) to get the app to render.

The issue is Brunch generates require.register( and having export { inside the callback leads to a compilation error.

How do I fix this?

• brunch-config.js
• package.json
• .babelrc

(If you clone this, uncomment environment.js or /screens/Router.js to generate a new build. Then in /priv/static/js/app.js, cmd + f for @absinthe/socket-relay or react-router-native respectively. Look a few lines down for an export { clause.)

Optimizing of ../priv/static/js/app.js failed. L12175:31 SyntaxError: Unexpected token: operator (>)

Able to build this project (that uses react-native-web) in dev.

But when I run yarn deploy, I get the entitled error.

Looked around online to no avail...

---

However, what is online suggests this has to do with UglifyJS...

Unable to compile JSX

Well, okay, maybe if I post this problem I'll figure it out, too. So it looks like compilation is failing on line 7 (an invalid token failure, telling me that the inline JSX is the problem).

11 Jan 16:10:23 - error: Compiling of 'app/bar.jsx' failed. app/bar.jsx: Unexpected token (7:11)

Here is the content of bar.jsx:

var React = require('react');
var ReactDOM = require('react-dom');


var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

//hello
ReactDOM.render(
  <HelloMessage name="John" />,
  document.getElementById('container')
);

Here is my brunch config:

exports.config =
  # See http://brunch.io/#documentation for docs.
  files:
    javascripts:
       joinTo:
        'js/app.js': /^app/
        'js/vendor.js': /^(node_modules|vendor|bower_components)/
    stylesheets:
      joinTo: 'app.css'
    templates:
      joinTo: 'app.js'
  plugins:
    babel:
      presets: ['es2015']
      ignore: [
        /^(bower_components|vendor)/
        'app/legacyES5Code/**/*'
      ]
      pattern: /\.(es6|jsx)$/

undefined is not a constructor (evaluating 'Object.assign')

Firstly sorry if this is a stupid question, but I'm new to this new js world. We used to just add script tags and everything was fine 😂 . Also, this maybe nothing to do with babel-brunch, but it seems like the right place to start asking questions.

Anyway, I have a project that uses babel-brunch. It include a few npm modules and in the latest Chrome browser everything is working fine. However, when I run my tests using PhantomJS, I get the following error:

** (Wallaby.JSError) There was an uncaught javascript error:

     TypeError: undefined is not a constructor (evaluating 'Object.assign')
       (anonymous function) (http://localhost:4001/js/app.js:12404)
       __webpack_require__ (http://localhost:4001/js/app.js:11448)
       (anonymous function) (http://localhost:4001/js/app.js:20395)
       __webpack_require__ (http://localhost:4001/js/app.js:11448)
       (anonymous function) (http://localhost:4001/js/app.js:11494)
       (anonymous function) (http://localhost:4001/js/app.js:11495)
       webpackUniversalModuleDefinition (http://localhost:4001/js/app.js:11421)
       (anonymous function) (http://localhost:4001/js/app.js:11428)
       (anonymous function) (http://localhost:4001/js/app.js:20429)
       initModule (http://localhost:4001/js/app.js:42)
       require (http://localhost:4001/js/app.js:59)
       expanded (http://localhost:4001/js/app.js:34)
       (anonymous function) (http://localhost:4001/js/app.js:20436)
       initModule (http://localhost:4001/js/app.js:42)
       require (http://localhost:4001/js/app.js:59)

Looking at app.js:12404 it's this line:

/* harmony default export */ exports["a"] = Object.assign({},

And this comes from the npm package vuetify (https://www.npmjs.com/package/vuetify).

From my understanding, Object.assign is a new ES6 thingy and PhantomJS (and other browsers) do not support that yet, hence the error. So I assume I need a polyfill for this to work in browsers that only support ES5.

Looking at your readme and some of the issues, I think this should already be included in babel-brunch so I'm not sure why it isn't working.

For completeness my brunch config is below but is pretty slim and almost the default generated by Elixir Phoenix 1.3:

exports.config = {
  files: {
    javascripts: {
      joinTo: "js/app.js"
    },
    stylesheets: {
      joinTo: "css/app.css"
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    assets: /^(static)/
  },

  paths: {
    watched: ["static", "css", "js", "vendor"],
    public: "../priv/static"
  },

  plugins: {
    babel: {
      ignore: [/vendor/]
    },
    vue: {
      extractCSS: true
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": ["js/app"]
    }
  },

  npm: {
    enabled: true,
    whitelist: ["phoenix", "phoenix_html", "vue"],
    globals: {
      Vue: "vue/dist/vue.common.js"
    },
    styles: {
      vuetify: ["dist/vuetify.min.css"]
    }
  }
};

I'm obviously missing something, but not sure if it's a config thing or a missing package or what not.

Any help or advice would be greatly appriciated!

Thanks in advance!

Andy

❤️

trying to use transform-async-to-generator

I want to use the babel plugin http://babeljs.io/docs/plugins/transform-async-to-generator , in order to compile this code:

async function getSessionData() {
    [snip]
}

so I npm installed babel-runtime, and the appropriate babel plugins (and brunch plugins).

Everything compiles just peachy ;)

However, (there's always an however) - when it comes to running the app, I now get an error

Uncaught reference error: require is not defined

and, indeed, looking at the generated application.js code, I see this

var _keys = require("babel-runtime/core-js/object/keys");
var _freeze = require("babel-runtime/core-js/object/freeze");

I am running with module wrapping false

    modules: {
        definition: false,
        wrapper: false
    },

Before I installed babel, everything was fine and dandy, and working well, so I suspect that babel has some requirements (see what I did there?) that conflict with the modules setting

What do I need to change in order to use babel ?

pattern option causing Babel to error

When I use the pattern option I get the following error for each matched file:

error: - Compiling of 'foo/bar.js' failed. [BABEL] foo/bar.js: Unknown option: pattern ;

babel-brunch: 5.1.1
babel-core: 5.4.3

Update to Babel v6

https://github.com/babel/babel/blob/master/CHANGELOG.md

It takes ~3mn to compile with angular

I have Angular 1.3.8 in my bower_components folder (bower install angular), and it bugs the 6to5-brunch compiler.
If I try the brunch debug option I can see that it halts at:

brunch:pipeline Compiling 'bower_components\angular\angular.js' with 'ES6to5Compiler' +1ms

There is no error, it just stops and the process takes ~30% of my processor until I kill it.

If I remove the 6to5-brunch module it works, if I remove the angular folder from bower_components it works fine as well.

edit: the compilation works, it just takes like 3mn to complete