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
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.
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.
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.
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!
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
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.
@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
