Paths are still not resolved properly

[WillsonHaw]

This is on aurelia-webpack-plugin@1.0.0-beta.2.0.3

I've updated all our project's and their dependencies to have aurelia.build.resources which is basically the keys from the dependencies. Most of the projects seem to work fine, except it's not resolving some files properly, most notably the aurelia-templating-resources. From the console.log I get this:

[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/hub.app.contenttools/src/binding-mode-behaviors", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/hub.app.contenttools/src/compose", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/hub.app.contenttools/src/debounce-binding-behavior", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/hub.app.contenttools/src/focus", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/hub.app.contenttools/src/hide", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/hub.app.contenttools/src/if", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/hub.app.contenttools/src/repeat", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/hub.app.contenttools/src/replaceable", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/hub.app.contenttools/src/sanitize-html", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/hub.app.contenttools/src/show", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/hub.app.contenttools/src/signal-binding-behavior", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/hub.app.contenttools/src/throttle-binding-behavior", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/hub.app.contenttools/src/update-trigger-binding-behavior", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/hub.app.contenttools/src/with", which does not exist.

This is from running webpack from our main project folder. The dependencies are as follows: Hub -> Hub.App.ContentTools -> Hub.Bootstrapper -> Hub.Plugin.Auth -> Hub.Core -> aurelia-templating-resources (and other aurelia packages. Setting moduleRootoverride didn't help at all. Any ideas?

[charlespockert]

@MrHayato have you specified the module overrides in your package.json?

  "aurelia": {
    "build": {
      "moduleRootOverride": {
       "aurelia-templating-resources": "dist/commonjs"
     }
    }
  }

This makes the above problem go away, but I still get this:

Uncaught (in promise) Error: Cannot find module './aurelia-templating-resources/compose'.
    at eval (webpack:///./src_^\.\/.*$?:50:41)
    at webpackContextResolve (webpack:///./src_^\.\/.*$?:50:89)
    at webpackContext (webpack:///./src_^\.\/.*$?:47:29)
    at eval (webpack:///./~/aurelia-bootstrapper-webpack/~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js?:104:50)
    at http://localhost:3000/bundle.js:136:24
    at Function.requireEnsure [as e] (http://localhost:3000/bundle.js:597:29)
    at Function.ensure [as e] (http://localhost:3000/bundle.js:134:33)
    at exports.WebpackLoader.WebpackLoader._import (webpack:///./~/aurelia-bootstrapper-webpack/~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js?:103:31)
    at WebpackLoader._import (webpack:///./~/aurelia-bootstrapper-webpack/~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js?:98:12)
    at exports.WebpackLoader.WebpackLoader.loadModule (webpack:///./~/aurelia-bootstrapper-webpack/~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js?:154:16)

When attempting to load the app - I'm not sure why, I can see those files bundled.

It seems webpack looks to load chunk 128 at runtime but for some reason it never gets loaded - this appears as

[128] ./src ^\.\/.*$ 1.8 kB {1} [optional] [built]

In my build output - not sure if that's related

-- EDIT:

Ah it looks like they go into the map with the full path:

Meaning Aurelia tries to load aurelia-templating-resources/with but webpack has aurelia-templating-resources/dist/es2015/with/ etc

[Jenselme]

Same issue here.

[WillsonHaw]

With or without the moduleRootOverride, it gave me the same path unfortunately.

[heruan]

Same to me, in a project as simple as src/main.js:

import {bootstrap} from "aurelia-bootstrapper-webpack";
import {Aurelia} from "aurelia-framework";

bootstrap(aurelia => {
    aurelia.use.standardConfiguration().developmentLogging();
    aurelia.start().then(aurelia => aurelia.setRoot("app", document.body));
});

webpack.config.js:

var AureliaWebpackPlugin = require("aurelia-webpack-plugin");

module.exports = {
    entry: './src/main.js',
    output: {
        path: 'dist',
        filename: 'bundle.js'
    },
    plugins: [ new AureliaWebpackPlugin() ]
}

I get all of these:

<aurelia-bootstrapper-webpack> [package.json] required "./aurelia-framework" from "aurelia-framework".
<aurelia-bootstrapper-webpack> [package.json] required "./aurelia-logging-console" from "aurelia-logging-console".
<aurelia-bootstrapper-webpack> [package.json] required "./aurelia-templating-binding" from "aurelia-templating-binding".
<aurelia-bootstrapper-webpack> [package.json] required "./aurelia-templating-resources" from "aurelia-templating-resources".
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/compose", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/if", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/with", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/repeat", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/show", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/hide", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/replaceable", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/sanitize-html", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/focus", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/binding-mode-behaviors", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/throttle-binding-behavior", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/debounce-binding-behavior", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/signal-binding-behavior", which does not exist.
[<aurelia-templating-resources>] wants to require "aurelia-templating-resources/aurelia-bootstrapper-webpack/dist/commonjs/update-trigger-binding-behavior", which does not exist.
<aurelia-bootstrapper-webpack> [package.json] required "./aurelia-templating-router" from "aurelia-templating-router".
[<aurelia-templating-router>] wants to require "aurelia-templating-router/aurelia-bootstrapper-webpack/dist/commonjs/router-view", which does not exist.
[<aurelia-templating-router>] wants to require "aurelia-templating-router/aurelia-bootstrapper-webpack/dist/commonjs/route-href", which does not exist.
<aurelia-bootstrapper-webpack> [package.json] required "./aurelia-history-browser" from "aurelia-history-browser".
<aurelia-bootstrapper-webpack> [package.json] required "./aurelia-event-aggregator" from "aurelia-event-aggregator".

[EisenbergEffect]

We are drastically re-working the webpack skeleton and plugin right now. It's a work in progress and should be resolved in the next couple of weeks. It's a major overhaul.

[heruan]

Thank you Rob, it's good to know! In our main Aurelia project, with many separate modules, I've personally found JSPM totally unfeasible and difficult to maintain and I'm looking forward to let NPM do all the work with a valid Webpack alternative for Aurelia.

[EisenbergEffect]

We understand, trust me. We've got an announcement later today about our new CLI. I'm not sure if it will be a good fit for you or not. You could give it a try and help us improve it. The Webpack work is coming along. There's just still more we need to do to get that where we want it. Both the CLI and Webpack are going to be our recommended solutions going forward. We're going to try to continue to support JSPM as well, but won't expose our community to that as a preferred approach.

[Vheissu]

The latest release should address all of these issues thanks to @niieani rewriting the plugin to resolve dependencies way better.

[heruan]

Thank you! I tested the latest and now there's no need of moduleRootOverride, but for some packages there's still the need to declare some additional dependencies. For example, for aurelia-validation one may need this on package.json:

"aurelia": {
  "build": {
    "resources": [
      "aurelia-validation/validate-binding-behavior",
      "aurelia-validation/validation-errors-custom-attribute",
      "aurelia-validation/validation-renderer-custom-attribute"
    ]
  }
}

[niieani]

Yes, some of the external packages don't have their internal build resources declared. @EisenbergEffect Not sure who is the maintainer of aurelia-validation, can they add the required build resources to the package itself so this is not necessary for the user?

[heruan]

Thank you @niieani! Maybe unrelated, but if I npm link ../my-other-plugin then strange things happen in Aurelia PAL, like this:

aurelia-pal.js:36 Uncaught (in promise) Error: Error invoking SVGAnalyzer. Check the inner error for details.
------------------------------------------------
Inner Error:
Message: _aureliaPal.DOM.createElement is not a function
Inner Error Stack:
TypeError: _aureliaPal.DOM.createElement is not a function
    at createElement (http://localhost:8080/bundles/app.js:28396:30)
    at new SVGAnalyzer (http://localhost:8080/bundles/app.js:28405:10)
    at Object.invoke (http://localhost:8080/bundles/app.js:438:13)
    at InvocationHandlerWrapper.invoke (http://localhost:8080/bundles/app.js:415:167)
    at InvocationHandlerWrapper.invoke (http://localhost:8080/bundles/app.js:32669:49)
    at Container.invoke (http://localhost:8080/bundles/app.js:679:24)
    at StrategyResolver.get (http://localhost:8080/bundles/app.js:217:36)
    at Container.get (http://localhost:8080/bundles/app.js:610:40)
    at Object.invoke (http://localhost:8080/bundles/app.js:468:104)
    at InvocationHandlerWrapper.invoke (http://localhost:8080/bundles/app.js:415:167)
End Inner Error Stack
------------------------------------------------

    at createElement (http://localhost:8080/bundles/app.js:28396:30)
    at new SVGAnalyzer (http://localhost:8080/bundles/app.js:28405:10)
    at Object.invoke (http://localhost:8080/bundles/app.js:438:13)
    at InvocationHandlerWrapper.invoke (http://localhost:8080/bundles/app.js:415:167)
    at InvocationHandlerWrapper.invoke (http://localhost:8080/bundles/app.js:32669:49)
    at Container.invoke (http://localhost:8080/bundles/app.js:679:24)
    at StrategyResolver.get (http://localhost:8080/bundles/app.js:217:36)
    at Container.get (http://localhost:8080/bundles/app.js:610:40)
    at Object.invoke (http://localhost:8080/bundles/app.js:468:104)
    at InvocationHandlerWrapper.invoke (http://localhost:8080/bundles/app.js:415:167)
End Inner Error Stack
------------------------------------------------

    at new AggregateError (http://localhost:8080/bundles/app.js:1097:12)
    at Container.invoke (http://localhost:8080/bundles/app.js:681:14)
    at StrategyResolver.get (http://localhost:8080/bundles/app.js:217:36)
    at Container.get (http://localhost:8080/bundles/app.js:610:40)
    at Object.invoke (http://localhost:8080/bundles/app.js:468:104)
    at InvocationHandlerWrapper.invoke (http://localhost:8080/bundles/app.js:415:167)
    at InvocationHandlerWrapper.invoke (http://localhost:8080/bundles/app.js:32669:49)
    at Container.invoke (http://localhost:8080/bundles/app.js:679:24)
    at StrategyResolver.get (http://localhost:8080/bundles/app.js:217:36)
    at Container.get (http://localhost:8080/bundles/app.js:610:40)

[charlespockert]

That sounds like you have forks, the pal probably exists twice and one is uninitialised

Check your dependencies for duplicate pal versions On 24 Jun 2016 1:55 p.m., "Giovanni Lovato" notifications@github.com wrote:

Thank you @niieani https://github.com/niieani! Maybe unrelated, but if I npm link ../my-other-plugin then strange things happen in Aurelia PAL, like this:

aurelia-pal.js:36 Uncaught (in promise) Error: Error invoking SVGAnalyzer. Check the inner error for details.

Inner Error: Message: _aureliaPal.DOM.createElement is not a function Inner Error Stack: TypeError: _aureliaPal.DOM.createElement is not a function at createElement (http://localhost:8080/bundles/app.js:28396:30) at new SVGAnalyzer (http://localhost:8080/bundles/app.js:28405:10) at Object.invoke (http://localhost:8080/bundles/app.js:438:13) at InvocationHandlerWrapper.invoke (http://localhost:8080/bundles/app.js:415:167) at InvocationHandlerWrapper.invoke (http://localhost:8080/bundles/app.js:32669:49) at Container.invoke (http://localhost:8080/bundles/app.js:679:24) at StrategyResolver.get (http://localhost:8080/bundles/app.js:217:36) at Container.get (http://localhost:8080/bundles/app.js:610:40) at Object.invoke (http://localhost:8080/bundles/app.js:468:104) at InvocationHandlerWrapper.invoke (http://localhost:8080/bundles/app.js:415:167)

End Inner Error Stack

at createElement (http://localhost:8080/bundles/app.js:28396:30)
at new SVGAnalyzer (http://localhost:8080/bundles/app.js:28405:10)
at Object.invoke (http://localhost:8080/bundles/app.js:438:13)
at InvocationHandlerWrapper.invoke (http://localhost:8080/bundles/app.js:415:167)
at InvocationHandlerWrapper.invoke (http://localhost:8080/bundles/app.js:32669:49)
at Container.invoke (http://localhost:8080/bundles/app.js:679:24)
at StrategyResolver.get (http://localhost:8080/bundles/app.js:217:36)
at Container.get (http://localhost:8080/bundles/app.js:610:40)
at Object.invoke (http://localhost:8080/bundles/app.js:468:104)
at InvocationHandlerWrapper.invoke (http://localhost:8080/bundles/app.js:415:167)

End Inner Error Stack

at new AggregateError (http://localhost:8080/bundles/app.js:1097:12)
at Container.invoke (http://localhost:8080/bundles/app.js:681:14)
at StrategyResolver.get (http://localhost:8080/bundles/app.js:217:36)
at Container.get (http://localhost:8080/bundles/app.js:610:40)
at Object.invoke (http://localhost:8080/bundles/app.js:468:104)
at InvocationHandlerWrapper.invoke (http://localhost:8080/bundles/app.js:415:167)
at InvocationHandlerWrapper.invoke (http://localhost:8080/bundles/app.js:32669:49)
at Container.invoke (http://localhost:8080/bundles/app.js:679:24)
at StrategyResolver.get (http://localhost:8080/bundles/app.js:217:36)
at Container.get (http://localhost:8080/bundles/app.js:610:40)

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/aurelia/webpack-plugin/issues/39#issuecomment-228338160, or mute the thread https://github.com/notifications/unsubscribe/AIpzbs_Z42SJGirjRAIDWsVaAfded2Aaks5qO9POgaJpZM4I4yHG .

[heruan]

Thank you @charlespockert but I have no other versions of aurelia-pal:

$ npm ls aurelia-pal
webpack-application@0.1.0
└─┬ aurelia-bootstrapper-webpack@1.0.0-rc.1.0.0
  └── aurelia-pal@1.0.0-rc.1.0.0

[niieani]

I believe you do have a fork installed, just under your linked plugin's dependencies. That's why when you link it stops working. On Fri, 24 Jun 2016 at 14:59, Giovanni Lovato notifications@github.com wrote:

Thank you @charlespockert https://github.com/charlespockert but I have no other versions of aurelia-pal:

$ npm ls aurelia-pal webpack-application@0.1.0 └─┬ aurelia-bootstrapper-webpack@1.0.0-rc.1.0.0 └── aurelia-pal@1.0.0-rc.1.0.0

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/aurelia/webpack-plugin/issues/39#issuecomment-228338914, or mute the thread https://github.com/notifications/unsubscribe/AAiZDWIlGttp45EgliztPCX5-2V3lSO6ks5qO9SzgaJpZM4I4yHG .

[EisenbergEffect]

@jdanyow See https://github.com/aurelia/webpack-plugin/issues/39#issuecomment-228270696 Can you add the view resources to the package.json for our webpack skeletons?

[niieani]

@heruan If you have any aurelia-dependencies in your plugin's dependencies, try specifying them as "peerDependencies" instead. That way they won't be installed.

[heruan]

I have specified aurelia-* dependencies as peerDependencies but I still get the error. If I install the package instead of linking, it works. What could it be?

[niieani]

@heruan we've had https://github.com/aurelia/webpack-plugin/issues/44 done recently to fix linked packages. Are you running the latest release of webpack-plugin?

[heruan]

I'm on 1.0.0-beta.4.0.1 and I still get the error. This is my scenario:

• foo-app in /apps/foo-app
• bar-app in /apps/bar-app

/apps/bar-app$ npm install ../foo-app
/apps/bar-app$ npm start

it works.

/apps/bar-app$ npm link ../foo-app

here the webpack-dev-server detects something and reload:

webpack: bundle is now INVALID.
Hash: dbef8e4a6cf0a18be86e
Version: webpack 2.1.0-beta.17
Time: 3067ms
     Asset     Size  Chunks             Chunk Names
    app.js  1.46 MB       0  [emitted]  app
app.js.map   1.8 MB       0  [emitted]  app
chunk    {0} app.js, app.js.map (app) 1.43 MB [entry] [rendered]
   [22] ./~/foo-app/dist/dao/tag-dao.js 1.63 kB {0} [built]
   [74] ./~/foo-app/dist/dashboard.js 2.3 kB {0} [built]
   [75] ./~/foo-app/dist/tags/card-view-model.js 2.51 kB {0} [built]
   [76] ./~/foo-app/dist/tags/list-view-model.js 3.03 kB {0} [built]
   [85] ./src/index.ts 1.7 kB {0} [built]
  [...] all other files from ./~/foo-app
  [254] ./src/app.ts 1.35 kB {0} [optional] [built]
  [255] ./src/resources/index.ts 183 bytes {0} [optional] [built]
  [256] ./src/resources/parse-int-value-converter.ts 308 bytes {0} [optional] [built]
     + 245 hidden modules
webpack: bundle is now VALID.

still works with linked foo-app, but if stopped then running npm start again I get the Error invoking SVGAnalyzer and I see it's including file from foo-app dependencies (either if declared as peer or not):

  [114] ../foo-app/~/aurelia-dialog/dist/commonjs/aurelia-dialog.js 2.34 kB {0} [built]
  [115] ../foo-app/~/aurelia-dialog/dist/commonjs/dialog-options.js 224 bytes {0} [built]
  [116] ../foo-app/~/aurelia-dialog/dist/commonjs/lifecycle.js 493 bytes {0} [built]
  [117] ../foo-app/~/aurelia-dialog/dist/commonjs/renderer.js 640 bytes {0} [built]

Do I need to pass options to the plugin? I just load it as plugins: [ new AureliaWebpackPlugin() ].

[ghost]

@EisenbergEffect

Both the CLI and Webpack are going to be our recommended solutions going forward. We're going to try to continue to support JSPM as well, but won't expose our community to that as a preferred approach.

Is this statement still true? I'm just asking as we got recommendation into exactly the opposite direction. So we just started using JSPM for our project setup.

[EisenbergEffect]

@marco-assentis I personally favor either our CLI or WebPack. We support JSPM as well though. There are various tradeoffs between the different loaders.