glimmerjs/glimmer.js

@babel/preset-env@7.14.0 cannot be used with @glimmer/babel-preset

chadhietala opened this issue · 0 comments

In 7.14.0 @babel/preset-env made private fields and methods part of the default plugins. When you attempt to use the glimmer preset in conjunction with babel-preset-env, you we get a error like the following:

If you are using ["@babel/plugin-proposal-decorators", { "legacy": true }], make sure it comes *before* "@babel/plugin-proposal-class-properties" and enable loose mode, like so:
	["@babel/plugin-proposal-decorators", { "legacy": true }]
	["@babel/plugin-proposal-class-properties", { "loose": true }]
  45 |   static template = hbs`
  46 |     <img width={{this.width}} height={{this.height}} data-delayed-url={{this.lazyUrl}} src={{this.url}} ...attributes />  `;
> 47 |   @service
     |   ^

Steps to reproduce:

  1. In this repo run yarn upgrade @babel/preset-env
  2. yarn start
  3. See the following error
ERROR in ./packages/example-apps/rehydration/src/MyComponent.ts
    Module build failed (from ./node_modules/babel-loader/lib/index.js):
    SyntaxError: /Users/chietala/Code/glimmer.js/packages/example-apps/rehydration/src/MyComponent.ts: Decorators are not enabled.
    If you are using ["@babel/plugin-proposal-decorators", { "legacy": true }], make sure it comes *before* "@babel/plugin-proposal-class-properties" and enable loose mode, like so:
    	["@babel/plugin-proposal-decorators", { "legacy": true }]
    	["@babel/plugin-proposal-class-properties", { "loose": true }]
       5 |
       6 | class MyComponent extends Component {
    >  7 |   @tracked count = 1;
         |   ^^^^^^^^^^^^^^^^^^^