Error on annotate-console-log syntax and annotation problem

[diego-toro]

I found in the section 11.5 Enabling Presets and Plugins per Environment the syntax for adding the plugins in weird

{
  "presets": [
    [
      "env",
      {
        "modules": false,
      }
    ]
  ],
  "env": {
    "development": {
      "plugins": [
        "annotate-console-log)"
      ]
    }
  }
}

When I removed the ) it works, but the annotation is not working as the annotate-console-log repo suggests.

I'm getting

class Foo {
  bar () {
    console.log('bar()', 'banana');
  }
}

Instead of

class Foo {
  bar () {
    console.log('Foo->bar()', 'banana');
  }
}

Any help?

Update:

I found that when removing the "modules": false, the annotation plugin works fine.

[bebraw]

Thanks. ) was something extra there.

Removing "modules": false is problematic as then you lose tree-shaking and any processing performed by webpack. Maybe this needs a note. What do you think?

[diego-toro]

I think it could be, I got back to the section Setting Up .babelrc and there says something related with the modules:

Given webpack supports ES2015 modules out of the box, you can tell Babel to skip processing them. Jumping over this step would break webpack’s HMR mechanism

but doesn't specify the tree-shaking problem you mention. Or maybe another solution? Webpack plugin or something?

[bebraw]

Tree-shaking won't matter during dev. It's breaking HMR which is problematic if you rely on the functionality.

My guess is that if you disable Babel side module processing, the plugin will miss some information it uses to generate the messages. This might be tricky to solve.

[diego-toro]

Ok, so I think a note pointing that problem will clarify the issue with the console log annotations. Pretty sad the plugin can't receive the proper information.