Hello Everyone,
I am using FlowRouter Extra to redirect through pages, I have worked on Flow Router before also but this time I am using webpack in between, Basically I am creating bundle scripts for different modules & adding them into one project where I have configured routing to redirect through pages.
This is the error message
If I redirect pages using window.location.href then its working fine but not with FlowRouter.go()
Please help. Any help would be greatly appreciated
Can you show your code? Route, Template, etc?
Yes,
So there are two templates, one is of create & another one is of listing.
<template name="create_group">
<div id="create_form">
</div>
</template>
<!---- JS FILE ---->
Template.create_group.onRendered(function () {
$.getScript(
"https://vayuzsocial.s3.ap-south-1.amazonaws.com/bitovn-cdn/groups/create-group/1.1/bundle.js"
);
});
<template name="group_listing">
<div id="listing"></div>
</template>
Template.group_listing.onRendered(function(){
$.getScript("https://vayuzsocial.s3.ap-south-1.amazonaws.com/bitovn-cdn/groups/listing/1.0/bundle.js");
})
Now Routing has been configured, I need to basically call FlowRouter.go("/create-group") from the listing page & that is where I am getting the error.
Also, those onRendered scripts are generated from webpack projects I am maintaining separately.
I have taken an example from here to create webpack projects.blastjs/example-apps/webpack-project at main · harryadel/blastjs · GitHub
Send the Router file too.
import { FlowRouterTitle } from "meteor/ostrio:flow-router-title";
import { Meteor } from "meteor/meteor";
import { FlowRouter } from "meteor/ostrio:flow-router-extra";
FlowRouter.route("/", {
title: "GRoups Listing",
action: async function (params, queryParams) {
await import("/imports/frontend/group/list/group_listing.js");
await import("/imports/frontend/header/header.js");
BlazeLayout.render("header",{
child_template: "group_listing"
});
},
});
FlowRouter.route("/create-group", {
title: "Create Group",
action: async function (params, queryParams) {
await import("/imports/frontend/group/create/create_group.js");
await import("/imports/frontend/header/header.js");
BlazeLayout.render("header",{
child_template: "create_group"
});
},
});
Could you please share the content of .meteor/packages and .meteor/versions?
Yes
.versions
allow-deny@1.1.1
autoupdate@1.8.0
babel-compiler@7.9.0
babel-runtime@1.5.0
base64@1.0.12
binary-heap@1.0.11
blaze@2.6.0
blaze-hot@1.1.1
blaze-html-templates@2.0.0
blaze-tools@1.1.3
boilerplate-generator@1.7.1
caching-compiler@1.2.2
caching-html-compiler@1.2.0
callback-hook@1.4.0
check@1.3.1
ddp@1.4.0
ddp-client@2.5.0
ddp-common@1.4.0
ddp-server@2.5.0
diff-sequence@1.1.1
dynamic-import@0.7.2
ecmascript@0.16.2
ecmascript-runtime@0.8.0
ecmascript-runtime-client@0.12.1
ecmascript-runtime-server@0.11.0
ejson@1.1.2
es5-shim@4.8.0
fetch@0.1.1
gadicohen:robots-txt@0.0.10
gadicohen:sitemaps@0.0.26
geojson-utils@1.0.10
hot-code-push@1.0.4
hot-module-replacement@0.5.1
html-tools@1.1.3
htmljs@1.1.1
id-map@1.1.1
inter-process-messaging@0.1.1
jquery@3.0.0
kadira:blaze-layout@2.0.1
launch-screen@1.3.0
logging@1.3.1
meteor@1.10.0
meteor-base@1.5.1
minifier-css@1.6.0
minifier-js@2.7.4
minimongo@1.8.0
mobile-experience@1.1.0
mobile-status-bar@1.1.0
modern-browsers@0.1.8
modules@0.18.0
modules-runtime@0.13.0
modules-runtime-hot@0.14.0
mongo@1.15.0
mongo-decimal@0.1.3
mongo-dev-server@1.1.0
mongo-id@1.0.8
npm-mongo@4.3.1
observe-sequence@1.0.20
ordered-dict@1.1.0
ostrio:base64@3.0.0
ostrio:flow-router-extra@3.7.5
ostrio:flow-router-title@3.2.1
promise@0.12.0
random@1.2.0
react-fast-refresh@0.2.3
reactive-dict@1.3.0
reactive-var@1.0.11
reload@1.3.1
retry@1.1.0
routepolicy@1.1.1
session@1.2.0
shell-server@0.5.0
socket-stream-client@0.5.0
spacebars@1.3.0
spacebars-compiler@1.2.1
standard-minifier-css@1.8.1
standard-minifier-js@2.8.0
templating@1.4.2
templating-compiler@1.4.1
templating-runtime@1.6.0
templating-tools@1.2.0
tracker@1.2.0
typescript@4.5.4
underscore@1.0.10
webapp@1.13.1
webapp-hashing@1.1.0
Packages
# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.
meteor-base@1.5.1 # Packages every Meteor app needs to have
mobile-experience@1.1.0 # Packages for a great mobile UX
mongo@1.15.0 # The database Meteor supports right now
blaze-html-templates # Compile .html files into Meteor Blaze views
jquery # Wrapper package for npm-installed jquery
reactive-var@1.0.11 # Reactive variable for tracker
tracker@1.2.0 # Meteor's client-side reactive programming library
standard-minifier-css@1.8.1 # CSS minifier run for production mode
standard-minifier-js@2.8.0 # JS minifier run for production mode
es5-shim@4.8.0 # ECMAScript 5 compatibility for older browsers
ecmascript@0.16.2 # Enable ECMAScript2015+ syntax in app code
typescript@4.5.4 # Enable TypeScript syntax in .ts and .tsx modules
shell-server@0.5.0 # Server-side component of the `meteor shell` command
hot-module-replacement@0.5.1 # Update code in development without reloading the page
blaze-hot # Update files using Blaze's API with HMR
kadira:blaze-layout
ostrio:flow-router-title
ostrio:flow-router-extra
gadicohen:sitemaps
gadicohen:robots-txt
session
check
ostrio:base64
No directly, but can you try remove the ostrio:flow-router-title@3.2.1 ?
I use the property name of the route settings instead of title, then you can call FlowRouter.go(name).
One strange thing for me in your code are the await import("/imports/frontend/group/list/group_listing.js");
What do you have in this JS files?
I don’t use await inside the routes, I use waitOn
See the doc here
As we are using dynamic imports, this file contains only import of the HTML
Sharing the fille
group_listing.js
import './group_listing.html'
Template.group_listing.onRendered(function(){
$.getScript("https://vayuzsocial.s3.ap-south-1.amazonaws.com/bitovn-cdn/groups/listing/1.2/bundle.js");
})
group_listing.html
<template name="group_listing">
{{> header}}
<div id="listing"></div>
</template>
Let me know if you need something else to debug
I think you don’t need use await. Use the waitOn from FlowRouter.
Now, its working but getting error as
The error is coming when switching between pages, Please help
Exception in queued task Error: Expected template or null, found: [object Object]
at Object.Spacebars.include (webpack:///./node_modules/meteor-blaze-runtime/src/spacebars/spacebars-runtime.js?:15:13)
at Blaze.View.eval [as _render] (webpack:///./src/components/group_detail.html?:3:6347)
at Blaze.View.doRender (webpack:///./node_modules/meteor-blaze-runtime/src/blaze/view.js?:351:25)
at eval (webpack:///./node_modules/meteor-blaze-runtime/src/blaze/view.js?:199:20)
at Function.Template._withTemplateInstanceFunc (webpack:///./node_modules/meteor-blaze-runtime/src/blaze/template.js?:492:14)
at eval (webpack:///./node_modules/meteor-blaze-runtime/src/blaze/view.js?:197:29)
at Object.Blaze._withCurrentView (webpack:///./node_modules/meteor-blaze-runtime/src/blaze/view.js?:536:12)
at viewAutorun (webpack:///./node_modules/meteor-blaze-runtime/src/blaze/view.js?:196:18)
at Tracker.Computation._compute (webpack:///./node_modules/meteor-standalone-tracker/tracker.js?:333:36)
at new Tracker.Computation (webpack:///./node_modules/meteor-standalone-tracker/tracker.js?:221:10)
I guess can be two things:
your template is not loading
or your template have an error of structure (HTML)
I guess template is not loading because on refresh everything works fine.
Can be order of loading.
Checked this too, if that’s an issue it should not load on reload too?