# setRoot fails when not hard coded

**URL:** <https://discourse.aurelia.io/t/setroot-fails-when-not-hard-coded/358>\
**Category:** Help Requests\
**Created:** [November 10, 2017, 10:10pm UTC](https://discourse.aurelia.io/t/setroot-fails-when-not-hard-coded/358 "2017-11-10T22:10:08Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![lfoust](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/lfoust/32/119_2.png) [@lfoust](https://discourse.aurelia.io/u/lfoust)\
**Post date:** [November 10, 2017, 10:10pm UTC](https://discourse.aurelia.io/t/setroot-fails-when-not-hard-coded/358/1 "2017-11-10T22:10:08Z")

</div>

I am having trouble locating a module in my app startup. In my HTML markup for the page being loaded I have:

```auto
<div aurelia-app="main" data-feature="player/shell">
</div>

```

And I am pulling the feature name out in my main.js with:

```auto
let featureName = jQuery(aurelia.host).data('feature');
let featureModule = PLATFORM.moduleName(featureName);
aurelia.start().then(() => aurelia.setRoot(featureModule));

```

and this fails with:

> Unable to find module with ID: player/shell

But, if I use a hard coded string instead:

```auto
aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName("player/shell")));

```

It works! Any idea why the hard coded version works but the version where the string is pulled from the HTML fails?

**Edit:** Forgot to mention this is an app created with the aurelia-cli using webpack

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [November 10, 2017, 10:27pm UTC](https://discourse.aurelia.io/t/setroot-fails-when-not-hard-coded/358/2 "2017-11-10T22:27:07Z")

</div>

The module you want to use as root isn’t bundled. To make it work, you need to signal webpack (i guess?) to bundle it. If you really want to have dynamic root module, include everything in your `src` folder into the bundle, via `new AureliaPlugin({ includeAll: 'mySourceFolder' })`

---

<div class="post-metadata">

**Author:** ![lfoust](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/lfoust/32/119_2.png) [@lfoust](https://discourse.aurelia.io/u/lfoust)\
**Post date:** [November 10, 2017, 11:07pm UTC](https://discourse.aurelia.io/t/setroot-fails-when-not-hard-coded/358/3 "2017-11-10T23:07:12Z")

</div>

Looking at my dist/app.bundle.js it appears that you are correct. The player/shell module isn’t bundled in there. Changing

```auto
new AureliaPlugin()

```

to

```auto
new AureliaPlugin({ includeAll: srcDir })

```

in my webpack.config.js doesn’t seem to help. Is there a list of steps you need to take for webpack each time you wan to add a new module to your app? I am used to just being able to add an html/js pair and re-build.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [November 10, 2017, 11:20pm UTC](https://discourse.aurelia.io/t/setroot-fails-when-not-hard-coded/358/4 "2017-11-10T23:20:07Z")

</div>

Including everything in your source folder should be the only step needed. Something else went wrong for your bundle. What does the error say ?

---

<div class="post-metadata">

**Author:** ![lfoust](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/lfoust/32/119_2.png) [@lfoust](https://discourse.aurelia.io/u/lfoust)\
**Post date:** [November 15, 2017, 7:15am UTC](https://discourse.aurelia.io/t/setroot-fails-when-not-hard-coded/358/5 "2017-11-15T07:15:43Z")

</div>

I found the solution from [this comment](https://github.com/aurelia/webpack-plugin/issues/107#issuecomment-293878340). Basically if you don’t reference module statically you can’t load it at runtime because webpack won’t include it in the bundle. So I had to edit my root **index.ts** to load the module as a global resource:

```auto
import {FrameworkConfiguration} from 'aurelia-framework';
import {PLATFORM} from 'aurelia-pal';

export function configure(config: FrameworkConfiguration) {
  config.globalResources([
    PLATFORM.moduleName('player/shell')
  ]);
}

```

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [November 15, 2017, 9:25pm UTC](https://discourse.aurelia.io/t/setroot-fails-when-not-hard-coded/358/6 "2017-11-15T21:25:30Z")

</div>

Thats a solid choice. I was pointing at the other way to help you get it to work in development easier only. Glad you got it to work

---

<div class="post-metadata">

**Author:** ![rkever](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rkever/32/145_2.png) [@rkever](https://discourse.aurelia.io/u/rkever)\
**Post date:** [November 15, 2017, 11:09pm UTC](https://discourse.aurelia.io/t/setroot-fails-when-not-hard-coded/358/7 "2017-11-15T23:09:44Z")

</div>

If you are code splitting, for larger apps where you wouldn’t want to the end user loading the whole app, you can also just add it to the viewmodel where you’d want to use it. Then in your routes, just add your additional param to moduleName like `PLATFORM.moduleName('views/myRoutedView', 'my-bundle-name')`.

so in your viewmodel that’s needing that module…

```auto
import { PLATFORM } from 'aurelia-framework';

PLATFORM.moduleName('player/shell'); // this tells webpack to include this in the bundle for this view

export class MyViewModel() {
  // do stuff
}

```

Of course if you want this to be available globally, then what you are using now works well.