"Unsafe dynamic component" build errors when Embroider is enabled

[roomman]

Hi, when updating to the latest release (beta-2) I'm seeing the following error when building an Embroider-enabled application:

$TMPDIR/embroider/a423b3/node_modules/ember-headless-form/dist/components/headless-form.js/headless-form.js: Unsafe dynamic component: this.FieldComponent in node_modules/ember-headless-form/dist/components/headless-form.js

Would it be helpful if I provided a reproduction?

From this, it sounds like ensure-safe-component helper from the @embroider/util needs to be included wherever you've used the (component) helper to allow for static analysis.

[simonihmig]

Oh, I think I know what's going on. It's basically a bug in Embroider, that has been fixed already (embroider-build/embroider#1383), but it's not released yet in a stable version.

There are "unstable" releases (see https://www.npmjs.com/package/@embroider/core?activeTab=versions) you could use. That's what the addon is also doing to get its Embroider tests to pass, see here. Or you would need to wait for the stable release, which I know folks are actively working on, but it could take a couple more days...

[roomman]

Thanks, @simonihmig, that's super useful feedback.

For reference, why don't you need to use the ensure-safe-component helper in this addon?

[simonihmig]

The new version of this addon uses the new <template> tag (aka template-imports), which makes the template operate in so called strict mode. But strict mode does not allow any string-based lookups anyway (which normally makes Embroider fail when it cannot determine what you are trying to lookup with patterns like {{component this.someThingEmbroiderCannotUnderstand}}), but only allows explicit imports. So in that case Embroider can safely assume anything that is used in a template is already imported elsewhere, so it doesn't have to fail on {{component this.someThingEmbroiderCannotUnderstand}} anymore.

tl;dr in strict mode you never need ensure-safe-component.

The PR I linked above is fixing the bug that <template> was not correctly making Embroider go into strict mode, so that's why this fix is needed.

[roomman]

Excellent, thanks @simonihmig. Great to have clarified the relationship between "strict mode" and <template>. It's filled in plenty of gaps in my reading of other issues and RFCs. 🙏🏼