Meteor Iron Router - no route definitions after Meteor v2.6 upgrade? - meteor

I've just upgraded my project to Meteor v2.6 along with all packages. Everything runs smoothly on local so I pushed to Galaxy where I'm promptly met by this error when trying to load my app:
Nothing in the codebase itself was changed, needless to say the routes have been defined and have been working fine before.
Here's an excerpt of the code:
import "/imports/ui/layouts/dashboardLayout/dashboardLayout";
import "/imports/ui/layouts/landingLayout/landingLayout";
import "/imports/ui/pages";
import "/imports/ui/pages/landing/landingHeader/landingHeader";
if (Meteor.isClient && Meteor.isProduction) {
Router.plugin("reywood:iron-router-ga");
}
Router.configure({
trackPageView: true,
});
Router.onAfterAction(() => {
window.scrollTo(0, 0);
});
Router.route("/", {
name: "landing",
layoutTemplate: "landingLayout",
action: function () {
this.render("landingHeader", { to: "header" });
this.render("landingContent", {
to: "content",
data: { signUp: !!this.params.query.signUp },
});
},
});
Below the diff in the versions file>
Given it runs fine locally but has issues in Production, I wonder whether the problem is this bit of code here:
if (Meteor.isClient && Meteor.isProduction) {
Router.plugin("reywood:iron-router-ga");
}
I don't know why it's there (it's not my code originally) but I've noticed that the reywood:iron-router-ga version seems to have been downgraded for some reason during the upgrade:
When I try to force an update to reywood:iron-router-ga in the vain hope that by getting it back to v2.0.1 it will start working again, I get the message that "The specified packages are at their latest compatible versions".
Has anyone encountered this before/any idea what's going on? I'm not a fan of forcing different behaviour in Production from Dev as that obviously makes testing difficult/pointless - unless there's a good reason for it. Can anyone shed any light?

Related

Nextjs export gives Cannot find module for page

Hi I just started playing around with nextjs to see if it fits my use case. I wanted to export the site with some dynamic routes.
My pages folder structure is like below
page
locales
[locale]
[slug].js
When I run next develop I can access the page at http://localhost:3000/locales/de-DE/summer-dress-f.
So now im trying to export the page with next.config.js like
module.exports = {
exportPathMap: function() {
return {
"/locales/de-DE/summer-dress-f": {
page: "/locales",
query: { locale: "de-DE", slug: "summer-dress-f" }
}
};
}
};
next build runs fine but when I run next export I get the error
Error: Cannot find module for page: /locales
at pageNotFoundError (/Users/bmathew/Desktop/workspace/next-demo/node_modules/next-server/dist/server/require.js:13:17)
Any ideas what am I missing here?
Running npm install seems to fix this.
Finally figured it out. The pathmap should look like
module.exports = {
exportPathMap: function() {
return {
"/locales/de-DE/summer-dress-f": {
page: "/locales/[locale]/[slug]",
query: { locale: "de-DE", slug: "summer-dress-f" }
}
};
}
};
Page component naming should be unique.
So I had about.tsx with name: AboutPage and faqs.tsx with name: AboutPage as well, amending faqs.tsx to be unique fixed it :)
I just hit a similar error, and I had simply forgotten to run next build before next export!
In my case, I solved a similar issue by deleting 'node_modules' by running rm -rf node_modules and installed the packages again.
In my case, I was using getStaticProps and getStaticPaths. fallback prop was set to false. Changing it to true fixed the issue.
I had this vague error message when I had capitals in the file name WIP-sidebar.js.
In my case, running:
npm i --save --legacy-peer-deps
fixed the issue.
Sometimes the problem happens when we are building and we have another terminal running yarn dev

Adding Facebook login to Angular2-Meteor app

I am attempting to add Facebook authentication into an Angular2-Meteor app that started off as the Socially app from the tutorial and is slowly being modified into something less generic. There doesn't seem to be much posted on this particular use case however.
Note: I've asked in the Meteor forums and Gitter without success already.
Here are the steps I've taken:
Added Service Configuration package using
meteor add service-configuration
Created a file at server/services.ts containing (with my actual keys):
ServiceConfiguration.configurations.upsert({
"service": "facebook"
}, {
$set: {
"settings": {
"appId": “appid”,
“secret": "secret",
"loginStyle": "popup"
}
}
});
But on compile, I get an error saying
cannot find name 'ServiceConfiguration'
Which makes me think the package didn't install properly, but uninstalling/reinstalling it has not resolved the issue and it is showing in my .meteor directory.
Client side I'm calling this method with a click event on a button in a component that does have Meteor imported:
facebook() {
Meteor.loginWithFacebook((err) => {
if (err) {
//Handle error
} else {
//Handle sign in (I reroute)
this.router.navigate(['/home']);
}
})
Which throws the console error
meteor_1.Meteor.loginWithFacebook is not a function
But I suspect this is secondary to the fact that ServicesConfiguration isn't registering.
Git repo of the project is here: https://github.com/nanomoffet/ng2-starter with the referenced files being server/services.ts and client/app.ts
Currently it is not possible to use the ServiceConfiguration in TypeScript. What I did in my application was that I created a Javascript file in which I did make the ServiceConfiguration calls.
meteor add service-configuration
Create the file ./server/service-config.js
Meteor.startup(() => {
ServiceConfiguration.configurations.remove({
service: "facebook"
});
ServiceConfiguration.configurations.insert({
service: "facebook",
appId: '<APP_ID_YOU_GET_FROM FROM_FACEBOOK>',
loginStyle: "popup",
secret: '<SECRET_YOU_GET_FROM_FACEBOOK>'
});
});
I only tested it with Google and works fine for me.

Meteor.js: Using server.call when testing with Chimp

I'm having an issue triggering method calls while writing feature tests. I'm not actually given an error in the chimp terminal log, but the server.call line is where the failure is highlighted. I believe this might be related to the folder structure of the app (which I've loosely based on Letterpress) or the order in which the call is defined and then triggered. When I move the method call out to my main.js file (in the root folder of the app), it works without a problem.
hooks.js path: /app/tests/cucumber/features/support/hooks.js
(function(){
module.exports = function() {
this.Before(function() {
console.log("server calling");
server.call("fixtures/resetUsers"); //test stops here
});
};
})();
fixtures.js /app/packages/fixtures/fixtures.js
(function(){
'use strict';
Meteor.methods({
"fixtures/resetUsers": function() {
Meteor.users.remove({});
}
});
})();
package.js /app/packages/fixtures/packages.js
Package.describe({
name: 'forum:fixtures',
version: '0.0.1',
summary: '',
debugOnly: true
});
Package.onUse(function(api) {
api.versionsFrom('1.2.1');
api.use('ecmascript');
api.addFiles('fixtures.js', 'server');
});
Note: I originally didn't have the fixtures folder wrapped in the packages folder (it still didn't work then) but came across this post by #Xolv.io, the developers of Chimp.js who advised to do so.
with the new chimp, you can just use:
server.execute(function() {
// code you put here will run on the server
});
Check this repository for examples:
https://github.com/xolvio/automated-testing-best-practices/
In your sample repo, if you define a meteor method, 'something', you can call as server.call('something').
If you have a standard method definition (not even a meteor method), say something2=function(){}, with xolvio:backdoor, you can server.execute('something2'). ( calling chimp with --ddp switch)

MeteorJS with spiderable - or another solution for making App crawlable?

Current we are using a meteor App with the iron:router package and also the spiderable and phantomjs for making this app crawlable by google.
In our special case we have some Routes where we call Meteor methods which are running async before we render the right template into our layout.
When testing spiderable on these routes the template will never get rendered and instead our "loading" template will be the rendered template.
We are testing this with /?_escaped_fragment_=
Now we are looking for a solution to tell spiderable that the page is ready or is not ready so we can control when the page has to be rendered.
Router.route('/awesome-route', function(){
// This is how it could look to tell spiderable that it has to wait
Spiderable.pleaseWait();
// Render the loading template until our route is ready
this.render('loading');
// Waiting for the response of our method
Meteor.call('data', function(err, resp){
this.render('awesome', {
data : resp
});
// This is how it could look to tell spiderable we are ready / always be polite
Spiderable.thanksForWaiting_WeAreReady();
});
}, {
name : 'awesome'
});
When opening now localhost:3000/awesome-route?_escaped_fragment_= we will just see the laoding template ...
The other option for us would be: Is there any alternatives for getting meteor apps crawled by google yet ?
Since spiderable will pre-render your template using phantomjs on server, there is no need for special methods like spiderablePleaseWaitForALittleBitMore_Please
You can just say to your iron:router that template is not rendered yet. Use onBeforeAction hook:
Router.route('/awesome-route', {
name : 'awesome',
template: "awesome",
loadingTemplate: "loading",
onBeforeAction: function(){
var next = this.next;
Meteor.call('data', function(err, resp){
next();
});
}
});

Meteor local package, phaser game, asset loading?

Ok I'm trying to make a package from a Phaser game, been researching this for a couple of days, but it doesn't seem to work.
I think I identified the problem though, hopefully somebody can help me with this!
I set everything up to make use of a local package, which all works.
Untill I'm preloading an asset.
This is my Menu class
Menu = function() {
console.log(this);
}
Menu.prototype = {
preload: function(){
this.load.image('background', 'assets/background.png');
console.log("ok in preload");
},
create: function(){
this.background = this.game.add.sprite(0, 0, 'background');
console.log("ok in create");
var text = "We're getting there";
var style = { font: "23px Arial", fill: "#ff0044", align: "center" };
var t = game.add.text(game.world.centerX, 0, text, style);
},
};
and I call this by doing
game = new Phaser.Game(400, 300, Phaser.AUTO, "gameWindow");
game.state.add('menu', Menu);
game.state.start('menu');
which all seems to work by looking at the console logs, as long as I don't try to load the image in the preload function, if I do it just keeps stuck in the preload function.
The background.png is located at my root folder going 'public/assets/background.png'.
So I'm thinking when I try to access this from a local package, it is having trouble getting there...
my package.js is this btw:
Package.describe({
summary: "game one"
});
Package.on_use(function (api, where) {
api.use(['phaserio'], 'client');
api.add_files(['states/menu.js'],
['client']);
api.export('Menu', ['client']);
});
Anybody out there, that sees what I'm doing wrong?
Thanks in advance!
you should be able to load public images from the app, but it depends when that preload sequence is running. Packages get parsed first. So is your new game created within a Meteor.startUp ->? by which time the app itself is initialized?
Also you can put assets in the package itself.
are you using 0.9? there are some issues with paths for static assets inside packages
see this thread:
https://github.com/meteor/meteor/issues/2602
for 0.9 packages you'll have to add a bit more info
Package.describe({
summary: "phaser for meteor",
version: '0.0.1',
git: 'https://github.com/dcsan/package-dev',
name: "YOURNAME:phaser"
});
currently if you use something like replacing colon with an underscore:
/packages/YOURNAME_phaser/added/path/to/asset.png
if you get phaser wrapped i would also be interested, so please publish it to atmosphere!

Resources