I've added the moment package using mrt add moment to format dates/times on the clientside within Meteor's templates. However I seem to be able to use it on the serverside but not within the template helpers.
How can I use momentjs within the template helpers?
server/main.js (Works!)
var moment = Meteor.require('moment');
var t = moment( '2013-11-24 16:18:06' ).format('HH:mm:ss');
console.log(t);
client/main.js (Does not work)
Template.fruits.myTime = function() {
var moment = Meteor.require('moment');
var t = moment( '2013-11-24 16:18:06' ).format('HH:mm:ss');
return t;
}
Error:
Uncaught ReferenceError: require is not defined
I tried using Npm.require('moment') which gave an error: Uncaught ReferenceError: Npm is not defined
and Meteor.require('momemt') which gave an error: Uncaught TypeError: Object #<Object> has no method 'require'
If you add moment using
mrt add moment
then it is available directly as function:
moment()
You can always find out how to use particular package by looking at its package.js file. Take a look at package.js in moment package:
...
if(api.export) {
api.export('moment');
}
...
I noticed that it is very convenient to use moment by registering global handlebars helper:
Handlebars.registerHelper('nice-date', function(date){
return moment(date).fromNow();
});
and using it directly in template:
<template name="test">
{{nice-date createdAt}} // 5 seconds ago
</template>
If you add a Meteor package, you should never need to use require(). How did you add Moment? Via the package on Atmosphere (https://atmosphere.meteor.com/package/moment) using the command mrt add moment?
Per that page, once the package is added you should see a moment global variable that you can simply call:
var oneMonentPlease = moment();
You don't need to put any require statements anywhere. The above line should just work.
Since Moment is a client-side library, you don't necessarily need to add it as a Meteor package or Npm module. You could just download http://momentjs.com/downloads/moment.min.js and save it in your /lib folder. Do that and it will automatically be available to both client and server, and the above line of code will work.
Related
I am building a new project in Rails 6. I have a front-end library I want to use (#tarekraafat/autocomplete.js) that is installed by yarn and exists in my node_modules directory, but is not being made available to other JS code in the browser. Here is what I have set up currently:
/package.json:
"dependencies": {
"#tarekraafat/autocomplete.js": "^8.2.1"
}
/app/javascript/packs/application.js:
import "#tarekraafat/autocomplete.js/dist/js/autoComplete.min.js"
/app/views/.../example.html.erb
<script type="text/javascript">
window.onload = () => {
new autoComplete({
[...]
});
};
</script>
I am getting an error in the browser pointing to the new autoComplete():
Uncaught ReferenceError: autoComplete is not defined
Some reading seems to indicate that I need to modify the /config/webpack/environment.js file, in which I have tried various versions of the following with no luck (including restarting the dev server):
/config/webpack/environment.js:
const { environment } = require('#rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
autoComplete: 'autocomplete.js'
})
);
module.exports = environment
First, what do I need to do to add this library so it can be used correctly? Second, as someone who has not directly used webpack previously, what is the function of adding this definition to the environments.js file, and why don't I need to do it for some libraries (bootstrap, popper) but I do for others (jquery, and maybe autocomplete.js)?
In Webpacker, the usage of this library would be as follows:
// app/javascript/src/any_file.js
import autoComplete from "#tarekraafat/autocomplete"
new autoComplete(...)
// app/javascript/packs/application.js
import "../src/any_file"
This alone does not import the autoComplete variable into the global scope. To do that, the simplest thing is assign the variable to window from within your webpack dependency graph.
// app/javascript/src/any_file.js
import autoComplete from "#tarekraafat/autocomplete"
window.autoComplete = autoComplete
As an aside, you don't need to use the ProvidePlugin configuration for this library. The ProvidePlugin says: “add this import to all files in my dependency graph.” This might be helpful for something like jQuery to make legacy jQuery plugins work in webpack. It is not necessary to make your autocomplete lib work
I am trying to use a node module called "tagify" in my node.js app. In the readme file for the package (https://www.npmjs.com/package/#yaireo/tagify#installation) it says to setup as follows:
npm i #yaireo/tagify --save
// usage:
import Tagify from '#yaireo/tagify'
var tagify = new Tagify(...)
I ran the npm command and it installed fine. My EJS file has this (not shown is the input name="tags" element):
<script>
import Tagify from '#yaireo/tagify';
var input = document.querySelector('input[name=tags]'),
// init Tagify script on the above inputs
tagify = new Tagify(input);
</script>
When I load the page, I get this in the console:
Uncaught SyntaxError: Unexpected identifier (reference to 'import' line)
I'm very new to this and very confused. I've been searching the internet for two hours and can't figure out the basic task of getting this package to work. If this questions is redundant, please direct me elsewhere, because I don't know where to go.
<script src="https://cdn.jsdelivr.net/npm/#yaireo/tagify#2.9.7/dist/tagify.min.js"></script>
<script>
var input = document.querySelector('input[name=tags]'),
// init Tagify script on the above inputs
var tagify = new Tagify(input);
</script>
This code is not raw. you need to use technologies like babel or webpack to use it. easy to run this link will be enough
I have files as represented:
-js/
- calc.js
- tool.js
-index.html
calc.js is a node module of following structure:
module.exports = {
calculate: function() {...},
getPrecision: function() {...}
}
and tool.js use require and adds some functions, like that:
const fpcalc = require('./fpcalc');
function changeState() {
//some code using fpcalc
}
I used Browserify to generate bundle.js and added that as script src.
One of my buttons on HTML page is using onclick=changeState(). After clicking I'm getting
ReferenceError: changeState is not defined
at HTMLAnchorElement.onclick
Why is that? Is there any other way to make it work?
The function "changeState" is not exported in your tool.js.
That means it is only visible inside your bundle.js, but not outside.
Have a look at this: https://makerlog.org/posts/creating-js-library-builds-with-browserify-and-other-npm-modules
It shows you how to expose your code to the global namespace in javascript.
Here's a very simple way to make it work like you want.
const fpcalc = require('./fpcalc');
window.changeState = () => {
//some code using fpcalc
}
I have same error, here is my working example.
mac, browserify https://github.com/perliedman/reproject
Must use sudo install globally
sudo npm install -g brwoserify
https://github.com/perliedman/reproject
sudo npm install reproject // install locally is fine
Must manually create 'dist' folder for later output file use
Must use --s expose global variable function 'reproject' and or 'toWgs84' you will use later in browser js.
Without --s , will get 'reproject' undefined error . https://makerlog.org/posts/creating-js-library-builds-with-browserify-and-other-npm-modules
browserify --help will list all options.
-o means output file directory
browserify node_modules/reproject/index.js --s reproject -o node_modules/reproject/dist/reproject.js
HTML script tag include your above dist/reproject.js
Now, you will not get 'reproejct' undefined error
return reproject(_geometry_, ___from_projection, proj4.WGS84, crss)
I had problems previously trying to get the Meteor.require method to work and I thought it was fixed but apparently not. Although I have since upgraded to Meteor 0.9.0.
Anyone have any idea how I can get the Meteor.require method to work?
Here's what I get on the terminal when passing params back to the server
=> App running at: http://localhost:3000/
I20140827-11:08:21.949(-7)? createImage
I20140827-11:08:21.953(-7)? 24890
I20140827-11:08:22.030(-7)? Exception while invoking method 'createImage' TypeError: Object #<Object> has no method 'require'
I20140827-11:08:22.032(-7)? at Meteor.methods.createImage (app/server/server.js:7:21)
I20140827-11:08:22.033(-7)? at maybeAuditArgumentChecks (packages/livedata/livedata_server.js:1492)
I20140827-11:08:22.034(-7)? at packages/livedata/livedata_server.js:643
I20140827-11:08:22.034(-7)? at _.extend.withValue (packages/meteor/dynamics_nodejs.js:56)
I20140827-11:08:22.034(-7)? at packages/livedata/livedata_server.js:642
I20140827-11:08:22.034(-7)? at _.extend.withValue (packages/meteor/dynamics_nodejs.js:56)
I20140827-11:08:22.034(-7)? at _.extend.protocol_handlers.method (packages/livedata/livedata_server.js:641)
I20140827-11:08:22.035(-7)? at packages/livedata/livedata_server.js:541
This is my Meteor.method:
createImage: function(coords) {
console.log('createImage')
console.log(coords.area);
var gd = Meteor.require('node-gd');
},
my packages.json file:
{
"node-gd":"0.2.3"
}
node-gd is definitely there too:
me#ubuntu:~/leaderboard/packages/npm/npm/node_modules/node-gd$ ls
binding.gyp build coffee cpp js package.json README.md
Meteorhacks just released (I'm talking about 4 hours ago) the updated npm package for Meteor 0.9, it's called meteorhacks:npm https://github.com/meteorhacks/npm
You should remove the previous package which I suppose is broken (something like arunoda:npm I guess) and give the new one a try.
Be aware that Meteor.require has been replaced by Meteor.npmRequire !
i have this index.jade file
include scripts
script( src='path of my site/project name/src/scripts/index.js' )
and also index.js file
var _ = require('./underscore');
var IScroll = require('iscroll/build/iscroll-probe.js');
var zepto = require('./vendor/zepto.js');
var morpheus = require('morpheus');
var easings = require('./vendor/morpheus-easings.js');
require('./vendor/zepto.touch.js');
I am getting ReferenceError: require is not defined
I want to include modules for the correct working any help ?
First :
npm install iscroll --save
Then this :
global.IScroll = require('iscroll');
The type of require you are looking to use is the node type. You can't use it directly in your browser. You need to get a bundler such as browserify or webpack, which would convert those requires to actual dependencies behind the scenes. Here's an article that would get you started with browserify.