Aurelia CLI build errors with Velocity UI Pack

[aidesigner]

I'm submitting a bug report

Library Version: 0.17.0
Operating System: Windows 10
Node Version: 6.2.0
NPM Version: 3.8.9
Browser: Chrome
Language: TypeScript

As I migrated my project from Aurelia JSPM to the CLI I can no longer get Aurelia Velocity working. Below is the exact sequence, from scratch, that produces error (Also below). Aurelia with Velocity animations is really awesome, but I am really stuck on this problem.

Create Aurelia CLI project and then execute bash commands:
au new - Custom/Typescript/Sass/No Test/VSCode
npm install aurelia-animator-velocity --save
typings install dt~velocity-animate --save --global

Add dependencies into aurelia.json:
"velocity-animate",
{
"name": "aurelia-animator-velocity",
"path": "../node_modules/aurelia-animator-velocity/dist/amd",
"main": "aurelia-animator-velocity"
}

Add code to app.ts to bring in aurelia-animator-velocity:
import {VelocityAnimator} from "aurelia-animator-velocity";

Comment out below in aurelia-animator-velocity.d.ts (Separate Issue):
//import velocity from 'velocity-animate';

Running "au build" produces error below. The current issue is the path to velocity.ui.js should not contains src. Not sure if this a CLI issue or a velocity.ui.js path issue within animator-velocity.

...
Tracing aurelia-animator-velocity...
{ uid: 8,
  name: 'writeBundles',
  branch: false,
  error:
   { Error: ENOENT: no such file or directory, open 'C:\Users\...\Documents\Visual Studio 2015\Projects\Web\AureliaVelocityWebsite\src\node_modules\velocity-animate\velocity.ui.js'
       at Error (native)
       at Object.fs.openSync (fs.js:634:18)
       at Object.fs.readFileSync (fs.js:502:33)
       at Object.exports.readFileSync (C:\Users\...\Documents\Visual Studio 2015\Projects\Web\AureliaVelocityWebsite\node_modules\aurelia-cli\lib\file-system.js:38:13)
       at amodroTrace.fileRead (C:\Users\...\Documents\Visual Studio 2015\Projects\Web\AureliaVelocityWebsite\node_modules\aurelia-cli\lib\build\bundled-source.js:83:31)
       at Object.context.fileRead (C:\Users\...\Documents\Visual Studio 2015\Projects\Web\AureliaVelocityWebsite\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:176:18)
       at Object.context.load (C:\Users\...\Documents\Visual Studio 2015\Projects\Web\AureliaVelocityWebsite\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:357:30)
       at Object.Module.load (eval at <anonymous> (C:\Users\...\Documents\Visual Studio 2015\Projects\Web\AureliaVelocityWebsite\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:9), <anonymous>:832:29)
       at Object.Module.fetch (eval at <anonymous> (C:\Users\...\Documents\Visual Studio 2015\Projects\Web\AureliaVelocityWebsite\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:9), <anonymous>:822:66)
       at Object.Module.check (eval at <anonymous> (C:\Users\...\Documents\Visual Studio 2015\Projects\Web\AureliaVelocityWebsite\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:9), <anonymous>:854:30)
     errno: -4058,
     code: 'ENOENT',
     syscall: 'open',
     path: 'C:\\Users\\...\\Documents\\Visual Studio 2015\\Projects\\Web\\AureliaVelocityWebsite\\node_modules\\velocity-animate\\velocity\\velocity.ui.js',
     moduleTree: [ 'aurelia-animator-velocity' ],
     fileName: 'C:/Users/.../Documents/Visual Studio 2015/Projects/Web/AureliaVelocityWebsite/node_modules/aurelia-animator-velocity/dist/amd/aurelia-animator-velocity.js' },
  duration: [ 2, 545471137 ],
  time: 1470870577009 }

[jdanyow]

aurelia-animator-velocity expects to import velocity but the npm package for velocity is velocity-animate. The CLI doesn't seem to allow changing "name": "velocity-animate", to "name": "velocity",.

As a workaround, create a module named 'velocity' that returns velocity-animate:

scripts/velocity-shim.js:

define('velocity', ['velocity-animate'], function(velocity) {
  return velocity;
});

aurelia.json:

...
"aurelia-animator-velocity",
{
  "name": "velocity-animate",
  "path": "../node_modules/velocity-animate",
  "main": "velocity",
  "deps": ["jquery"],
  "resources": ["velocity.ui.js"]
},
{
  "name": "velocity",
  "path": "../scripts/velocity-shim"
},
...

[aidesigner]

Really great analysis and I will use the workaround until #309 is resolved. The animations are working, but Chrome Debug console still shows this error below. It is basically complaining about the anonymous define/factory function inside file "node_modules\velocity-animate\velocity.ui.js". Note: I am using velocity UI pack which is very helpful.

Perhaps this segment from the chrome error message link RequireJS mismatch provides a clue. Maybe this relates to CLI bundling, but I cannot figure it out.
"If the problem is the use of loader plugins or anonymous modules but the RequireJS optimizer is not used for file bundling, use the RequireJS optimizer."

Chrome Debug Console Error:
Uncaught Error: Mismatched anonymous define() module: function () {
return function (global, window, document, undefined) {
...The entire contents of velocity.ui.js function() is displayed here....
}
http://requirejs.org/docs/errors.html#mismatch

For future readers, with this fix it appears you still must do the following:
Comment out below in aurelia-animator-velocity.d.ts (Seperate Issue):
//import velocity from 'velocity-animate';

[EisenbergEffect]

@jdanyow Should we change the name we are using in our source code to import the library? or si this a difference between the npm and jspm packages?

[EisenbergEffect]

Closing this since the other issue tracks the real problem.