Error in sdennis:static-raw-html after adding aurelia-materialize-bridge

[madrus]

Hi, after following your tutorial on Atmosphere sdenis:aurelia, everything worked fine as expected (Hello world stuff). Then I tried to add Materialize according to this tutorial. Then when running meteor command, I get a huge error stack beginning with this:

$ meteor
[[[[[ ~\J\george\sdenis ]]]]]

=> Started proxy.
=> Started MongoDB.
=> Errors prevented startup:

   While processing files with sdenis:static-raw-html (for target web.browser):
   packages/html_compiler/plugin/html-compiler.js:63:16: children.forEach is not a function
   at process (packages/html_compiler/plugin/html-compiler.js:63:16)
   at HTMLCompiler.extractRequiredModules
   (packages/html_compiler/plugin/html-compiler.js:80:5)
   at HTMLCompiler.compileOneFile
   (packages/html_compiler/plugin/html-compiler.js:41:34)
   at packages/caching-compiler/caching-compiler.js:292:32
   at
   C:\Users\Andre\AppData\Local\.meteor\packages\sdenis_static-raw-html\1.0.7\plugin.html_compiler.os\npm\node_modules\meteor\caching-compiler\node_modules\async\lib\async.js:182:20
   at replenish
   (C:\Users\Andre\AppData\Local\.meteor\packages\sdenis_static-raw-html\1.0.7\plugin.html_compiler.os\npm\node_modules\meteor\caching-compiler\node_modules\async\lib\async.js:317:21)
   at
   C:\Users\Andre\AppData\Local\.meteor\packages\sdenis_static-raw-html\1.0.7\plugin.html_compiler.os\npm\node_modules\meteor\caching-compiler\node_modules\async\lib\async.js:324:29
   at
   C:\Users\Andre\AppData\Local\.meteor\packages\sdenis_static-raw-html\1.0.7\plugin.html_compiler.os\npm\node_modules\meteor\caching-compiler\node_modules\async\lib\async.js:44:16
   at packages/caching-compiler/caching-compiler.js:309:9

[stphdenis]

Did you remove es5-shim or ecmascript from your packages ?

[madrus]

Yes, I did. Here is my journal based on your sdenis:aurelia module and tutorial.

env: Windows 10, Meteor 1.4.1.2, Nodejs 6.9.1, no TypeScript

meteor create sdenis
cd sdenis
meteor remove blaze-html-templates
meteor remove ecmascript
meteor remove es5-shim
meteor add pbastowski:angular-babel
meteor add sdenis:aurelia
meteor npm install --save aurelia-bootstrapper-meteor
meteor list

autopublish               1.0.7  (For prototyping only) Publish the entire database to all clients
insecure                  1.0.7  (For prototyping only) Allow all database writes from the client
jquery                    1.11.10  Manipulate the DOM using CSS selectors
meteor-base               1.0.4  Packages that every Meteor app needs
mobile-experience         1.0.4  Packages for a great mobile user experience
mongo                     1.1.14  Adaptor for using MongoDB and Minimongo over DDP
pbastowski:angular-babel  1.3.7  Babel compiler and ng-annotate for Meteor 1.3
reactive-var              1.0.11  Reactive variable
sdenis:aurelia            1.0.9  This module is just to load Aurelia on Meteor 1.3 using NPM
shell-server              0.2.1  Server-side component of the `meteor shell` command.
standard-minifier-css     1.3.2  Standard css minifier used with Meteor apps by default.
standard-minifier-js      1.2.1  Standard javascript minifiers used with Meteor apps by default.
tracker                   1.1.1  Dependency tracker to allow reactive callbacks

As you can see, the modules ecmascript and es5-shim are not listed.

Then I follow the tutorial

• delete client/main.css and client/main.html-templates
• add index.html in the root with the text from tutorial
• add text from tutorial to client/main.js
• add client/app.html and client/app.js as in the tutorial

``` meteor

I get these warnings in git-bash:

Unable to resolve some modules:

  "aurelia-event-aggregator" in
/J/george/sdenis/node_modules/aurelia-bootstrapper-meteor/dist/commonjs/aurelia-bootstrapper-meteor.js (web.browser)
  "aurelia-framework" in
/J/george/sdenis/node_modules/aurelia-bootstrapper-meteor/dist/commonjs/aurelia-bootstrapper-meteor.js (web.browser)
  "aurelia-history-browser" in
/J/george/sdenis/node_modules/aurelia-bootstrapper-meteor/dist/commonjs/aurelia-bootstrapper-meteor.js (web.browser)
  "aurelia-templating-binding" in
/J/george/sdenis/node_modules/aurelia-bootstrapper-meteor/dist/commonjs/aurelia-bootstrapper-meteor.js (web.browser)
  "aurelia-templating-resources" in
/J/george/sdenis/node_modules/aurelia-bootstrapper-meteor/dist/commonjs/aurelia-bootstrapper-meteor.js (web.browser)
  "aurelia-templating-router" in
/J/george/sdenis/node_modules/aurelia-bootstrapper-meteor/dist/commonjs/aurelia-bootstrapper-meteor.js (web.browser)

If you notice problems related to these missing modules, consider running:

meteor npm install --save aurelia-event-aggregator aurelia-framework aurelia-history-browser aurelia-templating-binding aurelia-templating-resources aurelia-templating-router

In Chrome DevTools console, I see this error

modules.js?hash=cc58d64…:2542 aurelia-loader-meteor: error requiring module 'aurelia-framework' : Cannot find module 'aurelia-framework'

I stopped meteor and run the long meteor npm install command above. Then:

meteor

At this point everything works as expected

Added NOTA BENE 1 stuff and again:

meteor

At this point everything works as expected! So far so good.

---

Started with Webpack version:

npm install --save aurelia-materialize-bridge materialize-css

Added this to index.html:

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

Add this to main.js:

import 'materialize-css';
...
.plugin('aurelia-materialize-bridge', bridge => bridge.useAll());

meteor

Your app is crashing. Here's the latest log:
Started MongoDB.
Errors prevented startup:

While processing files with sdenis:static-raw-html (for target web.browser):
packages/html_compiler/plugin/html-compiler.js:63:16: children.forEach is not a function
  at process (packages/html_compiler/plugin/html-compiler.js:63:16)
  at HTMLCompiler.extractRequiredModules (packages/html_compiler/plugin/html-compiler.js:80:5)
  at HTMLCompiler.compileOneFile (packages/html_compiler/plugin/html-compiler.js:41:34)
  at packages/caching-compiler/caching-compiler.js:292:32
  at C:\Users\Andre\AppData\Local\.meteor\packages\sdenis_static-raw-html\1.0.7\plugin.html_compiler.os\npm\node_modules\meteor\caching-compiler\node_modules\async\lib\async.js:182:20
  at replenish (C:\Users\Andre\AppData\Local\.meteor\packages\sdenis_static-raw-html\1.0.7\plugin.html_compiler.os\npm\node_modules\meteor\caching-compiler\node_modules\async\lib\async.js:317:21)
  at C:\Users\Andre\AppData\Local\.meteor\packages\sdenis_static-raw-html\1.0.7\plugin.html_compiler.os\npm\node_modules\meteor\caching-compiler\node_modules\async\lib\async.js:324:29
  at C:\Users\Andre\AppData\Local\.meteor\packages\sdenis_static-raw-html\1.0.7\plugin.html_compiler.os\npm\node_modules\meteor\caching-compiler\node_modules\async\lib\async.js:44:16
  at packages/caching-compiler/caching-compiler.js:309:9

[madrus]

Sorry, I closed this issue by mistake.

[stphdenis]

Don't remove es5-shim or ecmascript from your packages, forEach() has to be polyfilled for the Array type.

[stphdenis]

Sorry, I closed this issue by mistake.

[madrus]

Oh, sorry, I have misinterpreted your advice in the tutorial (bold is mine):

If you want to use ES6 in place of ES5 just install pbastowski:angular-babel in place of the new ecmascript to be able to use new decorators.

I will add them back and try again. Keep you posted.

[madrus]

Unfortunately, no success so far. When I added back both ecmascript and es5-shim, there was a conflict with pbastowski:angular-babel:

λ meteor
[[[[[ ~\J\george\sdenis ]]]]]

=> Started proxy.
=> Started MongoDB.
=> Errors prevented startup:

   While determining active plugins:
   error: conflict: two packages included in the app (ecmascript and pbastowski:angular-babel) are both trying to handle
   *.js

   While determining active plugins:
   error: conflict: two packages included in the app (ecmascript and pbastowski:angular-babel) are both trying to handle
   *.js

=> Your application has errors. Waiting for file change.

When I removed ecmascript again, back to square zero (same errors as above). I have also seen this error bit somewhere in the middle of a huge (hundreds of lines) error stack:

While processing files with sdenis:static-raw-html (for target web.browser):
packages/jade_compiler/plugin/jade-compiler.js:67:12: Cannot read property 'replace' of undefined
at JadeCompiler.clean (packages/jade_compiler/plugin/jade-compiler.js:67:12)
at JadeCompiler.buildTemplate (packages/jade_compiler/plugin/jade-compiler.js:63:38)
at JadeCompiler.compileOneFile (packages/jade_compiler/plugin/jade-compiler.js:36:18)
at packages/caching-compiler/caching-compiler.js:292:32
at
C:\Users\Andre\AppData\Local\.meteor\packages\sdenis_static-raw-html\1.0.7\plugin.jade_compiler.os\npm\node_modules\meteor\caching-compiler\node_modules\async\lib\async.js:182:20
at replenish
(C:\Users\Andre\AppData\Local\.meteor\packages\sdenis_static-raw-html\1.0.7\plugin.jade_compiler.os\npm\node_modules\meteor\caching-compiler\node_modules\async\lib\async.js:317:21)
at
C:\Users\Andre\AppData\Local\.meteor\packages\sdenis_static-raw-html\1.0.7\plugin.jade_compiler.os\npm\node_modules\meteor\caching-compiler\node_modules\async\lib\async.js:324:29

[madrus]

Have you by any chance tried to actually reproduce my steps and got your template project working without errors with materialize-css?

[madrus]

By the way, the error I get seems to be the same no matter which of the two plugins is installed, ecmascript or pbastowski:angular-babel. It is still that forEach thing.

[stphdenis]

Please try new version of static-raw-html (replaced forEach by a for loop)

[madrus]

A bit better but we are not there yet. What I did:

meteor update

Saw this message:

sdenis:static-raw-html upgraded from 1.0.7 to 1.0.8

Then meteor:

=> Started proxy.
=> Started MongoDB.

=> Errors prevented startup:

   While processing files with sdenis:static-raw-html (for target web.browser):
   packages/index_compiler/plugin/index-handle/index-compiler.js:14:22:
   iTag is not defined
   at NgCachingHtmlCompiler.compileTagsToStaticHtml (packages/index_compiler/plugin/index-handle/index-compiler.js:14:22)
   at NgCachingHtmlCompiler.compileOneFile (packages/index_compiler/plugin/index-handle/html-compiler.js:18:19)
   at packages/caching-compiler/caching-compiler.js:292:32
   at C:\Users\Andre\AppData\Local\.meteor\packages\sdenis_static-raw-html\1.0.8\plugin.index_compiler.os\npm\node_modules\meteor\caching-compiler\node_modules\async\lib\async.js:182:20
   at replenish
   (C:\Users\Andre\AppData\Local\.meteor\packages\sdenis_static-raw-html\1.0.8\plugin.index_compiler.os\npm\node_modules\meteor\caching-compiler\node_modules\async\lib\async.js:317:21)
   at
   C:\Users\Andre\AppData\Local\.meteor\packages\sdenis_static-raw-html\1.0.8\plugin.index_compiler.os\npm\node_modules\meteor\caching-compiler\node_modules\async\lib\async.js:324:29
   at
   C:\Users\Andre\AppData\Local\.meteor\packages\sdenis_static-raw-html\1.0.8\plugin.index_compiler.os\npm\node_modules\meteor\caching-compiler\node_modules\async\lib\async.js:44:16
   at packages/caching-compiler/caching-compiler.js:309:9
   at
   C:\Users\Andre\AppData\Local\.meteor\packages\sdenis_static-raw-html\1.0.8\plugin.index_compiler.os\npm\node_modules\meteor\caching-compiler\node_modules\async\lib\async.js:182:20
   at replenish

[stphdenis]

I'm sorry to not have anough time to try it but please try new version of static-raw-html (simplified by replacing for by a while loop). Their was an initialization problem.

[madrus]

Sure thing. I can do that tonight. Be back with new information.

[madrus]

Not yet. I have updated. This time it was version 1.0.9. What was new, was I got a standard pop-up firewall question about allowing network access. But after a considerable waiting time, I got the iTag error again:

=> Started proxy.
=> Started MongoDB.

=> Errors prevented startup:

   While processing files with sdenis:static-raw-html (for target web.browser):
   packages/index_compiler/plugin/index-handle/index-compiler.js:14:22:
   iTag is not defined
   at NgCachingHtmlCompiler.compileTagsToStaticHtml
   (packages/index_compiler/plugin/index-handle/index-compiler.js:14:22)
   at NgCachingHtmlCompiler.compileOneFile
   (packages/index_compiler/plugin/index-handle/html-compiler.js:18:19)
   at packages/caching-compiler/caching-compiler.js:292:32

[stphdenis]

The problem is that the file node_modules/materialize-css/jade/about.jade is made with some includes. I'm looking how to make it compile.

[madrus]

I see what you mean. I knew they promote Jade but I did not realize that Jade is also part of their sources. I am sorry for all this trouble.

[stphdenis]

You have an other solution :

Use Webpack to execute the client side with the integration of meteor package.

You have meteor-webpack-client I made for this kind of problems, an integration of your own meteor install client side in webpack.

[madrus]

This sounds indeed like an opening. Where can I get more detailed information about this technology. I am not experienced in Webpack. It would be nice if you could give me a tip on this. Maybe you know a good article, which goes specifically on this?

What I am actually trying to achieve ideally - and this is exactly why I was so enthusiastic about your module - is to be able to use the Meteor "publish" command to be able to deploy Meteor+Aurelia+Materialize project to the Galaxy. Because if I separate the server side Meteor from the client side Aurelia+Materialize, I know I can publish my server side Meteor part. And I have no idea how to publish the separate Aurelia+Materialize client side to Galaxy.

Or maybe you have a better suggestion than Galaxy?

[stphdenis]

I am not experienced in galaxy, but can't you publish a client bootstrap with your server in galaxy and have that bootstrap redirecting on a simple web site where is the true client. If you need the client part of meteor packages in your webpack bundle, you can use meteor-webpack-client (things are explained in the module readme). To begin with Aurelia and Webpack, just use skeleton-navigation from Aurelia.

[stphdenis]

I'm not really sure my solution can work, I was forgetting the cross domain problem.

[stphdenis]

Did you try tsumina:meteor-aurelia ?

[madrus]

You are right about the cross domain issue. I hoped to have everything inside one Meteor project for the sake of easy deployment. Like Meteor backend bundled together with Aurelia frontend. Exactly the way your module works without Materialize. I feel myself like that proverbial donkey that died between two cabages because he stood exactly in the middle between them and could not decide, which one was closer to him. :)

And yes, I did try tsumina first. Unfortunately, the result was even worse than with your module.

[stphdenis]

Maybe you have a way. You could serve your webpack bundle from meteor. You use meteor just as a simple web server. You can inspire yourself with samples from the Apollo project serving requests from express in Meteor.

[madrus]

Thank you. I did not know about Apollo. Seems like a great project. Certainly worth looking into.

[madrus]

I understand that you are closing this issue unresolved, aren't you? If that is so, have you got a good understanding of the issue? What I mean is: what exactly breaks your module when Aurelia Materialize is added whereas Aurelia itself works perfectly ok? It would be nice to have some idea of what stands in the way.