Ember 5.8升级后Embroider动态组件报错及packageRules配置咨询

错误原因 #

升级到Ember 5.8后，Embroider的严格模式会拦截无法提前确定的动态组件渲染，比如你代码里的{{component this.tool}}——因为Embroider无法预知this.tool会指向哪些组件，所以标记为"Unsafe dynamic component"。

packageRules字段含义 #

packageRules是Embroider的兼容性配置，用来告知构建工具哪些组件/行为是安全的，核心字段说明：

• package：规则生效的目标包名。这里{{component}}属于Ember内置的@ember/component包，而非@glimmer/component，这是你之前配置错误的核心原因。
• components：对象结构，键是组件或助手的名称（比如这里的component对应{{component}}助手），值是该组件/助手的具体规则配置。
• acceptsComponentArguments：数组类型，指定该助手接受的动态组件参数路径（比如this.tool），告诉Embroider这个参数是合法的组件引用。
• allowedComponents：可选数组，明确指定允许通过该助手渲染的组件名称（比如你用到的case-note），这是更严格的安全配置，推荐使用。

正确配置示例 #

修正后的packageRules配置如下：

const { Webpack } = require('@embroider/webpack');
return require('@embroider/compat').compatBuild(app, Webpack, {
  // 保留你的其他原有配置
  packageRules: [
    {
      package: '@ember/component',
      components: {
        'component': {
          acceptsComponentArguments: ['this.tool'],
          // 明确允许的组件列表，后续新增动态组件时直接追加即可
          allowedComponents: ['case-note'],
        },
      },
    },
  ],
});

关键修正点 #

1. 替换package字段值：将@glimmer/component改为@ember/component，匹配{{component}}助手所属的包。
2. 移除冗余配置：删掉layout字段，该字段用于配置自定义组件的布局路径，不适用于内置的component助手。
3. 新增安全限制：添加allowedComponents明确允许的组件，既满足Embroider的安全校验，也能让构建工具提前打包这些组件。

验证方法 #

配置完成后，重新执行构建命令（如ember build或ember serve），之前的"Unsafe dynamic component"错误应会消失。若后续新增其他动态组件，只需将组件名称追加到allowedComponents数组中即可。

内容的提问来源于stack exchange，提问作者匿名