I recently integrated blueimp JS gallery with my angular 2 (running with angular-cli) application. I installed it through NPM (npm install blueimp-gallery --save) and imported it via .angular-cli.json:
"styles": [
"../node_modules/blueimp-gallery/css/blueimp-gallery.css",
"../node_modules/blueimp-gallery/css/blueimp-gallery-indicator.css"
],
"scripts": [
"../node_modules/blueimp-gallery/js/blueimp-helper.js",
"../node_modules/blueimp-gallery/js/blueimp-gallery.js",
"../node_modules/blueimp-gallery/js/blueimp-gallery-indicator.js"
]
From there, I use it in angular components:
//from .angular-cli.json
declare const blueimp: any;
public show(event: any, images: any[]) {
const options = {
event: event || window.event,
};
blueimp.Gallery(images, options);
};
So far, so good: It works fine, I can use the gallery. However I've recently been receiving crash reports from customers on mobile devices. I wanted to open a github issue, but it seems that it's not possible on blueimp/Gallery github repo.
Here is a crash that's seen a lot on android devices:
TypeError: Cannot read property 'style' of undefined
at Gallery.translate (eval at P+fo.t.exports (/scripts.46c7e72cc98882b84ae5.bundle.js:1:18074), <anonymous>:492:37)
at Gallery.translateX (eval at P+fo.t.exports (/scripts.46c7e72cc98882b84ae5.bundle.js:1:18074), <anonymous>:501:12)
at Gallery.move (eval at P+fo.t.exports (/scripts.46c7e72cc98882b84ae5.bundle.js:1:18074), <anonymous>:487:12)
at Gallery.slide (eval at P+fo.t.exports (/scripts.46c7e72cc98882b84ae5.bundle.js:1:18074), <anonymous>:339:14)
at eval (eval at P+fo.t.exports (/scripts.46c7e72cc98882b84ae5.bundle.js:1:18074), <anonymous>:384:22)
at n.invokeTask (/polyfills.0a60947aabdcee7751c0.bundle.js:36:7074)
at Object.onInvokeTask (/vendor.7a5c4da3f678e71e26f9.bundle.js:261:2558)
at n.invokeTask (/polyfills.0a60947aabdcee7751c0.bundle.js:36:7010)
at t.runTask (/polyfills.0a60947aabdcee7751c0.bundle.js:36:4427)
at invoke (/polyfills.0a60947aabdcee7751c0.bundle.js:36:8187)
at t.args.(anonymous function) (/polyfills.0a60947aabdcee7751c0.bundle.js:15:85)
And another one that happens exclusively on iOS devices:
EXCEPTION: undefined is not an object (evaluating 'this.slides[index].style')
translate
translateX
move
slide
invokeTask#/polyfills.0a60947aabdcee7751c0.bundle.js:36:7079
onInvokeTask#/vendor.7a5c4da3f678e71e26f9.bundle.js:261:2568
invokeTask#/polyfills.0a60947aabdcee7751c0.bundle.js:36:7022
runTask#/polyfills.0a60947aabdcee7751c0.bundle.js:36:4437
invoke#/polyfills.0a60947aabdcee7751c0.bundle.js:36:8194
Both crashes are in the same part of blueimp code. I can't seem to reproduce with certainty those crashes and I am struggling to fix them.
Has anyone also been using blueimp with angular 2+ ? Has anyone seen similar issues with blueimp Gallery ?
Related
After upgrading to Expo 46, suddenly I started seeing these errors. I have searched on them, but did not find a solution so far. The app doesn't start anymore, it directly shows these errors.
Any ideas?
ERROR TypeError: undefined is not an object (evaluating '_reactNative.Image.propTypes.source')
Error: Unable to resolve module ./http://192.168.xx.xx:19000/index.ts from C:\xx/.:
None of these files exist:
* http:\192.168.xx.xx:19000\index.ts(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.svg|.native.svg|.svg|.android.cjs|.native.cjs|.cjs)
* http:\192.168.xx.xx:19000\index.ts\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.svg|.native.svg|.svg|.android.cjs|.native.cjs|.cjs)
at ModuleResolver.resolveDependency (C:\xx\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:136:15)
at DependencyGraph.resolveDependency (C:\xx\node_modules\metro\src\node-haste\DependencyGraph.js:231:43)
at C:\xx\node_modules\metro\src\lib\transformHelpers.js:129:24
at Server._resolveRelativePath (C:\xx\node_modules\metro\src\Server.js:1137:12)
at async Server.requestProcessor [as _processBundleRequest] (C:\xx\node_modules\metro\src\Server.js:464:37)
at async Server._processRequest (C:\xx\node_modules\metro\src\Server.js:420:9)
ERROR Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called
I solved the issue by divide and conquer strategy.
Commenting out every component and uncommenting them step by step until I found the issue.
In my case it was one of my plugins react-native-qrcode-svg, which needed to be updated in order to support the Expo 46 upgrade.
Uncaught TypeError: t.rgb is not a function
I created an angular application, built it, and am attempting to serve it
$ ng serve --prod --aot
This results in the following error in the console
Uncaught TypeError: t.rgb is not a function
at HO (color.js.pre-build-optimizer.js:227)
at GO (color.js.pre-build-optimizer.js:232)
at rgb.js.pre-build-optimizer.js:36
at RH (ramp.js.pre-build-optimizer.js:4)
at Module.zUnb (BrBG.js.pre-build-optimizer.js:16)
at f (bootstrap:78)
at Object.0 (index.js.pre-build-optimizer.js:26)
at f (bootstrap:78)
at t (bootstrap:45)
at Array.r [as push] (bootstrap:32)
The application does not display
When I build the application without minifying (the --prod flag) it works.
I am only seeing this issue when using D3
D3 ^5.9.1 .
Angular version 7.3.9 .
typescript 3.2.4
I have tried many combinations of versions with no luck.
It also runs successfully when I pass --optimization=false
I have been unable to debug this so far. This is very similar to this question however the solutions does not apply to this situation
Please let me know if any additional information would be useful.
Update your version of #angular-devkit/build-angular
(just found it here).
I have downgraded the version of d3 to 4.13.0 instead of 5.9.2.
npm install d3#4.13.0
The issue is d3-color.
Hope it helped.
So I am learning how to develop an MS Project add-in.
I was successful in deploying the tutorial (yayy!): https://learn.microsoft.com/en-us/office/dev/add-ins/quickstarts/project-quickstart
Then I replaced the html and the js code with the example code from here: https://dev.office.com/reference/add-ins/shared/projectdocument.gettaskbyindexasync
And it stopped working!
I started a new project from scratch. Again, as in the tutorial, "Office Add-in project using Jquery framework", "Javascript" as selected options.
And it still didn't work.
Error message from F12 dev tools:
jQuery.Deferred exception: 'app' is undefined ReferenceError: 'app' is undefined
at Anonymous function (eval code:14:13)
at mightThrow (https://localhost:3000/node_modules/jquery/dist/jquery.js:3534:10)
at Anonymous function (https://localhost:3000/node_modules/jquery/dist/jquery.js:3602:12) undefined
SCRIPT5009: 'app' is undefined
jquery.js (3827,3)
The error is spawned from the following row from the JS code:
app.initialize();
There is no "app.initialize();" in the tutorial. If I decide to delete this row, the error goes away (naturally), but then interacting with the functionality spawns another error message:
Unable to get property 'push' of undefined or null reference
Then I tried to define some 'app' Object.
I initialized it with
var app = Object.context;
The error then is:
Unable to get property 'initialize' of undefined or null reference
I am still trying to figure out, where this 'app' Object comes from. Or at least, how can I define it properly. Any ideas?
The client I am working with at the moment has requested I build a SSR React app which includes i18n. To solve this problem I tried to use NextJS and i18Next.
I managed to get react and apollo linked up without issue but when I tried to connect next + i18n I keep getting a very unhelpful 'an unexpected error' occured, error.
Inspecting the console I also see the following:
Cannot read property 'prototype' of undefined
TypeError: Cannot read property 'prototype' of undefined
at Object.inherits (http://localhost:3000/_next/1515592576452/page/index.js:36080:46)
at Object.<anonymous> (http://localhost:3000/_next/1515592576452/page/index.js:30216:6)
at Object.<anonymous> (http://localhost:3000/_next/1515592576452/page/index.js:30440:30)
at __webpack_require__ (http://localhost:3000/_next/1515592576452/manifest.js:714:31)
at fn (http://localhost:3000/_next/1515592576452/manifest.js:117:20)
at Object.<anonymous> (http://localhost:3000/_next/1515592576452/page/index.js:28246:12)
at Object.module.exports.exports.byteLength (http://localhost:3000/_next/1515592576452/page/index.js:28507:30)
at __webpack_require__ (http://localhost:3000/_next/1515592576452/manifest.js:714:31)
at fn (http://localhost:3000/_next/1515592576452/manifest.js:117:20)
at Object.<anonymous> (http://localhost:3000/_next/1515592576452/page/index.js:24501:18)
Also this warning but i'm not sure it's related
warning.js?e7f4ca8:33 Warning: Expected server HTML to contain a matching <div> in <div>.
I've also noticed that in ./libs/withData.js there is the following line:
enter code herestatic displayName = WithData(${getComponentDisplayName(
ComposedComponent
)})
My editor flags that as an invalid token but this code came from the nextjs example and there is no issue on that repo which suggests it's a typo.
I've included all the code that pertains to this issue in the following codepen project.
https://codepen.io/foxleigh81/project/editor/DnYJWB
OK I've sort of worked it out.
In a nutshell. I was thinking about this all wrong. I was thinking I was adding next to my react app, whereas the reality is more like I'm putting my react app inside next. I took it apart and rebuilt it from scratch, assembling the examples on the nextjs repo and it all worked.
I'm having some trouble working with the Bigcommerce stencil framework locally. I can get everything running properly, but when the page loads I get the following error:
Uncaught TypeError: url.indexOf is not a function
at jQuery.fn.init.jQuery.fn.load (eval at <anonymous> (bundle.js:1835), <anonymous>:9793:13)
at Object.init (eval at <anonymous> (bundle.js:1907), <anonymous>:345:17)
at HTMLDocument.eval (eval at <anonymous> (bundle.js:1907), <anonymous>:727:23)
at Function.each (eval at <anonymous> (bundle.js:1835), <anonymous>:368:19)
at jQuery.fn.init.each (eval at <anonymous> (bundle.js:1835), <anonymous>:157:17)
at jQuery.fn.init.$.fn.foundation (eval at <anonymous> (bundle.js:1907), <anonymous>:726:17)
at exports.default (eval at <anonymous> (bundle.js:2063), <anonymous>:6:14)
at Global.loaded (eval at <anonymous> (bundle.js:2249), <anonymous>:99:34)
at eval (eval at <anonymous> (bundle.js:1841), <anonymous>:718:13)
at iterate (eval at <anonymous> (bundle.js:1841), <anonymous>:262:13)
I used this post jquery 3.0 url.indexOf error to change the $(window).load(function... to $(window).on('load', function... like it said and that seemed to fix the problem.
However, the bundle.js file get recreated everytime you load the page and it automatically generates $(window).load(function which is what is causing the problem.
Does anyone know where I can find where this is getting generated so i can make sure it loads the proper $(window).on('load', function... INSTEAD of the $(window).load(function...
Let me know if you need anything else.
Thank you.
**** Below was added 01-09-2017 ****
I had someone install stencil locally and download the theme onto their computer and they didn't get any errors, and the page was working perfectly fine. I had him upload the file in the bigcommerce backend and apply it to the store since it was now working. I then downloaded the theme that was now working, and ran it locally on my computer and am getting the error again. Since I'm getting the error with this theme and the other person isn't, I assume that one of libraries i'm using are old and need to be updated. What do you think?
Thank you everyone for your help. Since I was getting the error and the person who freshly installed stencil offline today wasn't, I assumed it had something to do with my dependencies being out of date. I did the following and it solved the problem:
open git bash in the stencil directory
run npm install && jspm install
run stencil init
after stencil init runs, navigate to /assets/js and delete the bundle.js file.
rerun stencil init
run stencil start