I am using the package livestamp-hs in my Meteor app. This works fine, except in the console I see the error message: Uncaught ReferenceError: Handlebars is not defined, which is caused by this package (helpers.js):
if(Meteor.isClient) {
Handlebars.registerHelper('livestamp', function(timestamp) {
return new Handlebars.SafeString('<span class="livestamp" data-livestamp="'+ timestamp +'"></span>');
});
}
I checked package.js of this package to see if handlebars is being used, and as far as I know this is OK:
Package.on_use(function(api) {
api.use(['jquery', 'handlebars'], 'client');
api.add_files(['moment.min.js', 'livestamp.min.js', 'helpers.js'], 'client');
});
Although this is not a big problem on localhost, it causes an infinite loop when deploying to either meteor.com or heroku.com. Any ideas to solve this?
In Meteor 0.8, the handlebars package was replaced by the ui package. You'll want to use that in your package.js file to ensure that you pull it in.
Handlebars.registerHelper still works, but UI.registerHelper is the new syntax.
On another note, livestamp is last decade's way of creating updated timestamps. I recommend the Meteor-based way to use time on the client, which is reactive and synced to server time: https://github.com/mizzao/meteor-timesync. (Disclaimer: I maintain that package.)
Related
I'm trying to use a web API in my Preact app and can't seem to find a workaround for this error
Build [=================== ] 93% (10.2s) after chunk asset optimization
ReferenceError: window is not defined
method: UqHU
Stack:
{
"fileName": "D:\\preact-app\\build\\ssr-build\\ssr-bundle.js",
"lineNumber": 1,
"functionName": "Object.UqHU",
"methodName": "UqHU",
"columnNumber": 93549,
"native": false
}
This is most likely caused by using DOM or Web APIs.
Pre-render runs in node and has no access to globals available in browsers.
Consider wrapping code producing error in: "if (typeof window !== "undefined") { ... }"
Alternatively use "preact build --no-prerender" to disable prerendering.
See https://github.com/preactjs/preact-cli#pre-rendering for further information.
I have tried "if (typeof window !== "undefined")" but still getting the same error. Commenting out the code or using --no-prerender solves it
The problem came from the import of axios, which depends on the "form-data" library and is not compatible with Preact prerendering as far as I understand. I chose to use fetch instead of axios to fix this but rschristian gives more solutions in this post: https://github.com/preactjs/preact-cli/discussions/1784
preact-cli prerenders your app in Node, where browser globals (such as window) do not exist.
If you've added a window check but are still getting the same error, that means you have other code also trying to access window. Each offending use will need to be wrapped in a window check if you want to prerender your app.
If you want to make a discussion on the preact-cli repo and provide your app, I can try to take a look.
Edit: The issue is in an upstream dependency of axios, form-data. This has an unsound browser vs Node check, meaning any use of axios at all will throw an error. The simplest solution would be to patch form-data/lib/browser.js with the following snippet:
module.exports = typeof self == 'object' ? self.FormData : typeof window !='undefined' ? window.FormData : undefined;
https://github.com/preactjs/preact-cli/discussions/1784
The following code works to load a local, static JSON file:
var stories = require('../stories/stories.json');
Now I want to load a file based on a variable, e.g. do something like this:
var storiesPath = '../stories/stories.json';
var stories = require(storiesPath);
But this triggers an error:
Error: Cannot find module '../stories/stories.json'
at require (packages/modules-runtime.js:123:19)
at meteorInstall.server.main.js (server/main.js:7:15)
Is there any way to get this working? I assume that I could load my file via the Meteor http package instead but I'd rather not add another package if I can avoid it.
Thanks for your hints
Like I said in the comment, you can easily use a variable in a require, e.g.,
> var x = 'fs';
> require(x).readFile
[Function]
So that's not the problem you are dealing with. Are you sure your first case indeed works? It would be surprising. I think you might be running into project file layout issues, due to the use of a relative path. I would stay away from that. And fortunately you can quite easily by using an asset! You can put your json file in private/ in your project folder and then use:
const stories = JSON.parse(Assets.getText('stories.json'));
I am trying to try running meteor together with react and react-three library, that wraps three.js for react. As there are no atmosphere package for this, I am looking into either wrapping it myself or any other method how to use it.
1) How to wrap react-three library into meteor package?
I have tried downloading react-three repo, running npm run build and then using resulting react-three.js with package code written like this:
Package.describe({
summary: "react-three wrapped",
version: "0.8.0",
name: "myname:react-three",
});
Npm.depends({
"react-three": "0.8.0"
});
Package.on_use(function(api) {
api.versionsFrom("0.9.0");
api.use('limemakers:three#=0.73.0',['client','server']);
api.add_files([
"lib/react-three.js"
]);
api.export("THREE");
api.export("ReactTHREE");
});
but this does not seem to do the deal, no ReactTHREE is exported. Might be because of the way react-three build process works. Could you point me into the direction on how to build and wrap it properly?
2) Maybe it is possible to use it directly?
I tried meteorhacks:npm, but it seems that it is server side only. Anything else that could work?
Meteor 1.3-beta was just released and it has support for js modules, although I haven't had the opportunity to test it.
This article has good documentation.
https://github.com/meteor/meteor/blob/release-1.3/packages/modules/README.md
I've been writing a custom script for QuickBase, which requires some date manipulation. I decided to use moments.js and, since I'm using it within quickbase, I am loading moments.js dynamically, using $.getscript. I've done this process before with other plugin (jquery.md5.min.js), and this works correctly.
The problem is, even though moment.js is read correctly, when I try to use it (for instance, see the console.log() I added for debugging, I get an error message telling me that "moment is not defined".
I know moment.js is being read because I already had it dumped into the console after loading, and I'm trying to use its functions only after it is loaded via the asynchronous methods. I have also played with a few simple jsfiddles just to make sure I was calling it correctly. I also checked several times the url and it is correct. The rest of my code is also correct (if I comment out the lines with moment(), it works as expected).
$.getScript(domain + dbid_app + urlMoments)
.done(function(script, textStatus) {
rightNow = moment();
dfd.resolve(); // Resolve when the script is finished loading.
console.log("moments.js has finished loading.\n\n" + textStatus);
console.log(rightNow);
})
.fail(function( jqxhr, settings, exception ) {
console.log( "Triggered ajaxError handler." );
});
How do I call the moment() function? When running the fiddle, and after looking at many online examples, it is as simple as: var myTime = moment();, but this is not working inside of my script. Is there a chance that, even after loading moments.js with $.getscript(), it was not executed? From what I can see on the source code of moments.js, the factory function should be automatically called, shouldn't it?
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
global.moment = factory()
}
One last thing: the url points to the QuickBase code page I created with moments.js. This is also how I'm using jquery.md5.js without any problems.
It looks like your issue might be caused by Quickbase loading a different version of moment.js already. Specifically, Quickbase forms are using Moment 2.8.4 in some capacity and it is being loaded using RequireJS. Following Moment's example for using RequireJS I was able to get a moment object with the following code:
require(['moment'], function(){
moment();
});
rightNow = moment();
I hope that helps you solve your problem.
I am having a problem getting iron-router to correctly store and access routes. It appears that Iron.Router is adding an extra slash (/) before the route names, not ignoring case for template names, and not creating a default route.
I am adding Iron.Router to a simple testing app I have that I have split up for separate pages, but I cannot get any page to work as documented either with the map() or route() functions. I have spent hours trying options and searching and I seem to be the only one who ever had this problem. So I set up a minimum project to test. I created a new meteor project, removed the files, then copied basic.js and basic.html from https://github.com/EventedMind/iron-router/tree/devel/examples. All this example does is show three pages when you click between them. I then…
vagrant#precise32:/vagrant/test$ meteor add iron:router
vagrant#precise32:/vagrant/test$ meteor update
This project is already at Meteor 0.9.3.1, the latest release.
Your packages are at their latest compatible versions.
vagrant#precise32:/vagrant/test$ npm version
{ http_parser: '1.0',
node: '0.10.32',
v8: '3.14.5.9',
ares: '1.9.0-DEV',
uv: '0.10.28',
zlib: '1.2.3',
modules: '11',
openssl: '1.0.1i',
npm: '2.1.2' }
vagrant#precise32:/vagrant/test$ ls
basic.html basic.js.
vagrant#precise32:/vagrant/test$ meteor
It started successfully, but threw a JS error on in Chrome (or FF). Exception from Tracker recompute function: Error: Couldn't find a template named "/" or "". Are you sure you defined it? Well yes, I did. Giving the route a blank name generates no error and no home page. So next I tried adding “/one” on the URL. I then get the JS error Error: Oh no! No route found for path: "/one". Next I changed the parameter in my route() call from “/one” to “one” and got this error: Error: Couldn't find a template named “one” or “one”. Are you sure you defined it? I then tried adding explicit code for route “one”: “function() { this.render(“Home”)} to reference the template “Home” using the same case. I got the exact same error message as without the explicit code. The only way I could get page one to display was to changed the name from “One” to “one” in the HTML. I couldn't get the default page to display at all.
When poking around (using Chrome’s console) in some internal variables, I found Router.routes, which has this highly suspicious content:
>Router.routes.forEach( function(v) {console.info("name = '%s', originalPath = '%s', re = '%s'",v.name,v.originalPath,v.re)})
2014-10-04 16:10:07.756 name = '/', originalPath = '//', re = '/^//?$/i'
2014-10-04 16:10:07.757 name = '/one', originalPath = '//one', re = '/^//one/?$/i'
2014-10-04 16:10:07.758 name = '/two', originalPath = '//two', re = '/^//two/?$/i'
(If I name the path "one", then the route will show 'one' as the name, and '/one' as the originalPath.
Details: This is a brand new folder with only these two files in it (and the hidden .meteor folder). The only package added was “iron:router”. I did a meteor update just before my last round of testing (one hour ago). I have set no environment variables. I have the latest version of Chrome & FireFox. I am using VirtualBox via Vagrant from Window 8 with 12G memory. Every other Meteor project I’ve done so far works, (well except for some trying to use jQuery).
If this was a bug in Iron:router, someone else would have noticed, but there are no more settings I can find anywhere that could be adding or subtracting the extra “/” in Iron-Router. Anyone have any ideas of what I need to look for for making a vanilla Iron-Router work with a vanilla Meteor project on my machine?
You are really out of luck because your problem is very simple : you are running examples which are intended to work with the LATEST iron:router#1.0.0-pre3, but your iron:router version is most likely 0.9.4.
Try this :
meteor remove iron:router
meteor add iron:router#1.0.0-pre3
If you want a little more insight, routes used to be declared with name first and path as an option, this is now the contrary.
0.9.4
Router.map(function(){
this.route("home",{
path:"/"
});
});
1.0.0-pre3
Router.route("/",{
name:"home"
});