Cannot import anything in route templates

[MichalBryxi]

This on baffles me. Given following code:

// app/templates/application.gts

import RouteTemplate from 'ember-route-template';
import Component from '@glimmer/component';

// Imports are not preserved
import { t } from 'ember-intl';

// Comments are preserved
// import { pageTitle } from 'ember-page-title';

interface Signature {
  Args: {
    model: string;
  };
}

class ApplicationRoute extends Component<Signature> {
  <template>{{t 'bar'}}</template>
}

export default RouteTemplate(ApplicationRoute);

The app explodes with:

application.ts:28 Uncaught ReferenceError: t is not defined
    at Object.scope (application.ts:28:19)
    at meta (index.js:584:32)
    at compilable (index.js:1280:49)
    at TemplateImpl.asLayout (index.js:1445:54)
    at ConstantsImpl.component (index.js:130:617)
    at eval (index.js:181:26)
    at encodeOp (index.js:196:9)
    at pushOp (index.js:1296:5)
    at eval (index.js:1172:30)
    at Compilers.compile (index.js:536:114)

When I look into the compiled application.ts file from dev tools:

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var ember_route_template__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ember-route-template */ "../../.pnpm/[email protected]/node_modules/ember-route-template/dist/index.js");
/* harmony import */ var _glimmer_component__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @glimmer/component */ "../rewritten-packages/@glimmer/component.1ee13c05/node_modules/@glimmer/component/index.js");
/* harmony import */ var _ember_template_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @ember/template-factory */ "../rewritten-packages/ember-source.066fca04/node_modules/ember-source/@ember/template-factory/index.js");
/* harmony import */ var _ember_component__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @ember/component */ "../rewritten-packages/ember-source.066fca04/node_modules/ember-source/@ember/component/index.js");
var _ApplicationRoute;


// Imports are not preserved

// Comments are preserved
// import { pageTitle } from 'ember-page-title';


class ApplicationRoute extends _glimmer_component__WEBPACK_IMPORTED_MODULE_1__["default"] {}
_ApplicationRoute = ApplicationRoute;
(0,_ember_component__WEBPACK_IMPORTED_MODULE_3__.setComponentTemplate)((0,_ember_template_factory__WEBPACK_IMPORTED_MODULE_2__.createTemplateFactory)(
/*
  {{t 'bar'}}
*/
{
  "id": "k6m6F70a",
  "block": "[[[1,[28,[32,0],[\"bar\"],null]]],[],false,[]]",
  "moduleName": "/Users/michal/flugmodus/node_modules/.embroider/rewritten-app/templates/application.ts",
  "scope": () => [t],
  "isStrictMode": true
}), _ApplicationRoute);
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,ember_route_template__WEBPACK_IMPORTED_MODULE_0__["default"])(ApplicationRoute));

//# sourceURL=webpack://flugmodus/./templates/application.ts?

• Notice the comment Imports are not preserved and the line below (empty)
• Notice the comment Comments are preserved and the line below (still comment, so it's preserved)

[MichalBryxi]

I can put into the module scope anything I want (e.g: const foo = '123';) and it will be preserved in the compiled output. But any import statements get thrown away.

[MichalBryxi]

Update: I managed to make the app compile and (somewhat) work by adding following to package.json (assumes using pnpm):

  "pnpm": {
    "overrides": {
      "babel-plugin-ember-template-compilation": "2.3.0"
    }
  }