config.mapUnknownRoutes & webpack problem

[bojanv55]

When using webpack with aurelia latest, cannot use this:

config.mapUnknownRoutes((instruction) => { return { route:"not-found", moduleId: PLATFORM.moduleName("./resources/elements/not-found.html") }; });

when I have only not-found.html file without not-found.js.

PS: (If I add empty not-found.js all is OK.)

Error is:

ERROR [app-router] Error: Unable to find module with ID: ./resources/elements/not-found.html
    at WebpackLoader.eval (webpack-internal:///365:194:35)
    at step (webpack-internal:///365:43:23)
    at Object.eval [as next] (webpack-internal:///365:24:53)
    at eval (webpack-internal:///365:18:71)
    at __awaiter (webpack-internal:///365:14:12)
    at WebpackLoader._import (webpack-internal:///365:159:16)
    at WebpackLoader.eval (webpack-internal:///365:259:44)
    at step (webpack-internal:///365:43:23)
    at Object.eval [as next] (webpack-internal:///365:24:53)
    at eval (webpack-internal:///365:18:71)
    at __awaiter (webpack-internal:///365:14:12)
    at WebpackLoader.loadModule (webpack-internal:///365:246:16)
    at WebpackLoader.eval (webpack-internal:///365:289:55)
From previous event:
    at __awaiter (webpack-internal:///365:14:12)
    at WebpackLoader.loadModule (webpack-internal:///365:246:16)
    at WebpackLoader.loadTemplate (webpack-internal:///365:277:21)
    at ensureRegistryEntry (webpack-internal:///3:3141:17)
    at ViewEngine.loadViewFactory (webpack-internal:///3:3209:12)
    at RelativeViewStrategy.loadViewFactory (webpack-internal:///3:579:23)
    at HtmlBehaviorResource.load (webpack-internal:///3:3981:27)
    at RouterView.process (webpack-internal:///aurelia-templating-router/router-view:127:21)
    at _loop (webpack-internal:///57:319:29)
    at NavigationInstruction._commitChanges (webpack-internal:///57:334:7)
    at CommitChangesStep.run (webpack-internal:///57:172:34)
    at next (webpack-internal:///57:141:18)
    at iterate (webpack-internal:///57:1269:12)
    at processActivatable (webpack-internal:///57:1272:10)
    at ActivateNextStep.run (webpack-internal:///57:1153:12)
    at next (webpack-internal:///57:141:18)
    at iterate (webpack-internal:///57:1182:12)
    at processDeactivatable (webpack-internal:///57:1185:10)
    at DeactivatePreviousStep.run (webpack-internal:///57:1141:12)
    at next (webpack-internal:///57:141:18)
    at Object.run (webpack-internal:///app:23:16)
    at next (webpack-internal:///57:141:18)
    at iterate (webpack-internal:///57:1269:12)
    at processActivatable (webpack-internal:///57:1272:10)
    at CanActivateNextStep.run (webpack-internal:///57:1129:12)
From previous event:
    at LoadRouteStep.run (webpack-internal:///57:1416:66)
    at next (webpack-internal:///57:141:18)
    at iterate (webpack-internal:///57:1182:12)
    at processDeactivatable (webpack-internal:///57:1185:10)
    at CanDeactivatePreviousStep.run (webpack-internal:///57:1117:12)
    at next (webpack-internal:///57:141:18)
    at eval (webpack-internal:///57:604:14)
From previous event:
    at BuildNavigationPlanStep.run (webpack-internal:///57:602:56)
    at next (webpack-internal:///57:141:18)
    at Pipeline.run (webpack-internal:///57:154:12)
    at eval (webpack-internal:///57:1745:23)
From previous event:
    at AppRouter._dequeueInstruction (webpack-internal:///57:1718:30)
    at eval (webpack-internal:///57:1709:15)
From previous event:
    at AppRouter._queueInstruction (webpack-internal:///57:1706:12)
    at eval (webpack-internal:///57:1640:22)
From previous event:
    at AppRouter.loadUrl (webpack-internal:///57:1639:51)
    at BrowserHistory._loadUrl (webpack-internal:///aurelia-history-browser:280:53)
    at BrowserHistory._checkUrl (webpack-internal:///aurelia-history-browser:273:12)

[pat841]

@luisvsilva Do you have a demo project?

Would you mind trying git://github.com/pat841/webpack-plugin.git#dist?

[bojanv55]

@pat841 this is my project where I have problems "https://github.com/bojanv55/aurelia-in-action.git"

I tried that fork (just replaced folder in node_modules) but got same error.

[pat841]

@bojanv55 I wasnt able to reproduce your issue using your project:

Change: "aurelia-webpack-plugin": "^2.0.0-rc.4", to "aurelia-webpack-plugin": "git://github.com/pat841/webpack-plugin.git#dist",

npm install npm start

Navigated to http://localhost:8080/#/markets222 without issue, was able to see the not-found.html message.

[bojanv55]

@pat841 don't know if the problem is that I use windows. Tried your advice (replaced that line in package.json) and did "npm install" and then "au run" and got this

Unhandled rejection Error: Unable to find module with ID: aurelia-templating-resources
    at WebpackLoader.eval (webpack-internal:///371:194:35)
    at step (webpack-internal:///371:43:23)
    at Object.eval [as next] (webpack-internal:///371:24:53)
    at eval (webpack-internal:///371:18:71)
    at __awaiter (webpack-internal:///371:14:12)
    at WebpackLoader._import (webpack-internal:///371:159:16)
    at WebpackLoader.eval (webpack-internal:///371:259:44)
    at step (webpack-internal:///371:43:23)
    at Object.eval [as next] (webpack-internal:///371:24:53)
    at eval (webpack-internal:///371:18:71)
From previous event:
    at __awaiter (webpack-internal:///371:14:12)
    at WebpackLoader.loadModule (webpack-internal:///371:246:16)
    at _loadPlugin (webpack-internal:///aurelia-framework:206:19)
    at eval (webpack-internal:///aurelia-framework:199:14)
From previous event:
    at loadPlugin (webpack-internal:///aurelia-framework:198:73)
    at next (webpack-internal:///aurelia-framework:460:18)
From previous event:
    at next (webpack-internal:///aurelia-framework:460:54)
    at eval (webpack-internal:///aurelia-framework:467:14)
From previous event:
    at FrameworkConfiguration.apply (webpack-internal:///aurelia-framework:452:42)
    at Aurelia.start (webpack-internal:///aurelia-framework:68:37)
    at Object.configure (webpack-internal:///main:278:11)
    at eval (webpack-internal:///373:129:27)
From previous event:
    at config (webpack-internal:///373:124:54)
    at eval (webpack-internal:///373:160:12)
From previous event:
    at bootstrap (webpack-internal:///373:159:24)
    at eval (webpack-internal:///373:146:7)
From previous event:
    at run (webpack-internal:///373:141:59)
    at Object.eval (webpack-internal:///373:166:16)
    at eval (webpack-internal:///373:167:30)
    at Object.373 (http://localhost:8080/app.ceccf607d029ab95aa0f.bundle.js:2282:1)
    at __webpack_require__ (http://localhost:8080/app.ceccf607d029ab95aa0f.bundle.js:20:30)
    at Object.257 (http://localhost:8080/app.ceccf607d029ab95aa0f.bundle.js:1339:18)
    at __webpack_require__ (http://localhost:8080/app.ceccf607d029ab95aa0f.bundle.js:20:30)
    at http://localhost:8080/app.ceccf607d029ab95aa0f.bundle.js:63:18
    at http://localhost:8080/app.ceccf607d029ab95aa0f.bundle.js:66:10

if I do "npm start"

> a-wp2@0.1.0 start D:\aurelia\aurelia-in-action
> nps

'nps' is not recognized as an internal or external command,
operable program or batch file.

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\
node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v6.11.4
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! a-wp2@0.1.0 start: `nps`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the a-wp2@0.1.0 start script 'nps'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the a-wp2 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     nps
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs a-wp2
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls a-wp2
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     D:\aurelia\aurelia-in-action\npm-debug.log

[pat841]

You need to install nps via npm install --save-dev nps

[jods4]

That might be a bug in Aurelia runtime, because it looks for a non-normalized (relative) module name. If you look closely at the error, it says it can't find ./resources/elements/not-found.html starting with a dot.

Normally the code should resolve the path to an absolute one before loading and your html is most likely inside the bundle under name resources/elements/not-found.html.

When working with Webpack, to avoid such problems I highly recommend always using absolute paths only in your app. I.e. try: resources/elements/not-found.html (assuming the file was at the root of your src).

[bojanv55]

@jods4 yes, seems this works

moduleId: PLATFORM.moduleName("resources/elements/not-found.html")

but this one does not:

moduleId: PLATFORM.moduleName("./resources/elements/not-found.html")

[pat841]

@bojanv55 I am still unable to reproduce your issue?

1) Cloned https://github.com/bojanv55/aurelia-in-action.git 2) Set "aurelia-webpack-plugin": "git://github.com/pat841/webpack-plugin.git#dist" 3) npm install (node 6.9.5) 4) node node_modules/aurelia-cli/bin/aurelia-cli.js run:

Starting 'configureEnvironment'...
Finished 'configureEnvironment'
Starting 'runWebpack'...
Project is running at http://localhost:8080
webpack output is served from /
Content not from webpack is served from /Users/pherlihy/Downloads/aurelia-in-action-master/dist
404s will fallback to /index.html
Finished 'runWebpack'
Hash: 59ffafad78c23d50aca2
Version: webpack 3.5.5
Time: 5416ms
                                Asset       Size  Chunks                    Chunk Names
   app.59ffafad78c23d50aca2.bundle.js    6.17 MB       0  [emitted]  [big]  app
vendor.59ffafad78c23d50aca2.bundle.js     515 kB       1  [emitted]  [big]  vendor
                           index.html    1.21 kB          [emitted]         
                           books.json  350 bytes          [emitted]         
   [2] ./node_modules/aurelia-pal/dist/native-modules/aurelia-pal.js 2.23 kB {0} [built]
   [3] ./node_modules/bluebird/js/browser/bluebird.js 64 bytes {0} {1} [built]
  [18] (webpack)/buildin/global.js 509 bytes {0} {1} [built]
  [33] ./node_modules/process/browser.js 5.42 kB {0} {1} [built]
  [67] ./node_modules/bluebird/js/browser/bluebird.js 179 kB {0} {1} [built]
 [257] multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry aurelia-bootstrapper 52 bytes {0} [built]
 [258] ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js 585 bytes {0} [built]
 [370] ./node_modules/aurelia-webpack-plugin/runtime/pal-loader-entry.js 1.59 kB {0} [built]
 [371] ./node_modules/aurelia-loader-webpack/dist/native-modules/aurelia-loader-webpack.js 14.8 kB {0} [built]
 [373] ./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js 5.29 kB {0} [built]
 [374] ./node_modules/aurelia-polyfills/dist/native-modules/aurelia-polyfills.js 24.8 kB {0} [built]
 [375] multi bluebird 28 bytes {1} [built]
[aurelia-framework] ./node_modules/aurelia-framework/dist/native-modules/aurelia-framework.js 14.2 kB {0} [built]
[aurelia-pal-browser] ./node_modules/aurelia-pal-browser/dist/native-modules/aurelia-pal-browser.js 14.4 kB {0} [built]
[main] ./src/main.js 4.83 kB {0} [built]
    + 427 hidden modules
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks  Chunk Names
    index.html  1.43 MB       0  
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./index.ejs 1.67 kB {0} [built]
       [1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]

5) Open http://localhost:8080/#/, no issues/errors 6) Click markets http://localhost:8080/#/markets, no issues/errors 7) Click markets2 http://localhost:8080/#/markets2, no issues/errors 8 ) Open http://localhost:8080/#/markets3, see expected "Something went wrong!" page

[bojanv55]

@pat841 could you try this on windows? Maybe something related to how win/linux treat directory paths?

[jods4]

@bojanv55 I'm going to close this as there's nothing wrong in the webpack plugin.

The fact that at runtime the router doesn't resolve the relative module name in mapUnknownRoutes might be a bug, which should be reported in aurelia-router.