Upgrading to latest cli (1.0.0-beta13) throws error loading require local dependency

[salminio]

I'm submitting a bug report

• Library Version:
  1.0.0-beta13

Please tell us about your environment:

• Operating System:
  Windows 10

• Node Version:
  10.0.0

• NPM Version:
  6.8.0 (initially tried with 5.6.0)

• Browser:
  Failed on first one tried - Chrome 71.0.3578.98 (Official Build) (64-bit)

• Language:
  ESNext

• Loader/bundler:
  RequireJS

Current behavior:
It's failing to load some modules which looks to be because of a local require reference inside a bundled dist AMD built file... I've come across 2. One with aurelia-resize use of element-resize-detector and another is jshint which we actually use at runtime not just development. This works with the amodro tracer used with [email protected]

Probably the easiest to debug and recreate is the aurelia-resize... The following is included in the vendor bundle and it fails to load.

{
    "name": "aurelia-resize",
    "path": "../node_modules/aurelia-resize/dist/amd",
    "main": "index"
},
{
    "name": "element-resize-detector",
    "path": "../node_modules/element-resize-detector/dist",
    "main": "element-resize-detector"
},

As best I can tell the element-resize-detector is failing on a require statement inside the element-resize-detector.

The following line is throwing the error

//Detection strategies.
var objectStrategyMaker = require('./detection-strategy/object');

With the following stacktrace:

Unhandled rejection Error: Module name "detection-strategy/object" has not been loaded yet for context: _. Use require([])https://requirejs.org/docs/errors.html#notloaded 
 at makeError (http://localhost:9000/scripts/vendor-bundle-8.5.0.js:3834:17) 
 at Object.localRequire [as require] (http://localhost:9000/scripts/vendor-bundle-8.5.0.js:5102:44) 
 at requirejs (http://localhost:9000/scripts/vendor-bundle-8.5.0.js:5463:24) 
 at o (http://localhost:9000/scripts/vendor-bundle-8.5.0.js:56143:561) 
 at http://localhost:9000/scripts/vendor-bundle-8.5.0.js:56143:752 
 at Object.7../browser-detector (http://localhost:9000/scripts/vendor-bundle-8.5.0.js:57242:31) 
 at o (http://localhost:9000/scripts/vendor-bundle-8.5.0.js:56143:701) 
 at r (http://localhost:9000/scripts/vendor-bundle-8.5.0.js:56143:867) 
 at http://localhost:9000/scripts/vendor-bundle-8.5.0.js:56143:896 
 at Object.execCb (http://localhost:9000/scripts/vendor-bundle-8.5.0.js:5362:33) 
 at Module.check (http://localhost:9000/scripts/vendor-bundle-8.5.0.js:4544:55) 
 at Module.enable (http://localhost:9000/scripts/vendor-bundle-8.5.0.js:4842:22) 
 at Object.enable (http://localhost:9000/scripts/vendor-bundle-8.5.0.js:5223:39) 
 at Module. (http://localhost:9000/scripts/vendor-bundle-8.5.0.js:4827:33) 
 at http://localhost:9000/scripts/vendor-bundle-8.5.0.js:3800:23 
 at each (http://localhost:9000/scripts/vendor-bundle-8.5.0.js:3725:31)

JSHint was failing on something similar

var vars         = require("./vars.js");

throws same error.

• What is the expected behavior?
  Should load and work.

• What is the motivation / use case for changing the behavior?
  Tech currency... Trying to migrate to latest aurelia and babel 7 code.

[3cp]

There is no issue for me. https://github.com/huochunpeng/resize-demo

You could have some other uncommon setup.

You can try migrate to a clean project created out of au new.
Or you can show me your aurelia.json file.

BTW, it's unnecessary to have the explicit deps config for aurelia-resize and element-resize-detector. Latest cli can work it out automatically.

[salminio]

By adding the below to aurelia.json on a newly generated Hello World app... I get it to fail, but if I remove it and let aurelia build it without - then it creates the bundle differently and it works..

                    {
                        "name": "aurelia-resize",
                        "path": "../node_modules/aurelia-resize/dist/amd",
                        "main": "index"
                    },
                    {
                        "name": "element-resize-detector",
                        "path": "../node_modules/element-resize-detector/dist",
                        "main": "element-resize-detector"
                    },

[salminio]

I referenced by name only and it works... We break up some 3rd party into different bundles for just in time loading so that is important but the following definition in aurelia.json seems to work

                    "aurelia-resize",
                    "element-resize-detector",

[salminio]

referencing by name seems to fix both of the issues I had reported

[3cp]

The problem is the element-resize-detector dist file.

Without explicit config, element-resize-detector uses main file src/element-resize-detector.js as pointed by package.json main field (very strange, the package.json didn't have a browser field pointing to the dist/element-resize-detector.js). That's why there is no issue when using default auto tracing.

I will have a look what went wrong when tracing dist/element-resize-detector.js.

[3cp]

The fix will be in next release.