I'm getting ReferenceError: _ is not defined the angular-google-maps
I don't really understand why I'm getting this error, because I'm doing exactly what it is written on the website.
Also I searched for similar questions, but they didn't helped.
bundle.js
$ = window.$ = window.jQuery = require('./lib/jquery');
require('./lib/angular-simple-logger.js');
require('./lib/angular-google-maps.js');
require('./lib/lodash.js');
I'm importind bundle.js into the index.html. I also tried to use ngLodash, but no results.
app.js
var app = angular.module('app', [
'ngLodash',
'nemLogging',
'uiGmapgoogle-maps'
]);
app.config(function(uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
key: '{myKey}',
v: '3.20',
libraries: 'places' // I don't need the whole map, only the places
});
});
Also I enabled the GoogleMaps Api from the Google Developer Console
Does someone have some experience with this library and can give me a hint?
You need to add the _ underscore library as a dependency. npm install underscore, or add to your bower config, or whatever you use for dependecy management.
<script src="bower_components/underscore/underscore-min.js"></script>
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 try to require the jquery pulgin perfect-scrollbar to my laravel javascript. So I have runed
npm install perfect-scrollbar
In Line 1 of my Javascript file (located under ressources/assets/javascript/material-dashboard/myfile.js) I require the plugin with this attempt
require('perfect-scrollbar');
The myscript.js is required to the app.js with require('./material-dashboard/myscript.js')
Now the browser console tell me
Uncaught TypeError: $(...).perfectScrollbar is not a function
The assets are compiled with
npm run dev
The content of myscript.js
require('perfect-scrollbar');
(function() {
isWindows = navigator.platform.indexOf('Win') > -1 ? true : false;
if (isWindows) {
// if we are on windows OS we activate the perfectScrollbar function
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();
$('html').addClass('perfect-scrollbar-on');
} else {
$('html').addClass('perfect-scrollbar-off');
}
})();
What is wrong?
Thanks for your help!
Just to simplify your job, under bootstrap.js file that handles
require('perfect-scrollbar');
simply change it to
window.PerfectScrollbar = require('perfect-scrollbar').default; and you will be good to go. Only answers questions if using compiling assets in laravel with bootstrap.js
As per the docs, to initialise an element with the plugin you should do something like the following:
import PerfectScrollbar from 'perfect-scrollbar';
new PerfectScrollbar(".sidebar .sidebar-wrapper");
new PerfectScrollbar(".main-panel");
If you want to use require instead of import you would do something like:
let PerfectScrollbar = require('perfect-scrollbar').default;
Lastly, it doesn't look like the plugin is meant to work with jQuery out of the box, however, if you want to use with jQuery like you are in your post you could do the following:
import PerfectScrollbar from 'perfect-scrollbar';
$.fn.perfectScrollbar = function (options) {
return this.each((k, elm) => new PerfectScrollbar(elm, options || {}));
};
$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();
I am having a really hard time using local AMD modules in an Aurelia project that uses es6, JSPM, and system.js. I am hoping someone out there can help me configure my project to enable me to import/load my AMD modules and use them in my project. The local AMD style modules are in a format similar to the following:
define
(['require',
'lib/alerts/STARTSTOP',
'lib/alerts/STOPPED',
...
],
function( require, STARTSTOP, STOPPED, ... ) {
return {
alert: function( data ) {
var type = data.type;
var ev = data.event;
var cls = require( 'lib/alerts/' + ev );
return new cls( data );
}
};
});
When I try to import/load this module into an es6 module I am running into the following error: Uncaught TypeError: Unexpected anonymous AMD define.. I get this error when trying to load the module in either of the following ways:
System.import('lib/alerts/AlertFactory').then( (m) => {
console.log( m );
});
or
import AlertFactory from 'lib/alerts/AlertFactory.js';
I have also made sure to add the following script to my index.html:
<script>
window.define = System.amdDefine;
window.require = window.requirejs = System.amdRequire;
</script>
In addition to the above I have also added a meta format property to my config.js file, but that hasn't seemed to help either.
meta: {
...
"lib/alerts/*.js": {
"format": "amd"
}
}
Does anyone have any ideas on why I am running into the error I am seeing and how to properly load my modules? I appreciate any help/insight you can offer.
UPDATE
I finally realized that the main issue here is that I'm trying to use existing AMD modules in and Aurelia project, and the default Aurelia gulp build assumes that all code is written in ES6 and not mixed with AMD. That's why I'm having issues. Vanilla jspm/system.js handle a mix of module formats, but Aurelia does not out of the box.
Just put your AMD modules out of src so babel will not be able to transpile it. Here is working solution I use to import jquery modules:
First, I have local_packages folder in project root and I have jquery module local_packages/somelib/js/mymodule.js
Then in config.js
paths: {
...
"local/*": "local_packages/*",
}
map: {
...
"somelib": "local/somelib",
"somelib1": "/local_packages/somelib1",
}
And finally my import looks like: import 'somelib/js/mymodule';
I have problem with adding Angulartics.
In my app.js I just added that two dependencies (Angulartics and the last one) you can see:
var smsApp = angular.module('smsApp', [
'ngRoute',
'smsControllers',
'smsFilters',
'google-maps',
'pascalprecht.translate',
'angulartics',
'angulartics.google.analytics',
]);
and then in my index.html I added: <script src="./js/angulartics.js">
<script src="./js/angulartics-ga.js"> ---- paths to these files are ok
but when I want to create that module with:
var injector = angular.injector(['smsApp', 'ng']);
I got this error:
Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.2.15/$injector/unpr?p0=%24rootElementProvider%20%3C-%20%24rootElement%20%3C-%20%24location
Without Angulartics it goes well! Please help me :) thanks
I'm following this tutorial.
Assuming you're reading the docs here: https://github.com/angulartics/angulartics
You need to install the angularitics.google.analytics plugin by running 'bower install angulartics-google-analytics --save'
Why are you using injector?
If you're using injector, you're not using the regular AngularJS bootstrapping code, so $rootElement is not defined.
You could mock the object:
<script src="/path/to/angular-mock.js">
...
var injector = angular.injector(['smsApp', 'ngMock', 'ng']);
Or define it in your app explicitely
smsApp.config(['$provide', function($provide) {
// Should match the element that contains your ng-app="smsApp" attribute
$provide.value('$rootElement', angular.element(document.body));
}]);
I'm trying to use Miso (http://misoproject.com/dataset/), and on of the dependencies is underscore.js. I'm using require.js, and keep getting an error in the console: "Uncaught ReferenceError: _ is not defined." Here is my main.js file:
require(["jquery", "underscore", "miso"], function($, _, miso) {
$(function() {
var ds = new Miso.Dataset({
url : "/data/ma_region.csv",
delimiter : " ",
});
});
});
Any ideas? Thanks in advance.
Miso is expecting the _ underscore in the global scope.
In Miso's code:
(function(global, _) {
/* has bunch of stuff using underscore */
}(this, _));
Which means that in this last part (this, _), it doesn't have reference to _ underscore library because it's defined within RequireJS which means it exists in the anonymous function scope.
So you need to load _ underscore when and wrap Miso in a module, eg:
define(['underscore'], function(_) {
/** Miso's code here because Miso is expecting the _ **/
});
You'll need to include this for the other dependencies listed on Miso's website http://misoproject.com/dataset/tutorials/quickstart:
Dependencies
If you chose to include the production version without
built in dependencies, you may need to include them yourself. Dataset
requires the following libraries:
LoDash 0.9.0
Underscore.math.js (unknown version)
Underscore.deferred.js 0.2.0
moment.js 1.7.2 (for 'time' data type)
If you are using IE, you will want to include json2.js:
json2.js 2011-10-19
Alternatively, I recommend using the versions of Miso that already prepackage the dependencies so you don't have to worry about this.
Ensure that your underscore library is named underscore.js and it is in the same same directory as your javascript code. This is the baseURL for require.js.
If this isn't the case, you should configure paths. Refer http://requirejs.org/docs/api.html#config-paths