Uncaught ReferenceError: require is not defined in Meteor - meteor

I am trying to deploy my project which needs the web3 Javascript API. As done by some examples I found online, I need to do the following:
<script type="text/javascript">
var Web3 = require('web3');
var web3 = new Web3();
web3.setProvider(new web3.providers.HttpProvider("http://localhost:8545"));
...code... </script>
When I run the project i get this error "Uncaught ReferenceError: require is not defined". I've already done "meteor add modules", meteor add aramk:requirejs, sudo npm install require and sudo npm install requirejs. I downloaded and included the js file (through templating since in meteor js files are handled differently). What am I missing?

I see that you use require inside a script tag so I think this code is in a html file. If that's so, you will need to move that code to a js file because require can not be used in html file.

Related

Vue.js 2.0: Failed to mount component: template or render function not defined

I'm making a Vue 2 component. But when I npm link it in other project and imported (I'm importing it in a random component doing: import InputTag from 'vue-input-tag' ) I'm seeing this:
Failed to mount component: template or render function not defined.
(found in component <input-tag>)
Any ideas? I'm going crazy.
Here is the repo: https://github.com/matiastucci/vue-input-tag/tree/wtf
Thanks!
I hit this same issue when upgrading an old (v0.11.x) Vue.js app. Vue.js 2.x introduces compiled (render-function) templates. Additionally, these are the new default.
Here's more info from the 2.x docs:
http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build
In my case, I was using browserify and partialify to include the templates (as strings), so there was no pre-compilation to render function happening.
To fix this, I used aliasify to make sure the vue requirement was fulfilled with the "Standalone" copy of Vue.js rather than the "Runtime-only" version.
I did the following:
npm install --save-dev aliasify
edited the package.json to include this code:
"aliasify": {
"aliases": {
"vue": "vue/dist/vue.js"
}
}
added -t aliasify to my browserify command, which now reads:
browserify -e src/main.js -t aliasify -t partialify -o build/bundle.js
You can do this with webpack also--and there's info in the Vue.js docs for that.
I hope that helps!

.jshintrc with Gulp, Jhipster

When I want to set "Underscore" (I used to use 'Grunt') and I put in .jshintrc.
"globals": {
"_": false,
Now with version 3.5.1 of Jhipster I use Gulp and I do not know how to configure it because there is no file .jshintrc.
Ans it gives me the error
angular.js:13550 ReferenceError: _ is not defined
Can somebody help me. Thank you.
JHipster replaced jshint with eslint in this change. Because of this, you should add the globals section to the file .eslintrc.json the same as it was in .jshintrc. (Similar issue)
Based on the ReferenceError from Angular, it looks like you don't have Underscore as a dependency in your index.html. Run bower install underscore --save to download and install Underscore (this adds it to bower.json), then run gulp inject:dep to inject the dependencies to index.html automatically.

I always get errors saying the function is not defined for the jquery plugins I used in meteor 1.3 and React

In my meteor 1.3 and React apps, when I try to use a jquery plugin, it won't work. On the console, I always see an error saying the function is not defined. For example, Uncaught TypeError: $(...).countdown is not a function. Earlier I added the js files in the header like this in a index.html file (Placed in the app's root):
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.1.0/jquery.countdown.min.js"></script>
</head>
But since Meteor 1.3 moved all js to the footer, now I load them inside the body tag in the same index file. Now the files are loaded and the jquery plugins can find jQuery without issues. But have trouble using them in the react components. I wrap my functions inside componentDidMount and $(document).ready. But it's not working. Any idea why?
Have you tried installing it as an npm package?
As of 1.3 Meteor supports modules and NPM packages:
http://guide.meteor.com/1.3-migration.html#modules
meteor npm install --save jquery-countdown
Package URL: https://www.npmjs.com/package/jquery-countdown
Then import the dependency where you need it.
Not 100% sure on the import:
import 'jquery-countdown';
or something like:
import {countdown} from 'jquery-countdown'

How to use Laravel 5 with Gulp, Elixir and Bower?

I am completely new to all this, 'Bower' and 'Gulp' and Laravel 'Elixir'. I purchased a template that uses them (unfortunately) and now I need some help on how to go about implementing them. I have already installed NPM and Bower. All my packages have been downloaded into:
resources > assets > vendor
This is a screenshot:
Now my question is how do I include all those packages I downloaded in my view? From my understanding I can't run less files directly in the browser, it only runs once due to 'browser caching' or something like that, also the JS scripts are just too many to include in my page.
I want a way where I can work on my files and have them automatically compiled with the compiled files being referenced in my app.php file.
This is a link to the GulpJS file included in my template: http://pastebin.com/3PSN6NZY
You do not need to compile every time someone visits. The compiled sass/js should be run in dev and then the output files referenced.
If you have gulp installed on the project, you should see a gulp.js file in the root of your project. If not, visit here for instructions:
Gulp/Elixer installation and setup
In your gulp.js file:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.less([
'app.less',
'normalize.less',
'some-other-less.less',
'and-another.less'
]);
mix.scripts(['app.js', 'some-other-js.js'], 'public/js/output-file.js');
});
While in development you can run gulp watch from the command line to listen for changes and run compile tasks when it hears a change. Then you simply reference the output files in the public directory as you normally would.
If you don't want to listen, you can just run the gulp command for a single once-off task run.
The docs are pretty straight forward and can be found here:
Gulp/Elixer docs

How to get Polymer working with Meteor?

I'm trying to get Polymer 0.9 working with Meteor however Meteor is spitting out:
While building the application:
bower_components/polymer/polymer-micro.html:9: bad formatting in HTML template
bower_components/polymer/polymer-mini.html:9: bad formatting in HTML template
bower_components/polymer/polymer.html:17: bad formatting in HTML template
=> Your application has errors. Waiting for file change.
Is there any way to resolve the issue?
You should place the components in public/ at the root of your project.
I've had the same problems. I can't tell if you're using vulcanize, but I assume so.
What fixed me was:
Install Bower: npm install -g bower (bower.org)
Create a file in the root of the project called .bowerrc
Then, you want to tell bower where to install polymer components.
In that .bowerrc put:
{
"directory": "public/bower_components"
}
Now, use bower to install polymer
bower install --save Polymer/polymer#^1.2.0
If you're using other parts of polymer like paper and iron, you'll repeat the bower install step for those as well.
Then attempt starting up meteor again.

Resources