I am struggling to load packery.js with require.js. The script is been loaded but I am getting the following error in the console, even if packery is not initialized on the page.
Uncaught TypeError: Cannot read property 'prototype' of undefined : packery.pkgd.js:486
And 486th row is this:
var EventEmitter = window.EventEmitter;
for ( var prop in EventEmitter.prototype ) {
Uncaught TypeError: Cannot read property 'prototype' of undefined
docReady[ prop ] = EventEmitter.prototype[ prop ];
}
That's the latest version of packery which i've just downloaded from the github.
Anyone experiencing the same issue? Thanks...
Here is a way to load:
1) define a path to your script:
require.config({
paths: {
.....
"jquery" : "path/to/jquery.js"
"packery" : "path/to/packery.js"
.....
}
2) define dependencies in shim section
shim:{
"packery" : ["jquery"]
}
3) Include library in module dependencies array and use it on callback
define(
[
"jquery",
"packery"
],
function($){
$('.some').packery
}
);
Related
I'm using nuxt-env to access my env variables in vue-components and jest to test the components. But for the tests this.$env is undefined. Is there a way to configure jest to use the nuxt-env variables?
my nuxt.config.js :
['nuxt-env', { // Environment variables for runtime
keys: [
'FOO'
]
}],
the usage in vue components:
<script>
export default {
data: function() {
return {
bar: this.$env.FOO
}
}
}
</script>
Currently the jest-test for the component returns the following error:
Error: [Vue warn]: Error in data(): "TypeError: Cannot read property 'FOO' of undefined"
I'm trying to use CanvasJS inside my project. I'm using RequireJS to manage the modules, and have this in the main script:
define(['domReady',"canvasjs","common-functions"], function(domReady,CanvasJS) {
domReady(function () {
window.CanvasJS = CanvasJS;
init_page_select();
});
});
This is what I have in my requireJS config file for the path:
"paths": {
// other stuff here
"canvasjs": "node_modules/canvasjs/dist/canvasjs.min"
},
I can see the canvasjs.min.js file being grabbed fine - but then I get this weird error:
ReferenceError: intToHexColorString is not defined[Learn More] canvasjs.min.js:7:7042
[33]</n.prototype.render https://www.test.org/2018/js/lib/node_modules/canvasjs/dist/canvasjs.min.js:7:7042
[28]</n.prototype.render https://www.test.org/2018/js/lib/node_modules/canvasjs/dist/canvasjs.min.js:5:14150
n/this.render https://www.test.org/2018/js/lib/node_modules/canvasjs/dist/canvasjs.min.js:8:17771
init_page_select https://www.test.org/2018/js/lib/spot_view_stats.js:83:2
<anonymous> https://www.test.org/2018/js/lib/spot_view_stats.js:4:3
domReady https://www.test.org/2018/js/lib/domready.js:105:13
<anonymous> https://www.test.org/2018/js/lib/spot_view_stats.js:2:2
execCb https://www.test.org/2018/js/lib/require.js:5:12859
check https://www.test.org/2018/js/lib/require.js:5:6575
enable/</< https://www.test.org/2018/js/lib/require.js:5:9031
bind/< https://www.test.org/2018/js/lib/require.js:5:812
emit/< https://www.test.org/2018/js/lib/require.js:5:9497
each https://www.test.org/2018/js/lib/require.js:5:289
emit https://www.test.org/2018/js/lib/require.js:5:9465
check https://www.test.org/2018/js/lib/require.js:5:7169
enable/</< https://www.test.org/2018/js/lib/require.js:5:9031
bind/< https://www.test.org/2018/js/lib/require.js:5:812
emit/< https://www.test.org/2018/js/lib/require.js:5:9497
each https://www.test.org/2018/js/lib/require.js:5:289
emit https://www.test.org/2018/js/lib/require.js:5:9465
check https://www.test.org/2018/js/lib/require.js:5:7169
enable https://www.test.org/2018/js/lib/require.js:5:9358
init https://www.test.org/2018/js/lib/require.js:5:5716
h https://www.test.org/2018/js/lib/require.js:5:4287
completeLoad https://www.test.org/2018/js/lib/require.js:5:12090
onScriptLoad https://www.test.org/2018/js/lib/require.js:5:13014
I'm invoking it with:
var chart = new CanvasJS.Chart("thegraph",
{
title:{
text: impressionText
},
theme: "theme2",
axisX: {
valueFormatString: "MMM-DD-YYYY",
labelAngle: -50
},
axisY:{
valueFormatString: "#0",
title: impressionText
},
data: [
{
type: "line",
showInLegend: true,
legendText: legendText,
dataPoints: dataPoints
}
]
});
chart.render();
Interestingly, if I tell it to load canvasjs.js instead of canvasjs.min.js, I get another error:
ReferenceError: intToHexColorString is not defined[Learn More]
OK so the problem seemed to be my version. For some reason "npm install canvasjs" was installing 1.8.1, but 2.2 was out. As per their request, I updated it to 2.2 and it sorted the problem. It seems weird npm is running such an outdated version though
I have a little Node Express packaged application with the following webpack.config.js:
module.exports = {
target: 'node',
entry: './server.js',
output: {
filename: 'node-server.min.js'
}
}
When i run node node-server.min.js the application works fine but, when i load the file from Electron i am getting the following error message:
Uncaught Error: Could not find package.json up from: / at
Function.pkginfo.find (node-server.min.js:6373) at
Function.pkginfo.read (node-server.min.js:6390) at module.exports
(node-server.min.js:6341) at Object. (node-server.min.js:6403) at
Object.styles (node-server.min.js:6408) at webpack_require
(node-server.min.js:20) at Object. (node-server.min.js:14624) at
Object. (node-server.min.js:14699) at Object.
(node-server.min.js:14701) at webpack_require (node-server.min.js:20)
I am loading node-server.min.js file with a script tag.
Any ideas ?
I am trying to use hammer.js plugins with require.js but I have no luck.
Here is my code:
requirejs.config({
paths: {
"jquery": ('__proto__' in {}) ? "lib/zepto" : "lib/jquery",
"hammer-jquery": "lib/jquery.hammer",
"hammer-showtouches": "lib/hammer.showtouches",
"hammer-fakemultitouch": "lib/hammer.fakemultitouch"
},
shim: {
"jquery": {
exports: "$"
},
"hammer-showtouches": {
deps: [ "hammer-jquery" ],
exports: "Hammer.plugins.showTouches"
},
"hammer-fakemultitouch": {
deps: [ "hammer-jquery" ],
exports: "Hammer.plugins.fakeMultitouch"
}
},
waitSeconds: 30
});
requirejs(["jquery","hammer-jquery","hammer-showtouches","hammer-fakemultitouch"], function ($,Hammer) {
$(function(){
if(!Hammer.HAS_TOUCHEVENTS && !Hammer.HAS_POINTEREVENTS) {
Hammer.plugins.showTouches();
Hammer.plugins.fakeMultitouch();
}
});
});
And here is the error:
Uncaught TypeError: Cannot read property 'plugins' of undefined hammer.showtouches.js:7
Uncaught TypeError: Cannot read property 'plugins' of undefined require.js:8
Uncaught TypeError: Cannot read property 'plugins' of undefined hammer.fakemultitouch.js:7
Uncaught TypeError: Cannot read property 'plugins' of undefined require.js:8
I have tried to include Hammer in shim config with no luck (It's not necessary beacause last version of jquery.hammer is AMD compatible).
Your issue appears to be that you didn't include the hammerjs library which is required by the hammerjs jquery plugin.
To fix this problem, you'll need to add to your requirejs path something like 'hammer':'lib/hammerjs/dist/hammer.min',
Additionally, here's some related information on how I used hammerjs with requirejs.
In my case, I wanted it to work with backbone and requirejs. I installed the libraries with bower.
bower install --save hammerjs
bower install --save backbone.hammer
Then, I proceeded to add the RequireJS configuration:
I noticed that jquery.hammer.js is AMD and automatically requires jquery. It also silently depends on Hammer. It modifies jquery to support Hammer. No shim is required.
I noticed that hammerjs is AMD and automatically exports Hammer. No shim is required.
I noticed that backbone.hammer is AMD and automatically requires underscore, backbone, and hammer. It modifies Backbone to support Hammer. No shim is required.
Therefore, my configuration uses paths only (since no shim support is required):
require.config({
'baseUrl':'',
'paths':{
'underscore':'js/lib/underscore-amd/underscore-min',
'backbone':'js/lib/backbone-amd/backbone-min',
'jquery':'js/lib/jquery/jquery.min',
'hammer':'js/lib/hammerjs/dist/hammer.min',
'jquery-hammer':'js/lib/hammerjs/dist/jquery.hammer.min',
'backbone-hammer':'js/lib/backbone.hammer/backbone.hammer'
},
shim:{
'underscore': { exports: '_' },
'backbone': { deps: ['underscore', 'jquery'], exports: 'Backbone' }
}
});
Wrap HammerJS then bind to the global window:
// #path utils/hammer
define([
'hammer'
], function (Hammer) {
window.Hammer = Hammer;
});
Then make whatever plugins or modules which have dependencies on HammerJS depend on utils/hammer.
I am trying to minify my code using requireJS's r.js.
my command is
$node node_modules\requirejs\bin\r.js name=main out=main-built.js baseUrl=.
Am getting following error.
timers.js:103
if (!process.listeners('uncaughtException').length) throw e;
^
Error: Evaluating ./lib/jquery-1.8.0.min.js as module "jquery" failed with error
: ReferenceError: window is not defined
at Function.req.load (C:\xampp\htdocs\ember\App\js\node_modules\requirejs\bin
\r.js:2227:23)
at Object.context.load (C:\xampp\htdocs\ember\App\js\node_modules\requirejs\b
in\r.js:1681:21)
at Object.Module.load (C:\xampp\htdocs\ember\App\js\node_modules\requirejs\bi
n\r.js:907:29)
at Object.Module.fetch (C:\xampp\htdocs\ember\App\js\node_modules\requirejs\b
in\r.js:897:66)
at Object.Module.check (C:\xampp\htdocs\ember\App\js\node_modules\requirejs\b
in\r.js:927:26)
at Object.Module.enable (C:\xampp\htdocs\ember\App\js\node_modules\requirejs\
bin\r.js:1211:22)
at Object.context.enable (C:\xampp\htdocs\ember\App\js\node_modules\requirejs
\bin\r.js:1553:39)
at Object.Module.enable.mod (C:\xampp\htdocs\ember\App\js\node_modules\requir
ejs\bin\r.js:1196:33)
at g (C:\xampp\htdocs\ember\App\js\node_modules\requirejs\bin\r.js:233:23)
at each (C:\xampp\htdocs\ember\App\js\node_modules\requirejs\bin\r.js:165:31)
There are some docs on using jQuery with RequireJS here:
http://requirejs.org/docs/jquery.html
Make sure your config looks something like this:
require.config({
paths: {
jquery: 'lib/jquery',
// other paths
},
shim: {
jquery: ['jquery'],
// plugins that depend on jquery
slider: {
deps: ['jquery']
},
moment: {
deps: ['jquery']
}
}
});