[5.10] Can't import the template-compiler

[boris-petrov]

🐞 Describe the Bug

Upgrading from 5.9 to 5.10 and importing the template compiler leads to:

Uncaught TypeError: Application.initializer is not a function
    at ember-template-compiler.js:2100:1
    at ember-template-compiler.js:2108:1

🔬 Minimal Reproduction

ember new --pnpm ember-template-compiler-bug
cd ember-template-compiler-bug
# add `app.import('vendor/ember/ember-template-compiler.js');` to `ember-cli-build.js`
ember test

😕 Actual Behavior

That error.

🤔 Expected Behavior

No error.

🌍 Environment

• Ember: 5.10.0
• Ember-CLI: 5.10.0
• Node.js/npm: 22.4.1
• OS: Linux
• Browser: N/A

[NullVoxPopuli]

I've reproduced the issue over at NullVoxPopuli/limber#1787

This is a runtime error

[NullVoxPopuli]

so far, it seems the the fix is to remove the app.import

[boris-petrov]

I'm confused... how can I remove it if I need it?

[NullVoxPopuli]

I'm confused... how can I remove it if I need it?

apologies, I'm still working this out,

A couple tests,

• using only the hbs part - working (markdown + hbs, that is)
• however, using gjs, I get a similar error at runtime -- which does seem to imply that app.import is still not needed, even though it doesn't always fix the problem. I need to check my imports.

[NullVoxPopuli]

for hbs-only compiling, I use:

const { precompileJSON } = importSync('@glimmer/compiler');
const { getTemplateLocals } = importSync('@glimmer/syntax');

and for gjs compiling, I use:

const compiler = importSync('ember-source/dist/ember-template-compiler.js');

because babel-plugin-ember-template-compilation asks that of me in its API.
but really it needs:

• _preprocess: https://github.com/emberjs/babel-plugin-ember-template-compilation/blob/bbd39fc894ef5f8bcd7e8bc590f1edaba394b3a7/src/ember-template-compiler.ts#L16
  tho, in this same file, I see they declare the whole used interface:

  // The interface we use from ember-template-compiler.js
  export interface EmberTemplateCompiler {
    precompile(templateString: string, options: PreprocessOptions): string;
    _buildCompileOptions(options: PreprocessOptions): PreprocessOptions;
    _print(ast: ASTv1.Template, options?: { entityEncoding?: 'transformed' | 'raw' }): string;
    _preprocess(src: string, options?: PreprocessOptions): ASTv1.Template;
  }

So, looking at the source for the template-compiler, https://github.com/emberjs/ember.js/blob/main/packages/ember-template-compiler/lib/public-api.ts, I can re-create this, using the imports that do happen to work:

export { preprocess as _preprocess, print as _print } from '@glimmer/syntax';
export { default as precompile } from './system/precompile';
export { buildCompileOptions as _buildCompileOptions } from './system/compile-options';

precompile is ultimately:

import { precompile as glimmerPrecompile } from '@glimmer/compiler';

export default function precompile(templateString, options = {}){
  return glimmerPrecompile(templateString, compileOptions(options));
}

and yadda yadda for the compiler options -- for the REPL purposes, it's possible I don't need that half that stuff -- since the REPL doesn't have as strict of compatibility requirements as ember-source does.

but anyyyyway -- the crux of the problem is this line:

ember.js/packages/ember-template-compiler/lib/system/initializer.ts

Line 12 in 0da8387

Application.initializer({

Something has gone wrong with teh @ember/application export.

I'm confused... how can I remove it if I need it?

it looks like you don't need app.import if you did importSync to get the real file before

[ef4]

This should be fixed by #20726 which is about to go out as 5.10.2

[kategengler]

The fix is released in v5.10.2 and v5.11.0-beta.2

[NullVoxPopuli]

I don't think this is fixed.
(or rather, the problem has shifted)

For example,

npx ember-cli@latest new my-template-compiler-app --pnpm --embroider
cd my-template-compiler-app
pnpm add @embroider/macros
pnpm start

then, in app/app.js

import { importSync } from '@embroider/macros';

console.log(importSync('ember-source/dist/ember-template-compiler.js'));

and after visiting /, it prints:

which is the empty module object 🤔

[ef4]

The documented way to add the runtime template compiler to ember is to use app.import. All the stuff above telling people to switch away from it is not helpful. The limber PR linked above also shows app.import was in use before the PR, so I have no reason to believe that trying to directly importSync it ever worked.

[NullVoxPopuli]

So, getting rid of importSync(...), and re-adding the app.import() got me further, but I also had to

1. Change my import of the compiler to import * as compiler from 'ember-template-compiler'
2. Add "externals": ["ember-template-compiler"], to "ember-addon" in my addon's package.json

This makes everything work

importSync

I have no reason to believe that trying to directly importSync it ever worked.

This is irrelevant now, but importSync was the more successful way to get access to @glimmer/syntax and @glimmer/compiler.

Whether or not the rest of the template compiler came with via importSync is 🤷
I never tried removing the app.import on main, because it wasn't a big deal if things worked without it or not.