# Upgrade from 5.4 to 5.8

**URL:** <https://discuss.emberjs.com/t/upgrade-from-5-4-to-5-8/20508>\
**Category:** Uncategorized\
**Created:** [May 16, 2024, 6:24pm UTC](https://discuss.emberjs.com/t/upgrade-from-5-4-to-5-8/20508 "2024-05-16T18:24:22Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![b-rlw](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/b-rlw/32/18306_2.png) [@b-rlw](https://discuss.emberjs.com/u/b-rlw)\
**Post date:** [May 16, 2024, 6:24pm UTC](https://discuss.emberjs.com/t/upgrade-from-5-4-to-5-8/20508/1 "2024-05-16T18:24:22Z")

</div>

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

```
\src\node_modules\.embroider\rewritten-app\routes\components\case-tools\template.hbs:
Unsafe dynamic component: this.tool in
node_modules\.embroider\rewritten-app\routes\components\case-tools\template.hbs 

```

I found only one [link](https://mainmatter.com/blog/2022/03/17/dynamic-components-embroider/) 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

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

```

template.hbs

```auto
<div class="ml-auto flex float-right">

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

    {{!-- Tool bar --}}
    <div class="bg-slate-400 ml-auto p-2">
        <button {{on "click" (fn this.toggleTool "case-note" )}}
            class=" text-slate-600 hover:text-white hover:bg-slate-300 group flex gap-x-3 rounded-md p-3 text-sm leading-6 font-semibold"
            type="button" id="btnCaseListNavBarCaseNote">
            <Bui::Icon class="w-8 h-8" @icon="sticky-note" />
        </button>
    </div>
</div>

```

component.js

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

```

---

<div class="post-metadata">

**Author:** ![NullVoxPopuli](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nullvoxpopuli/32/18691_2.png) [@NullVoxPopuli](https://discuss.emberjs.com/u/NullVoxPopuli)\
**Post date:** [May 16, 2024, 11:19pm UTC](https://discuss.emberjs.com/t/upgrade-from-5-4-to-5-8/20508/2 "2024-05-16T23:19:03Z")

</div>

thanks for asking! I saw your StackOverflow post before this one – and replied there: [ember.js - packageRules definition for embroider to allow component from @glimmer/component to work in ember 5.8 - Stack Overflow](https://stackoverflow.com/questions/78491810/packagerules-definition-for-embroider-to-allow-component-from-glimmer-component)

---

<div class="post-metadata">

**Author:** ![b-rlw](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/b-rlw/32/18306_2.png) [@b-rlw](https://discuss.emberjs.com/u/b-rlw)\
**Post date:** [May 17, 2024, 4:32am UTC](https://discuss.emberjs.com/t/upgrade-from-5-4-to-5-8/20508/3 "2024-05-17T04:32:29Z")

</div>

I appreciate all the really good advice and help. Thank you so very much!

But no good deed goes unpunished.

The \<this.tool … works but only if I add a static reference to the CaseNote component into the tool bar. It seems like embroider doesn’t add CaseNote to the Case route unless there’s a hard reference.

Ideas?

```auto
<div class="ml-auto flex float-right">

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

    {{!-- Tool bar --}}
    <div class="bg-slate-400 ml-auto p-2">
        <button {{on "click" (fn this.toggleTool "case-note" )}}
            class=" text-slate-600 hover:text-white hover:bg-slate-300 group flex gap-x-3 rounded-md p-3 text-sm leading-6 font-semibold"
            type="button" id="btnCaseListNavBarCaseNote">
            <Bui::Icon class="w-6 h-6" @icon="sticky-note" />
        </button>
{{!-- THIS IS REQUIRED IN ORDER TO MAKE THE TOOLS SECTION ABOVE DISPLAY THE TOOL --}}
        {{#if this.fakery}}
        <CaseNote @caseId={{@caseId}} />
        {{/if}}
    </div>
</div>

```

---

<div class="post-metadata">

**Author:** ![NullVoxPopuli](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nullvoxpopuli/32/18691_2.png) [@NullVoxPopuli](https://discuss.emberjs.com/u/NullVoxPopuli)\
**Post date:** [May 17, 2024, 1:59pm UTC](https://discuss.emberjs.com/t/upgrade-from-5-4-to-5-8/20508/4 "2024-05-17T13:59:15Z")

</div>

You missed some details from my answer on stack overflow 😅No worries!

`<this.tool />` has the same “dynamic” problem you were encountering before.

What you’re noticing about `CaseNote` is solved by the `TOOLS`-map/object concept below:

Also, copy pasting, in case stackoverflow loses threads or something:

* * *

Looking back at your error:

```auto
Unsafe dynamic component: this.tool in 
routes\components\case-tools\template.hbs 

```

is because of this code:

```auto
        <div>{{component this.tool caseId=@caseId}}</div>

```

you can’t do `{{component this.tool}}` anywhere in your app if you want to be fully strict compatible.

Going forward `{{component` will not accept strings.

The laziest thing you can do today is this:

```auto
{{#let (component (ensure-safe-component this.tool)) as |Tool|}}
  <Tool />
{{/let}}

```

which you probably don’t want to do, since to be more future proof, you’ll benefit from importing all of your possible components and creating a map to choose from like this:

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

// import all your tools, they could come from anywhere, 
// doesn't have to be sibling (./)
import Hammer from './hammer';
import Drill from './drill';
import Shovel from './shover';

const TOOLS = {
  // map of:
  // lower-case-hyphenated/maybe/namespaced-name => ActualComponent
  hammer: Hammer,
  drill: Drill,
  shover: Shovel,
}

export default class CaseToolsComponent extends Component {
    @tracked tool;

    @action  
    toggleTool(toolName) {
      let tool = TOOLS[toolName];
    
      assert(`Tool named ${toolName} is not known, and cannot be used`, tool);

      this.tool = tool;
    }
}

```

and then your template would look like this

```auto
{{#if this.tool}}

  {{#let (ensure-safe-component this.tool) as |Tool|}}
    <Tool />
  {{/let}}

{{/if}}

```

not that this still requires `ensure-safe-component` because property accesses are dynamic.

to have the least “weirdness” you can migrate all the way to GJS, which would look like this:

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

// import all your tools, they could come from anywhere, 
// doesn't have to be sibling (./)
import Hammer from './hammer';
import Drill from './drill';
import Shovel from './shover';

const TOOLS = {
  // map of:
  // lower-case-hyphenated/maybe/namespaced-name => ActualComponent
  hammer: Hammer,
  drill: Drill,
  shover: Shovel,
}

export default class CaseToolsComponent extends Component {
    @tracked tool;

    @action  
    toggleTool(toolName) {
      let tool = TOOLS[toolName];
    
      assert(`Tool named ${toolName} is not known, and cannot be used`, tool);

      this.tool = tool;
    }

    <template>
        {{#if this.tool}}
            <this.tool />
        {{/if}}
    </template>
}

```

---

<div class="post-metadata">

**Author:** ![b-rlw](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/b-rlw/32/18306_2.png) [@b-rlw](https://discuss.emberjs.com/u/b-rlw)\
**Post date:** [May 17, 2024, 8:36pm UTC](https://discuss.emberjs.com/t/upgrade-from-5-4-to-5-8/20508/5 "2024-05-17T20:36:25Z")

</div>

I clearly missed some bits from the answer you posted on SO. Thanks for the repost here.

I **think** I applied what you’ve provided correctly. But I still can get rid of the hard reference in the .hbs. I’m very new to Ember, and mostly new to JS, browser apps, npm, etc… So it takes me a while to absorb, understand, and eventually put all the help I’ve received to good use.

–component–

```auto
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { ensureSafeComponent } from '@embroider/util';
import CaseNoteComponent from '/routes/components/case-note/component.js';

```

Of note here in the component, I found another example of how to use CaseNoteComponent from within the component itself. However, adding that doesn’t help.

```auto
const TOOLS = {
    'case-note': CaseNoteComponent,
}

export default class CaseToolsComponent extends Component {
    @tracked tool = null
    @tracked toolName = null

    @action toggleTool(toolName) {
        if (this.toolName === toolName) {
            console.log('closing tool', toolName)
            this.toolName = null
            this.tool = null
            return
        }
        console.log('opening tool', toolName)

```

I’ve tried the following two different ways. This is the first.

```auto
        this.tool = TOOLS[toolName]
        ensureSafeComponent(TOOLS[toolName] || toolName, this)

```

This is the second.

```auto
        this.tool = ensureSafeComponent(TOOLS[toolName] || toolName, this)

        this.toolName = toolName
        console.log('tool', this.tool)
    }
}

```

–template–

```auto
<div class="ml-auto flex float-right">

    {{!-- Tools --}}
    {{#if this.tool}}
    {{#let (ensure-safe-component this.tool) as |Tool|}}
        <div class="absolute right-24">
            <Tool @caseId={{@caseId}} />
        </div>
    {{/let}}
    {{/if}}

    {{!-- Tool bar --}}
    <div class="bg-slate-400 ml-auto p-2">
        <button {{on "click" (fn this.toggleTool "case-note" )}}
            class=" text-slate-600 hover:text-white"
            type="button" id="btnCaseListNavBarCaseNote">
            <Bui::Icon class="w-6 h-6" @icon="sticky-note" />
        </button>

```

This is the bit I can’t seem to do without.

```auto
        {{#if 0}}<CaseNote/>{{/if}}
    </div>
</div>

```

---

<div class="post-metadata">

**Author:** ![NullVoxPopuli](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nullvoxpopuli/32/18691_2.png) [@NullVoxPopuli](https://discuss.emberjs.com/u/NullVoxPopuli)\
**Post date:** [May 17, 2024, 9:30pm UTC](https://discuss.emberjs.com/t/upgrade-from-5-4-to-5-8/20508/6 "2024-05-17T21:30:36Z")

</div>

thanks for posting your updated code!!

the `ensureSafeComponent` in JS isn’t needed – it’s fine to just use the template – nothing in the JS is saying that anything is going to be used as a component, so we don’t need to worry about that.

If you remove `{{#if 0}}<CaseNote/>{{/if}}` what error message do you get?

As far as I can tell, because you’re importing CaseNote you should be good to go.

However! one goofy thing I do see is the import path form `CaseNote` looks off:

```js
import CaseNote from '/routes/components/case-note/component.js';

```

in particular, starting an import with `/` means the root URL – and we’re not working with URLs when authoring these files – we’re working with “packages” (sorta) 🎉 (like you said, npm is a lot! lots of definition overloading / confusion) – so you import should actually be:

```js
import CaseNote from '<name-of-your-app>/components/case-note';

```

or, if case-note is co-located with case-tools,

```js
import CaseNote from './case-note';

```

note also that I removed the suffixing `component.js` – this is deprecated (this may have been the “pods” location of the component, where you have `component.js` + `template.hbs` – you’d want to migrate to “co-located components”, which means “case-note.js” and “case-note.hbs” (or if you go straight to gjs, just case-note.gjs (one file))

---

<div class="post-metadata">

**Author:** ![b-rlw](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/b-rlw/32/18306_2.png) [@b-rlw](https://discuss.emberjs.com/u/b-rlw)\
**Post date:** [May 17, 2024, 11:05pm UTC](https://discuss.emberjs.com/t/upgrade-from-5-4-to-5-8/20508/7 "2024-05-17T23:05:40Z")

</div>

If I remove {{#if 0}} … There is no build error. There is no console error. The case-note component just doesn’t appear.

Here’s the real kicker, the case-note calls the backend to query a list of notes. That still fires and with the correct case id.

It seems to be invisible.

Also the import statement…

```auto
import CaseNoteComponent from './case-note';
Module not found: Error: Can't resolve './case-note' 

```

```auto
import CaseNoteComponent from './case-note/component';
Module not found: Error: Can't resolve './case-note/component'

```

```auto
import CaseNoteComponent from './case-note/component.js';
Module not found: Error: Can't resolve './case-note/component.js'

```

This builds.

```auto
import CaseNoteComponent from '/routes/components/case-note/component';

```

![image](https://us1.discourse-cdn.com/flex019/uploads/emberjs_public/original/3X/2/a/2a3dd73d9537ebcd6d924081469fb791eac65242.png)

---

<div class="post-metadata">

**Author:** ![NullVoxPopuli](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nullvoxpopuli/32/18691_2.png) [@NullVoxPopuli](https://discuss.emberjs.com/u/NullVoxPopuli)\
**Post date:** [May 18, 2024, 6:50pm UTC](https://discuss.emberjs.com/t/upgrade-from-5-4-to-5-8/20508/8 "2024-05-18T18:50:16Z")

</div>

Since they’re both in separate folders, your import should start with `../`

The ‘import that works’ probably just undefined and doesn’t error at build time by accident.

(Sorry for brevity, mobile)

---

<div class="post-metadata">

**Author:** ![b-rlw](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/b-rlw/32/18306_2.png) [@b-rlw](https://discuss.emberjs.com/u/b-rlw)\
**Post date:** [May 19, 2024, 5:08pm UTC](https://discuss.emberjs.com/t/upgrade-from-5-4-to-5-8/20508/9 "2024-05-19T17:08:27Z")

</div>

Thanks again. I made that change. I should have realized that the path worked like a directory.

```auto
import CaseNoteComponent from '../case-note/component';

```

I had hoped that by fixing this error that I could remove the {{#if 0}} hack.

But that still remains necessary. Without it, the CaseNotesComponent seems to be active but invisible.

---

<div class="post-metadata">

**Author:** ![NullVoxPopuli](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nullvoxpopuli/32/18691_2.png) [@NullVoxPopuli](https://discuss.emberjs.com/u/NullVoxPopuli)\
**Post date:** [May 19, 2024, 5:14pm UTC](https://discuss.emberjs.com/t/upgrade-from-5-4-to-5-8/20508/10 "2024-05-19T17:14:31Z")

</div>

can you confirm that `CaseNoteComponent` has a value? (and isn’t undefined)?

Also, if you rename `case-note/component.js` and `case-note/template.hbs` to `case-note/index.js` and `casen-note/index.hbs` (component + template are “pods”, which are now deprecated in ember 5.9 or 5.10, I forget) – does `CaseNotComponent` have a value?

---

<div class="post-metadata">

**Author:** ![b-rlw](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/b-rlw/32/18306_2.png) [@b-rlw](https://discuss.emberjs.com/u/b-rlw)\
**Post date:** [May 20, 2024, 3:11pm UTC](https://discuss.emberjs.com/t/upgrade-from-5-4-to-5-8/20508/11 "2024-05-20T15:11:41Z")

</div>

Console log(this.tool) yields

```auto
this.tool class CaseNoteComponent extends _glimmer_component __WEBPACK_IMPORTED_MODULE_4__ ["default"] {
  createNoteNotification() {
    this.updateList();
  }
  updateList() {
    let search = this.args.caseId;
    …

```

As for renaming case-note/component.js & template.hbs to index.js & index.hbs, ember really doesn’t like that. I think ember 5.8.0 is the latest version. Is 5.9 some pre-release version?

---

<div class="post-metadata">

**Author:** ![NullVoxPopuli](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nullvoxpopuli/32/18691_2.png) [@NullVoxPopuli](https://discuss.emberjs.com/u/NullVoxPopuli)\
**Post date:** [May 20, 2024, 3:53pm UTC](https://discuss.emberjs.com/t/upgrade-from-5-4-to-5-8/20508/12 "2024-05-20T15:53:17Z")

</div>

naw, the format I suggest is supported all the way back to 3.14 or something like that – it’s “Component co-location”, and is the default in new apps.

Can you provide the error? what do you mean by “doesn’t like that”? is your ember-cli-htmlbars up to date?

> Console log(this.tool) yields

that’s good – I guess I don’t know what’s wrong (what you’re doing should work), and will need an OSS minimal reproduction to help further 😅

though, to be extra sure, can you post all your code again?

---

<div class="post-metadata">

**Author:** ![b-rlw](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/b-rlw/32/18306_2.png) [@b-rlw](https://discuss.emberjs.com/u/b-rlw)\
**Post date:** [May 20, 2024, 5:16pm UTC](https://discuss.emberjs.com/t/upgrade-from-5-4-to-5-8/20508/13 "2024-05-20T17:16:55Z")

</div>

First: I changed the import to look for index instead of coponent.

```auto
import CaseNoteComponent from '../case-note/index';

```

Then from file explorer rename those two files…

```auto
ERROR in ./routes/components/case-tools/template.hbs 5:0-63
Module not found: Error: Can't resolve '#embroider_compat/components/case-note' in 'C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI'
 @ ./assets/OKRA.js 307:13-70

ERROR in ./routes/components/case-tools/component.js 9:0-55
Module not found: Error: Can't resolve '../case-note/component' in 'C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI\node_modules\.embroider\rewritten-app\routes\components\case-tools'
 @ ./assets/OKRA.js 310:13-70

ERROR in ./tests/integration/routes/components/case-note/component-test.js 5:0-63
Module not found: Error: Can't resolve '#embroider_compat/components/case-note' in 'C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI'
 @ ./assets/test.js 137:13-92

3 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.91.0 compiled with 3 errors in 29217 ms
Build Error (PackagerRunner) in routes\components\case-tools\template.hbs

Module not found: Error: Can't resolve '#embroider_compat/components/case-note' in 'C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI'

```

* * *

This is my code.

BEFORE TRYING TO USE INDEX IN LIEU OF COMPONENT/TEMPLATE case-tool/component.js

```auto
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import CaseNoteComponent from '../case-note/component';

const TOOLS = {
    'CaseNote': CaseNoteComponent,
}

export default class CaseToolsComponent extends Component {
    @tracked tool = null
    @tracked toolName = null

    @action toggleTool(toolName) {
        if (this.toolName === toolName) {
            this.toolName = null
            this.tool = null
            return
        }
        this.tool = TOOLS[toolName]
        this.toolName = toolName
        console.log('this.toolName', this.toolName)
        console.log('this.tool', this.tool)
    }
}

```

case-tool/template.hbs

```auto
<div class="ml-auto flex float-right">

    {{!-- Tools --}}
    {{#if this.tool}}
    {{#let (ensure-safe-component this.tool) as |Tool|}}
        <div class="absolute right-24">
            <Tool @caseId={{@caseId}} />
        </div>
    {{/let}}
    {{/if}}

    {{!-- Tool bar --}}
    <div class="bg-slate-400 ml-auto p-2">
        <button {{on "click" (fn this.toggleTool "CaseNote" )}}
            class=" text-slate-600 hover:text-white hover:bg-slate-300 group flex gap-x-3 rounded-md p-3 text-sm leading-6 font-semibold"
            type="button" id="btnCaseListNavBarCaseNote">
            <Bui::Icon class="w-6 h-6" @icon="sticky-note" />
        </button>
        {{#if 0}}<CaseNote/>{{/if}}
    </div>
</div>

```

---

<div class="post-metadata">

**Author:** ![NullVoxPopuli](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nullvoxpopuli/32/18691_2.png) [@NullVoxPopuli](https://discuss.emberjs.com/u/NullVoxPopuli)\
**Post date:** [May 20, 2024, 5:42pm UTC](https://discuss.emberjs.com/t/upgrade-from-5-4-to-5-8/20508/14 "2024-05-20T17:42:34Z")

</div>

> [@b-rlw](#):
>
> BEFORE TRYING TO USE INDEX IN LIEU OF COMPONENT/TEMPLATE case-tool/component.js

change:

```auto
import CaseNoteComponent from '../case-note/component';

```

to

```auto
import CaseNoteComponent from '../case-note';

```

and _after_, if you try the `index paths, the import is the same:

```auto
import CaseNoteComponent from '../case-note';

```

that should do it!

---

<div class="post-metadata">

**Author:** ![b-rlw](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/b-rlw/32/18306_2.png) [@b-rlw](https://discuss.emberjs.com/u/b-rlw)\
**Post date:** [May 20, 2024, 6:04pm UTC](https://discuss.emberjs.com/t/upgrade-from-5-4-to-5-8/20508/15 "2024-05-20T18:04:07Z")

</div>

WITHOUT renaming the files and just making this change.

```auto
import CaseNoteComponent from '../case-note';

```

Yields this error

```auto
ERROR in ./routes/components/case-tools/component.js 9:0-45
Module not found: Error: Can't resolve '../case-note' in 'C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI\node_modules\.embroider\rewritten-app\routes\components\case-tools'
resolve '../case-note' in 'C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI\node_modules\.embroider\rewritten-app\routes\components\case-tools'
  using description file: C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI\node_modules\.embroider\rewritten-app\package.json (relative path: ./routes/components/case-tools)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI\node_modules\.embroider\rewritten-app\package.json (relative path: ./routes/components/case-note)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI\node_modules\.embroider\rewritten-app\routes\components\case-note is not a file
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI\node_modules\.embroider\rewritten-app\routes\components\case-note.wasm doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI\node_modules\.embroider\rewritten-app\routes\components\case-note.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI\node_modules\.embroider\rewritten-app\routes\components\case-note.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI\node_modules\.embroider\rewritten-app\routes\components\case-note.json doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI\node_modules\.embroider\rewritten-app\routes\components\case-note.ts doesn't exist
      .hbs
        Field 'browser' doesn't contain a valid alias configuration
        C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI\node_modules\.embroider\rewritten-app\routes\components\case-note.hbs doesn't exist
      .hbs.js
        Field 'browser' doesn't contain a valid alias configuration
        C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI\node_modules\.embroider\rewritten-app\routes\components\case-note.hbs.js doesn't exist
      as directory
        existing directory C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI\node_modules\.embroider\rewritten-app\routes\components\case-note
          using description file: C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI\node_modules\.embroider\rewritten-app\package.json (relative path: ./routes/components/case-note)
            using path: C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI\node_modules\.embroider\rewritten-app\routes\components\case-note\index
              using description file: C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI\node_modules\.embroider\rewritten-app\package.json (relative path: ./routes/components/case-note/index)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI\node_modules\.embroider\rewritten-app\routes\components\case-note\index doesn't exist
                .wasm
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI\node_modules\.embroider\rewritten-app\routes\components\case-note\index.wasm doesn't exist
                .mjs
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI\node_modules\.embroider\rewritten-app\routes\components\case-note\index.mjs doesn't exist
                .js
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI\node_modules\.embroider\rewritten-app\routes\components\case-note\index.js doesn't exist
                .json
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI\node_modules\.embroider\rewritten-app\routes\components\case-note\index.json doesn't exist
                .ts
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI\node_modules\.embroider\rewritten-app\routes\components\case-note\index.ts doesn't exist
                .hbs
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI\node_modules\.embroider\rewritten-app\routes\components\case-note\index.hbs doesn't exist
                .hbs.js
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\dev\OKRA\upgrade_ember\src\OKRA.WebUI\node_modules\.embroider\rewritten-app\routes\components\case-note\index.hbs.js doesn't exist
 @ ./assets/OKRA.js 313:13-70

```

---

<div class="post-metadata">

**Author:** ![NullVoxPopuli](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nullvoxpopuli/32/18691_2.png) [@NullVoxPopuli](https://discuss.emberjs.com/u/NullVoxPopuli)\
**Post date:** [May 20, 2024, 6:25pm UTC](https://discuss.emberjs.com/t/upgrade-from-5-4-to-5-8/20508/16 "2024-05-20T18:25:50Z")

</div>

what about renaming the files and using:

```js
import CaseNoteComponent from '../case-note';

```

? I wonder if all this pods component stuff is just super weird – (one of the reasons its deprecated for removal in ember v6).

If you rename your files to:

```auto
case-tools.js
case-tools.hbs
case-note.js
case-note.hbs

```

you can get away with:

```js
import CaseNoteComponent from './case-note';

```

---

<div class="post-metadata">

**Author:** ![b-rlw](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/b-rlw/32/18306_2.png) [@b-rlw](https://discuss.emberjs.com/u/b-rlw)\
**Post date:** [May 22, 2024, 8:28pm UTC](https://discuss.emberjs.com/t/upgrade-from-5-4-to-5-8/20508/17 "2024-05-22T20:28:57Z")

</div>

I just wanted to say thank your for all your help.

I dragged in our ember expert. He threw in the towel.

We’ve decided that instead of going this route, that we’ll just put conditionals around future tools and let the hbs handle it with if’s for each tool entry.

It was soaking up WAY too much developer time.

But thank you once again!

---

<div class="post-metadata">

**Author:** ![NullVoxPopuli](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nullvoxpopuli/32/18691_2.png) [@NullVoxPopuli](https://discuss.emberjs.com/u/NullVoxPopuli)\
**Post date:** [May 22, 2024, 8:51pm UTC](https://discuss.emberjs.com/t/upgrade-from-5-4-to-5-8/20508/18 "2024-05-22T20:51:02Z")

</div>

If you can create a minimal repro in a separate OSS app, I can PR you a fix \<3

---

<div class="post-metadata">

**Author:** ![b-rlw](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/b-rlw/32/18306_2.png) [@b-rlw](https://discuss.emberjs.com/u/b-rlw)\
**Post date:** [May 31, 2024, 8:21pm UTC](https://discuss.emberjs.com/t/upgrade-from-5-4-to-5-8/20508/19 "2024-05-31T20:21:34Z")

</div>

I plan to circle back and do this; however, we’re (like everyone else) under tight drop dead lines. So, it’ll have to wait.

---

<div class="post-metadata">

**Author:** ![Lavason](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/lavason/32/18354_2.png) [@Lavason](https://discuss.emberjs.com/u/Lavason)\
**Post date:** [June 11, 2024, 11:59am UTC](https://discuss.emberjs.com/t/upgrade-from-5-4-to-5-8/20508/20 "2024-06-11T11:59:02Z")

</div>

Hello there I am new here and I don’t know much about this community, Is it important to upgarde from 5.4 to 5.8?

[Next page](https://discuss.emberjs.com/t/upgrade-from-5-4-to-5-8/20508.md?page=2)