Bad interaction with modules-api-polyfill

[ef4]

On Ember 3.25, strict mode is supported but babel-plugin-modules-api-polyfill is still needed. Under those conditions, trying to use any of the framework-provided helpers in strict mode:

import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { on } from '@ember/modifier';

export default setComponentTemplate(
  precompileTemplate('<button {{on "click" this.alert}}>Go</button>', {
    strictMode: true,
    scope: { on },
  }),
  class extends Component {
    @action
    alert() {
      alert('it works');
    }
  }
);

results in a build error:

Scope objects for precompileTemplate may only contain direct references to in-scope values, e.g. { on } or { on: on }

The reason is that { on } is getting rewritten to { on: Ember._on}.

You can workaround like this:

import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { on as hackOn } from '@ember/modifier';

const on = hackOn;

export default setComponentTemplate(
  precompileTemplate('<button {{on "click" this.alert}}>Go</button>', {
    strictMode: true,
    scope: { on },
  }),
  class extends Component {
    @action
    alert() {
      alert('it works');
    }
  }
);