Unable to find module with ID for aurelia-validation plugin

[dasch88]

• Library Version: 2.0.0-rc.1
• Operating System: Windows 10
• Node Version: 7.7.2
• NPM Version: 4.1.2
• JSPM OR Webpack AND Version: webpack 2.3.2
• Browser: all
• Language: ESNext

Current behavior:
Everything works well, until I try to add the "aurelia-validation" plugin. Even though bundling works without error, once I run my fairly minimalistic app, I get the following error:

Uncaught (in promise) Error: Unable to find module with ID: aurelia-validation
at WebpackLoader.<anonymous> (aurelia-loader-webpack.js:187)
at step (aurelia-loader-webpack.js:36)
at Object.next (aurelia-loader-webpack.js:17)
at aurelia-loader-webpack.js:11
at Promise (<anonymous>)
at webpackJsonp.159.__awaiter (aurelia-loader-webpack.js:7)
at WebpackLoader.webpackJsonp.159.WebpackLoader._import (aurelia-loader-webpack.js:152)
at WebpackLoader.<anonymous> (aurelia-loader-webpack.js:252)
at step (aurelia-loader-webpack.js:36)
at Object.next (aurelia-loader-webpack.js:17)
at aurelia-loader-webpack.js:11
at Promise (<anonymous>)
at webpackJsonp.159.__awaiter (aurelia-loader-webpack.js:7)
at WebpackLoader.webpackJsonp.159.WebpackLoader.loadModule (aurelia-loader-webpack.js:239)
at _loadPlugin (aurelia-framework.js:184)
at aurelia-framework.js:177

It appears that the plugin cannot be located when aurelia is being configured in main.js:

import { PLATFORM } from 'aurelia-framework';

export function configure(aurelia) {
    aurelia.use
        .standardConfiguration()
        .plugin('aurelia-validation')
        .developmentLogging();

    aurelia.start().then(() => { 
        aurelia.setRoot(PLATFORM.moduleName('app'));
    });
}

This is especially curious because I can use import { ValidationControllerFactory, ValidationRules, validateTrigger } from 'aurelia-validation' just fine within one of my pages if I comment out the plugin initialization line in main.js. (Of course, if I try to do anything with the imported values it errors, saying I need to add the plugin call, as expected).

I've tried adding lines to the build resources in package.json to no avail, and tried adjusting my webpack.config to no end. Any help or point in the right direction would be very much appreciated!

For reference, the webpack.config.js file that I am using is here:
https://gist.github.com/dasch88/e4a6301d718515d496ced4fa8c1ba279

[jods4]

Change to:

.plugin(PLATFORM.moduleName('aurelia-validation'))

You need to indicate to webpack which strings are actually module names that will be loaded by aurelia-loader at runtime.

It serves two purposes:

• Ensure the module is bundled (this would be ok anyway because of your import);
• Preserve the name of the module so that aurelia-loader can find it.
• Bonus: it validates that you don't have typo in your module name.

If you look into your bundle you would see that Webpack renamed aurelia-validation to an integer, which aurelia-loader cannot find.

More background: https://github.com/aurelia/webpack-plugin/wiki/Managing-dependencies
Troubleshooting tips: https://github.com/aurelia/webpack-plugin/wiki/Debugging-missing-modules

[dasch88]

Oh wow I totally missed that well done wiki... My apologies! Thank you for your patience with explaining it and pointing me in the right direction. It wouldn't be a bad idea to even put a link to the wiki in the readme so others don't miss it as easily as I did

[RWOverdijk]

@jods4 How would I go about dynamically including plugins then? aurelia-config uses .plugin, should it then check if the environment is using webpack? How do I get that to work?

[jods4]

@RWOverdijk

Depends what you mean exactly:

• You can dynamically run plugins to your heart's content, as long as they're in the bundle.
• If you refer to having them - or not - in the bundle, "dynamically" is not an appropriate word because what is included in the bundle has to be decided "statically" by Webpack at compilation time.
  There are a few tricks you can try here, like putting the registration (.plugin(moduleName('xyz'))) in its own module that consumers import / or not (which Webpack will (resp. not) trace). Or you can remove the moduleName from code and rely on ModuleDependenciesPlugin (or similar) to declare at build time whether you want to bundle that module or not (this is how I handled Aurelia standard config). Code splitting could also help here as secondary chunks could be loaded only if user calls the corresponding .plugin().
• If you want to load arbitrary plugins that are unknown at build-time... that's your worst case. Webpack is actually not a loader and you'll have to come up with your own solution to load unknown files at runtime. Webpack is only a bundler and can only handle stuff that is known a build time.

[RWOverdijk]

@jods4 I should clarify.

aurelia-config does the .plugin() calls for you. Webpack now seems to need special treatment with PLATFORM.moduleName() causing aurelia-config to not work (due to ids it can't find).

[jods4]

@RWOverdijk I'm not familiar with aurelia-config so I'll need more details on how it works :)

[RWOverdijk]

@jods4 I just told you. It does the .plugin() calls for you. aurelia.use.plugin().

[jods4]

Surprisingly, I'll need more info.
Like how does it know what to .plugin() for you? How does it work?

[JoshuaVSherman]

possible go look at my codebase, and see if that helps you figure out how to do it.
I was having a similar issue with the aurelia-auth plugin. Notice my main.js and my webpack.config.js files here https://github.com/WebJamApps/combined-front

[RWOverdijk]

@jods4 I've sent you a message on gitter. But for others: https://github.com/SpoonX/swan-example-client/blob/master/src/scripts/main.js#L21,L30

This is an example. It uses those strings to load and configure plugins.

@JoshuaVSherman I don't think it's entirely the same. You're also using PLATFORM.moduleName

[stalniy]

extremely inconvenient API!