Search code examples
aureliawebpack-2

Webpack 2 with new AureliaPlugin can't find module at runtime


I am using the release candidate of the new Aurelia Webpack plugin designed to work with Webpack 2.

I got it up and working as far as building goes, but when I run, I am getting this error:

Unable to find module with ID: \"views/nav-bar/nav-bar-vm\"

Following the instructions for debugging this I ran webpack with --display-modules. That gave a long list of modules that had this in it:

[views/nav-bar/nav-bar-view.html] ./src/views/nav-bar/nav-bar-view.html 2.44 kB {0} [built] [views/nav-bar/nav-bar-vm] ./src/views/nav-bar/nav-bar-vm.ts 1.36 kB {0} [built]

I have bolded the module name. It is a spot on match (unless it is supposed to have the quotes...)

All the debugging tips don't talk about what to do when I get this error and the value matches...

The only non-standard thing I am doing is changing how views are matched to view-models via this code:

ViewLocator.prototype.convertOriginToViewUrl = (origin) => {
    let moduleId = origin.moduleId;


    // see if the module ends in 'Vm'
    if (moduleId.endsWith('-vm')) {
        var coreName = moduleId.substring(0, moduleId.length - 3);
        return coreName + '-view.html';
    } else {
        return moduleId + '.html';
    }
};

I am stumped on how to get past this error. If anyone knows how I would love some help!

Update:
Here is a link to my webpack.config.js file incase it can be of help with this issue:


Solution

  • Turns out the issue was with my webpack.config.js file.

    I had my html loader in there twice. The second one was causing an extra set of quotes to be placed around the Module ID.

    When I removed the second one, this error went away.