Contact Manager Tutorial issues


#1

I followed the instructions for the Contact Manager tutorial on Windows and got successive errors at the first run attempt: gulp, bootstrap, webpack modules to the point where I gave up on Windows.

I switched to MacOS, installed aurelia-cli as instructed. At the first “au run” nothing shows in the browser and I get the following error. The node & npm versions are at the end of the console log. I picked TS for the project.

au run Starting 'configureEnvironment'... Finished 'configureEnvironment' Starting 'runWebpack'... (node:58947) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead Project is running at http://localhost:8080 webpack output is served from / Content not from webpack is served from /Users/fjanon/aurelia-work/contact-manager/dist 404s will fallback to /index.html Finished 'runWebpack' Hash: e2f5354e0754cb54c2ff Version: webpack 4.8.1 Time: 6055ms Built at: 2018-05-09 22:15:27 Asset Size Chunks Chunk Names app.e2f5354e0754cb54c2ff.bundle.js 2.35 MiB app [emitted] [big] app vendor.e2f5354e0754cb54c2ff.bundle.js 489 KiB vendor [emitted] [big] vendor index.html 589 bytes [emitted] Entrypoint app [big] = app.e2f5354e0754cb54c2ff.bundle.js Entrypoint vendor [big] = vendor.e2f5354e0754cb54c2ff.bundle.js [./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js] 5.17 KiB {app} [built] [./node_modules/aurelia-loader-webpack/dist/native-modules/aurelia-loader-webpack.js] 14.4 KiB {app} [built] [./node_modules/aurelia-pal/dist/native-modules/aurelia-pal.js] 2.18 KiB {app} [built] [./node_modules/aurelia-polyfills/dist/native-modules/aurelia-polyfills.js] 24.4 KiB {app} [built] [./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js] 585 bytes {app} [built] [./node_modules/aurelia-webpack-plugin/runtime/pal-loader-entry.js] 1.56 KiB {app} [built] [./node_modules/bluebird/js/browser/bluebird.js] 175 KiB {vendor} {app} [built] [./node_modules/bluebird/js/browser/bluebird.js-exposed] 64 bytes {vendor} {app} [built] [./node_modules/process/browser.js] 5.29 KiB {vendor} {app} [built] [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {vendor} {app} [built] [aurelia-framework] ./node_modules/aurelia-framework/dist/native-modules/aurelia-framework.js 14 KiB {app} [built] [aurelia-pal-browser] ./node_modules/aurelia-pal-browser/dist/native-modules/aurelia-pal-browser.js 16.3 KiB {app} [built] [main] ./src/main.ts 1.07 KiB {app} [built] [0] multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry aurelia-bootstrapper 52 bytes {app} [built] [1] multi bluebird 28 bytes {vendor} [built] + 65 hidden modules Child html-webpack-plugin for "index.html": Asset Size Chunks Chunk Names index.html 1.36 MiB 0 Entrypoint undefined = index.html [./node_modules/html-webpack-plugin/lib/loader.js!./index.ejs] 890 bytes {0} [built] [./node_modules/lodash/lodash.js] 527 KiB {0} [built] [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {0} [built] [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {0} [built] ^C npm -version
5.8.0
$ node --version
v8.9.1


#2

Not sure if it’s the same error that you got but I also got an error trying to make a typescript project. I went ahead and made an issue on GitHub: https://github.com/aurelia/cli/issues/877.


#3

Thanks, by I tried to generate a new project with ES and got the same error as well.

Besides that Contact Manager tutorial and the CLI, which both fail to run the app on 2 platforms Win & MacOS, I can’t find any project starter, which is scary. I guess I am going back to Vue.js. I would be foolish to start my new project with bad signs like this. Too bad, it looks good on paper.


#4

While browsing the code repo, I found the Contact App example source repo

This one runs without any issues.

So something must be broken in the generation of new apps. No way of debugging the issue.


#5

We apologize for this issue. I’m having someone from the CLI team look into this. I suspect this is a breaking change in one of our dependencies, rather than the CLI itself. In the past, we’ve had a number of occasions when the Webpack team made a breaking change on a minor release, which broke us with no warning at all. We’ll work to get this addressed asap. Thanks for your patience.


#6

@fjanon sorry you’re hitting issues. When you run au run --watch and open the browser, what is displayed in the console of your browser?


#7

If using windows would recommend using the Microsoft SPA templates to generate a Visual Studio 2017 project (https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/). These use old versions of Bootstrap etc which play nicely to help getting started. There can be problems installing/updating one or more Node packages with some versions of the utilities where dependencies run awry effectively trashing a project. If using CLI, Gulp, WebPack, or anything else, it pays to read their documentation before attempting to get a non working project to behave. Hope this helps!


#8

Thanks for trying to help.

Here is the Chrome console, and the terminal as well:

webpack-dev-server.js:1 [WDS] Errors while compiling. Reload prevented.
errors @ webpack-dev-server.js:1
i.onmessage @ webpack-dev-server.js:1
n.dispatchEvent @ webpack-dev-server.js:1
(anonymous) @ webpack-dev-server.js:1
_._transportMessage @ webpack-dev-server.js:1
i.emit @ webpack-dev-server.js:1
ws.onmessage @ webpack-dev-server.js:1
11:38:08.946 webpack-dev-server.js:1 C:\aurelia-work\contact-manager\test\unit\app.spec.ts
[tsl] ERROR in C:\aurelia-work\contact-manager\test\unit\app.spec.ts(5,22)
TS2339: Property ‘message’ does not exist on type ‘App’.
errors @ webpack-dev-server.js:1
i.onmessage @ webpack-dev-server.js:1
n.dispatchEvent @ webpack-dev-server.js:1
(anonymous) @ webpack-dev-server.js:1
_._transportMessage @ webpack-dev-server.js:1
i.emit @ webpack-dev-server.js:1
ws.onmessage @ webpack-dev-server.js:1
11:41:58.966 app.5fe80deda2ead094e9c0.bundle.js:1 Failed to load resource: net::ERR_EMPTY_RESPONSE
11:41:59.207 vendor.5fe80deda2ead094e9c0.bundle.js:1 Failed to load resource: net::ERR_EMPTY_RESPONSE
11:43:59.592 :8080/favicon.ico:1 GET http://localhost:8080/favicon.ico 0 ()

===============================================
contact-manager>au run
Starting ‘configureEnvironment’…
Finished ‘configureEnvironment’
Starting ‘runWebpack’…
(node:11392) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead
Project is running at http://localhost:8080
webpack output is served from /
Content not from webpack is served from C:\aurelia-work\contact-manager\dist
404s will fallback to /index.html
Finished ‘runWebpack’
Hash: 5fe80deda2ead094e9c0
Version: webpack 4.8.1
Time: 20530ms
Built at: 2018-05-12 11:35:56
Asset Size Chunks Chunk Names
674f50d287a8c48dc19ba404d20fe713.eot 162 KiB [emitted]
912ec66d7572ff821749319396470bde.svg 434 KiB [emitted] [big]
b06871f281fee6b241d60582ae9369b9.ttf 162 KiB [emitted]
af7ae505a9eed503f8b8e6982036873e.woff2 75.4 KiB [emitted]
fee66e712a8a08eef5805a46892932ad.woff 95.7 KiB [emitted]
app.5fe80deda2ead094e9c0.bundle.js 2.95 MiB app [emitted] [big] app
vendor.5fe80deda2ead094e9c0.bundle.js 489 KiB vendor [emitted] [big] vendor
index.html 589 bytes [emitted]
Entrypoint app [big] = app.5fe80deda2ead094e9c0.bundle.js
Entrypoint vendor [big] = vendor.5fe80deda2ead094e9c0.bundle.js
[./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js] 5.17 KiB {app} [built]
[./node_modules/aurelia-bootstrapper/node_modules/aurelia-polyfills/dist/native-modules/aurelia-polyfills.js] 24.4 KiB {app} [built]
[./node_modules/aurelia-loader-webpack/dist/native-modules/aurelia-loader-webpack.js] 14.4 KiB {app} [built]
[./node_modules/aurelia-pal/dist/native-modules/aurelia-pal.js] 2.18 KiB {app} [built]
[./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js] 585 bytes {app} [built]
[./node_modules/aurelia-webpack-plugin/runtime/pal-loader-entry.js] 1.56 KiB {app} [built]
[./node_modules/bluebird/js/browser/bluebird.js] 175 KiB {vendor} {app} [built]
[./node_modules/bluebird/js/browser/bluebird.js-exposed] 65 bytes {vendor} {app} [built]
[./node_modules/process/browser.js] 5.29 KiB {vendor} {app} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {vendor} {app} [built]
[aurelia-framework] ./node_modules/aurelia-framework/dist/native-modules/aurelia-framework.js 14 KiB {app} [built]
[aurelia-pal-browser] ./node_modules/aurelia-pal-browser/dist/native-modules/aurelia-pal-browser.js 16.3 KiB {app} [built]
[main] ./src/main.ts 1.17 KiB {app} [built]
[0] multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry aurelia-bootstrapper 52 bytes {app} [built]
[1] multi bluebird 28 bytes {vendor} [built]
+ 83 hidden modules

ERROR in C:\aurelia-work\contact-manager\test\unit\app.spec.ts
[tsl] ERROR in C:\aurelia-work\contact-manager\test\unit\app.spec.ts(5,22)
TS2339: Property ‘message’ does not exist on type ‘App’.
Child html-webpack-plugin for “index.html”:
Asset Size Chunks Chunk Names
index.html 1.36 MiB 0
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./index.ejs] 890 bytes {0} [built]
[./node_modules/lodash/lodash.js] 527 KiB {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {0} [built]
i ?wdm?: wait until bundle finished: /app.5fe80deda2ead094e9c0.bundle.js
i ?wdm?: wait until bundle finished: /vendor.5fe80deda2ead094e9c0.bundle.js
× ?wdm?: ConcurrentCompilationError: You ran Webpack twice. Each instance only supports a single concurrent compilation at a time.
at Compiler.run (C:\aurelia-work\contact-manager\node_modules\webpack\lib\Compiler.js:151:37)
at rebuild (C:\aurelia-work\contact-manager\node_modules\webpack-dev-middleware\lib\context.js:81:24)
at done (C:\aurelia-work\contact-manager\node_modules\webpack-dev-middleware\lib\context.js:59:7)
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\aurelia-work\contact-manager\node_modules\tapable\lib\HookCodeFactory.js:24:12), :18:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\aurelia-work\contact-manager\node_modules\tapable\lib\Hook.js:35:21)
at emitRecords.err (C:\aurelia-work\contact-manager\node_modules\webpack\lib\Compiler.js:203:22)
at Compiler.emitRecords (C:\aurelia-work\contact-manager\node_modules\webpack\lib\Compiler.js:315:39)
at emitAssets.err (C:\aurelia-work\contact-manager\node_modules\webpack\lib\Compiler.js:197:10)
at hooks.afterEmit.callAsync.err (C:\aurelia-work\contact-manager\node_modules\webpack\lib\Compiler.js:301:14)
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\aurelia-work\contact-manager\node_modules\tapable\lib\HookCodeFactory.js:24:12), :15:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\aurelia-work\contact-manager\node_modules\tapable\lib\Hook.js:35:21)
at asyncLib.forEach.err (C:\aurelia-work\contact-manager\node_modules\webpack\lib\Compiler.js:298:27)
at done (C:\aurelia-work\contact-manager\node_modules\neo-async\async.js:2854:11)
at C:\aurelia-work\contact-manager\node_modules\neo-async\async.js:2805:7
at MemoryFileSystem.writeFile (C:\aurelia-work\contact-manager\node_modules\memory-fs\lib\MemoryFileSystem.js:328:9)
at writeOut (C:\aurelia-work\contact-manager\node_modules\webpack\lib\Compiler.js:284:29)
at asyncLib.forEach (C:\aurelia-work\contact-manager\node_modules\webpack\lib\Compiler.js:293:13)
at baseEach (C:\aurelia-work\contact-manager\node_modules\neo-async\async.js:2416:9)
at Object.each (C:\aurelia-work\contact-manager\node_modules\neo-async\async.js:2843:9)
at emitFiles (C:\aurelia-work\contact-manager\node_modules\webpack\lib\Compiler.js:257:13)
at Immediate. (C:\aurelia-work\contact-manager\node_modules\memory-fs\lib\MemoryFileSystem.js:288:4)
at runCallback (timers.js:789:20)
i ?wdm?: wait until bundle finished: /app.5fe80deda2ead094e9c0.bundle.js
i ?wdm?: wait until bundle finished: /vendor.5fe80deda2ead094e9c0.bundle.js
i ?wdm?: wait until bundle finished: /favicon.ico


#9

I know the Aurelia team are on to this issue but I thought I would also share. This weekend I have been doing the contact-manager tutorial on linux and have also having issues running the application.

I only manage to run the app when I comment out the bootstrap import in the app.html and main.js

I know this is not going to help anyone right now but perhaps the error msg may highlight something for a Aurelia CLI dev more experienced than me. I did also get many errors in the browser console which all seemed to point to the failure of webpack loading the bootstrap module.


#10

Had to put this screen-shot in separately as I am a new user:) This is one error msg


#11

@louise-r-blue Are you using bootstrap 4 in your project? In this case, the path would be bootstrap/dist/css/bootstrap.css


#12

Thanks @mp24 I am fairly certain this is the same path but will confirm in a few hours. Currently at work.


#13

@mp24 You are correct I am using "bootstrap": "^4.1.1",and the path you suggested is correct. Cheers


#14

@fjanon it appears that the unit test is preventing webpack from compiling

ERROR in C:\aurelia-work\contact-manager\test\unit\app.spec.ts
[tsl] ERROR in C:\aurelia-work\contact-manager\test\unit\app.spec.ts(5,22)
TS2339: Property ‘message’ does not exist on type ‘App’.

I suggest to either remove the spec entirely or to remove the test it fails on. I’ll check whether we need to update the tutorial