Routing From "imports/ui/layouts and imports/ui/pages" Not Displaying To main.js Using Flow-Router with BlazeLayouts

[marhalish]

Hey everyone!

I have looked through this code for at least 10+ hours attempting to discover why the routing is not working for my new meteor application that I'm building for the Steem blockchain and still no result. I've tried multiple file structures and followed multiple tutorials, but still it doesn't work.

I am using VeliovGroup/flow-router with BlazeLayouts on Meteor 1.8.2

I want to launch this project ASAP, but I can't move on until this issue is resolved. Any help at all is eternally appreciated.

This is an open-source project called Slangtionary located on GitHub here: https://github.com/marhalish/slangtionary

If you need anymore information I'll gladly provide it.

Errors

There are no errors in console log. When I start the meteor server the expected templates are not displaying, this is the issue. I have tried using this.render() but I still cannot get it working.

Versions

Browser

Brave Browser - V. 0.19.139 Firefox - V. 57.0.4. (64-bit)

Operating System

MacOs High Sierra V. 10.13.12

All Meteor Package Versions:

allow-deny@1.1.0 autopublish@1.0.7 autoupdate@1.3.12 babel-compiler@6.24.7 babel-runtime@1.1.1 base64@1.0.10 binary-heap@1.0.10 blaze@2.3.2 blaze-html-templates@1.1.2 blaze-tools@1.0.10 boilerplate-generator@1.3.1 caching-compiler@1.1.9 caching-html-compiler@1.1.2 callback-hook@1.0.10 check@1.2.5 ddp@1.4.0 ddp-client@2.2.0 ddp-common@1.3.0 ddp-server@2.1.1 deps@1.0.12 diff-sequence@1.0.7 dynamic-import@0.2.1 ecmascript@0.9.0 ecmascript-runtime@0.5.0 ecmascript-runtime-client@0.5.0 ecmascript-runtime-server@0.5.0 ejson@1.1.0 es5-shim@4.6.15 geojson-utils@1.0.10 hot-code-push@1.0.4 html-tools@1.0.11 htmljs@1.0.11 http@1.3.0 id-map@1.0.9 insecure@1.0.7 jquery@1.11.10 kadira:blaze-layout@2.3.0 -> Original KadiraHQ/Blaze-layout launch-screen@1.1.1 livedata@1.0.18 logging@1.1.19 meteor@1.8.2 meteor-base@1.2.0 minifier-css@1.2.16 minifier-js@2.2.2 minimongo@1.4.3 mobile-experience@1.0.5 mobile-status-bar@1.0.14 modules@0.11.0 modules-runtime@0.9.1 mongo@1.3.1 mongo-dev-server@1.1.0 mongo-id@1.0.6 npm-mongo@2.2.33 observe-sequence@1.0.16 ordered-dict@1.0.9 ostrio:flow-router-extra@3.4.4 promise@0.10.0 random@1.0.10 reactive-dict@1.2.0 reactive-var@1.0.11 reload@1.1.11 retry@1.0.9 routepolicy@1.0.12 shell-server@0.3.1 spacebars@1.0.15 spacebars-compiler@1.1.3 standard-minifier-css@1.3.5 standard-minifier-js@2.2.3 templating@1.3.2 templating-compiler@1.3.3 templating-runtime@1.3.2 templating-tools@1.1.2 tracker@1.1.3 ui@1.0.13 underscore@1.0.10 url@1.1.0 webapp@1.4.0 webapp-hashing@1.0.9

Here is a screenshot of my application code where I believe the problem may be. Is there something wrong with the setup currently that is causing the templates "appHeaderLayout", "appFooterLayout", and the "content" section to dynamically display depending on the given route in the routes.js file?

[dr-dimitru]

Hello @marhalish ,

1. Are you using original blaze-layout package, or some of it's up-to-date forks?
2. Have you tried build-in this.render() method?

[dr-dimitru]

3. Are you getting what? Error? Exception? White screen?

[dr-dimitru]

@marhalish Filling an issue please follow our issue template:

• Browser name and its version (Chrome, Firefox, Safari, etc.)?
• Platform name and its version (Win, Mac, Linux)?
• If you're getting an error or exception, please provide its full stack-trace as plain-text or screenshot

[marhalish]

I updated my question @dr-dimitru. Is there any other information you need?

[dr-dimitru]

Hello @marhalish ,

Thank you for the update on this. Yes, please, answer next questions:

1. Does using BlazeLayout and this.render() ending up with the same result?
2. Have you checked what routes are properly registered and getting triggered? Can be checked by simply placing console.log inside .render() callback
3. Could you post a screenshot of DOM tree opened in a DevTools? At least something should be populated into body

[marhalish]

I updated my question again with a screenshot. It seems the 'mainLayout' from the mainLayout.html template is displaying, but the appHeader, content, and appFooter does not dynamically display the given templates based on the templates passed in the routes.js folder. Why is this?

[dr-dimitru]

1. This is question for BlazeLayout package. Since it's outdated and not maintained, there is no guarantee it will work;
2. I don't see where those 3 templates are imported
3. What is happening when you switch to build-in this.render() method?
4. I suggest you to walk through our 100% working tutorial about Templating with Regions

[dr-dimitru]

@marhalish is this solved? If so, what is your solution?

[marhalish]

Sorry, that was accident. I am using the templating tutorial now.

[dr-dimitru]

@marhalish please update this thread when you will find a solution

[marhalish]

I followed the tutorial, but what goes into the main.html and main.js that are created by default? The tutorial creates an imports folder with an index.js, index.html, etc., but what is the new file structure?

[dr-dimitru]

what goes into the main.html and main.js that are created by default?

Imports, for each side

[dr-dimitru]

See project's structure at this demo project

[marhalish]

I updated the entire app to the same file structure as the demo project. Now whenever I load up my application located here: (https://github.com/marhalish/slangtionary) on the localhost:3000 server the only thing showing on screen is the imported files from "app/client/core.js". If I go to "http://localhost:3000/home" or "http://localhost:3000/about" nothing is rendered but the same imported files from "app/client/core.js".

[dr-dimitru]

@marhalish it's because we're using per-route dynamic loading, see example here

[marhalish]

I updated my routes.js and other files, but the content is not importing based on the routes. I included some more screenshots. Do you have any ideas?

[dr-dimitru]

@marhalish errors? exceptions?

[marhalish]

@dr-dimitru no errors are showing in the server logs

[marhalish]

Is there anything else I can look for?

[dr-dimitru]

FlowRouter is (mostly) Client package. Check browser's console for errors

[coagmano]

Just for fun I took a look at your repo to see if I could find where the problem was. I've listed the things I found in order below:

1. Console error There are multiple templates named 'notFound'.
   • Cause: Template notFound defined in about.html, contact.html and notFound.html
   • Fix: Only have one notFound template. Each template should be defined only once, preferably in it's own file.
2. Multiple body definitions (one in each template), causing each template to always be rendered to the page.
   • Cause: Multiple body definitions
   • Fix: Delete all body sections
   • Don't bother with a body definition since FR will manage your layout
3. _mainLayout.htmlcontains {{ yield }} not {{> yield }} as per docs
   • Fix: replace {{ yield }} with {{> yield }}
4. After the above, new error in console: ".render()- Requiresblazeandtemplating, orblaze-html-templates` packages to be installed"
   • Cause: This appears to be caused by #43, fix is already in pipeline for next release
   • Fix: Until next FR release, downgrade to 3.4.3 (I did this by adding the version number to the package name in .meteor/packages, ostrio:flow-router-extra@3.4.3)
5. Everything seems to work now

I then added routes for about and contact which also worked fine

Here's the fork where I have done the above. https://github.com/coagmano/slangtionary/

[dr-dimitru]

@coagmano thanks a lot! Issue with template dependency can be fixed by placing it above ostrio:flow-router-extra in .meteor/packages file, as described here.

[marhalish]

Thank you so much @dr-dimitru and @coagmano! #43 is what plagued the routing this whole time. I truly appreciate all the help, I owe y'all one.