Just upgraded from 5.4 to 5.8. Now I’m getting this error.

srcnode_modules.embroiderrewritten-approutescomponentscase-toolstemplate.hbs:
Unsafe dynamic component: this.tool in
node_modules.embroiderrewritten-approutescomponentscase-toolstemplate.hbs 

I found only one link so far that discusses how to set up an exception for ‘component’. But I don’t understand what it’s asking me to do.

I’ve tried variations on these values for packageRules. With these values it tells me that it can’t parse “component”.

What do the various values in packageRules mean, and where do I find what to shove into them?

packageRules

const { Webpack } = require('@embroider/webpack');
return require('@embroider/compat').compatBuild(app, Webpack, {
...
packageRules: [
    {
      package: '@glimmer/component',
      components: {
        'component': {
          acceptsComponentArguments: ['this.tool'],
          layout: {
            addonPath: 'approutescomponentscase-toolscomponent.hbs',
          },
        },
      },
    },
  ],

template.hbs

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';

{{!-- Tools --}}
{{#if this.tool}}
<div class="absolute right-24">
    <div>{{component this.tool caseId=@caseId}}</div>
</div>
{{/if}}

component.js

export default class CaseToolsComponent extends Component {
    @tracked tool = ""
    @action  toggleTool(toolName) {
        if (this.tool == toolName) {
            this.tool = ""
        } else {
            this.tool = toolName
        }
    }
}