• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Aurelia Dynamic Compose + Webpack = Module ID Not Found

Aurelia 1 · April 7, 2017

If you’re using the latest and greatest Webpack plugin for Aurelia, there is a possibility if you use the <compose> element to dynamically render UI you will run into an issue where Webpack doesn’t know about the dynamic imports.

Specifically, I am talking about usage of <compose> that might look like the following:

<template>
    <compose view-model="./views/view-${viewTemplateName}"></compose>
</template>

This is due to the fact, they can’t be resolved beforehand and put into the bundle. Fortunately, there is an easy fix for all of this.

Newly introduced into the Webpack plugin, is support for PLATFORM.moduleName(file) which tells Webpack where to find files in Aurelia. We can use this to tell Webpack about our dynamic files.

At the top of each dynamic file, simply add the following:

import {PLATFORM} from "aurelia-framework";

PLATFORM.moduleName("./my-dynamic-view");

export class MyDynamicView {

}

Using moduleName helps Aurelia and Webpack see your dynamic files: that’s all you need to do.

Dwayne

Leave a Reply Cancel reply

4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Rich Bryant
Rich Bryant
5 years ago

Does this work if you use Aurelia to render (for example) MVC Partials?

0
Roger Doll
Roger Doll
5 years ago

There is another approach that I found useful. See this discussion: https://github.com/jods4/aurelia-webpack-build/issues/28

Instead of the PLATFORM.modulename in every file, I used the GlobDependenciesPlugin to locate all the components related to the component with the dynamic

0
Paolo Carrasco
Paolo Carrasco
5 years ago

This sounds very promising for creating micro-frontends!
https://www.thoughtworks.com/radar/techniques/micro-frontends

0
Ananth Subramanian
Ananth Subramanian
5 years ago

I tried this approach and it did not work. I have a viewmodel which uses “ to dynamically load the other view-models. I followed the instructions on this article but I am still getting the error. Unhandled rejection Error: Unable to find module with ID.

0

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • How To Mock uuid In Jest
  • Which Neural DSP Archetype Plugins Should You Buy?
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • Removing A Character From The Start/End of a String In Javascript
  • How To Convert FormData To JSON Object
  • How To Correctly Use Semantic HTML5 <article>, <main> and <section> Tags
  • Wild Natural Deodorant Review
  • How To Get Last 4 Digits of A Credit Card Number in Javascript

Recent Comments

  • Thebe on How to Remove the My Sites Menu From the WordPress Admin Bar
  • Maccas worker jn the 2000s on Dear McDonald’s: bring back the Warm Cookie Sundae, you cowards
  • Anamika Singh on Testing Event Listeners In Jest (Without Using A Library)
  • Stefan on A List of WordPress Gutenberg Core Blocks
  • pandammonium on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz