transform-class-properties in .babelrc results in error

[rafaelkallis]

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

[denysdovhan]

Hi, @rafaelkallis! Thanks for reaching us out!

Here I created a testing repo: https://github.com/denysdovhan/babel-brunch-issue-52

I can confirm that behavior. Currently, I'm trying to figure out what's wrong with this. Stay in touch.

[denysdovhan]

I was digging a bit in sources. I've found that this is, probably, related to order of plugins/presets — the common problem with Babel. Here are related items:

• babel/babel#2729 — Error: Missing class properties transform.
• babel/babel#3000 — Missing class properties transform
• Plugin/Preset Ordering

Unfortunately, changing of order of plugins not helping.

[rafaelkallis]

@denysdovhan first of all many thanks for the ongoing investigation. Allow me to share my "quick fix" for the current issue.

Using the following configuration, I get no errors:

// .babelrc

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

// brunch-config.js (shortened)

exports.plugins = {
    babel: {
        plugins: [
            "transform-decorators-legacy",
            "transform-class-properties"
        ]
    }
};

exports.files = { ... }

[denysdovhan]

@rafaelkallis should be fixed in #53. Please, in package.json try:

{
  "babel-brunch": "denysdovhan/babel-brunch#fix-52-and-41"
}

Don't forget to remove your Babel settings from brunch-config.js. Options from .babelrc have to be loaded.

Works well for me: https://github.com/denysdovhan/babel-brunch-issue-52/commit/3c3111d2edb83249774dbe9c93cd2e5b673109b0

[rafaelkallis]

@denysdovhan I can confirm all transform-class-properties errors while building are gone.

Unfortunately I'm getting runtime errors, but believe they are transform-decorator related, thus independent from this issue. Since the decorator stuff is anyways highly experimental atm, I will drop decorators and continue business as usual.

Hope your fix gets in the master build soon. Thanks again! Issue can be closed IMO.

[denysdovhan]

Issue can be closed IMO.

@rafaelkallis, let's keep this issue open until #53 will be merged.

[denysdovhan]

@rafaelkallis #53 has been merged. Check version from master, until @paulmillr publish new version.