Error with Bigcommerce bundle.js stencil theme - javascript

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

Related

Vue-select: Error in render function: (found in <VSelect>)

I'm working on an old project that has the next:
Vue: 2.1.10
Webpack: 1.14.0
Vue select: 2.6.4
So, I want to upgrade Vue Select to the next version(3.0.0) and maybe upgrade it up to date the get all the features. But when I upgrade it I get the next error in the dev console:
[Vue warn]: Error in render function: (found in <VSelect>)
TypeError: t._g is not a function
at Proxy.eval (eval at <anonymous> (app.js:67:5888), <anonymous>:1:18314)
at VueComponent.Vue._render (eval at <anonymous> (app.js:12:28224), <anonymous>:3609:22)
at VueComponent.updateComponent (eval at <anonymous> (app.js:12:28224), <anonymous>:2158:21)
at Watcher.get (eval at <anonymous> (app.js:12:28224), <anonymous>:2469:25)
at new Watcher (eval at <anonymous> (app.js:12:28224), <anonymous>:2452:12)
at mountComponent (eval at <anonymous> (app.js:12:28224), <anonymous>:2162:17)
at VueComponent.Vue$3.$mount (eval at <anonymous> (app.js:12:28224), <anonymous>:7252:10)
at VueComponent.Vue$3.$mount (eval at <anonymous> (app.js:12:28224), <anonymous>:9301:16)
at init (eval at <anonymous> (app.js:12:28224), <anonymous>:2931:13)
at createComponent (eval at <anonymous> (app.js:12:28224), <anonymous>:4656:9)
Vue select import
import vSelect from 'vue-select'
Vue.component('v-select', vSelect)
I'm trying with the example that Vue Select says
<v-select :options="['Canada', 'United States']"></v-select>
The v-select component is mounted but not rendered. If I check it from the Vue Dev Tools Panel I can see it and check everything in the v-select component.
I saw that Vue Select from 2.6.4 to 3.0.0 upgraded Webpack to 4. I don't know if that is the problem and is incompatible with my current project.
Also, I checked the documentation https://vue-select.org/guide/upgrading.html but nothing seems like it fits with my problem.
I think that if I upgrade Webpack and Vue could work, but this option at the moment is not possible and according to the Vue Select documentation, the component is compatible with Vue 2.x.x
Has anyone else experienced this or something similar?
Thank you in advance! I appreciate your help!

Uncaught TypeError: t.rgb is not a function

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.

Blueimp Gallery with Angular 2+

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 ?

gulp-uglify not working

Here is my repository
https://github.com/shellwe/QA_WP_Template
If you just needed to see the code snippet; here it is
gulp.task('uglify', function() {
return gulp.src('js/all.min.js')
.pipe(uglify())
.pipe(gulp.dest('js/'));
});
I am running "gulp uglify" and I am getting the following errors.
events.js:160
throw er; // Unhandled 'error' event
^
Error
at new JS_Parse_Error (eval at <anonymous> (C:\Users\sh3240\Documents\My Web Sites\wordpress\wp-content\themes\QA_WP_Template\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:1534:18)
at js_error (eval at <anonymous> (C:\Users\sh3240\Documents\My Web Sites\wordpress\wp-content\themes\QA_WP_Template\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:1542:11)
at croak (eval at <anonymous> (C:\Users\sh3240\Documents\My Web Sites\wordpress\wp-content\themes\QA_WP_Template\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2089:9)
at token_error (eval at <anonymous> (C:\Users\sh3240\Documents\My Web Sites\wordpress\wp-content\themes\QA_WP_Template\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2097:9)
at unexpected (eval at <anonymous> (C:\Users\sh3240\Documents\My Web Sites\wordpress\wp-content\themes\QA_WP_Template\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2103:9)
at semicolon (eval at <anonymous> (C:\Users\sh3240\Documents\My Web Sites\wordpress\wp-content\themes\QA_WP_Template\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2123:56)
at simple_statement (eval at <anonymous> (C:\Users\sh3240\Documents\My Web Sites\wordpress\wp-content\themes\QA_WP_Template\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2314:73)
at eval (eval at <anonymous> (C:\Users\sh3240\Documents\My Web Sites\wordpress\wp-content\themes\QA_WP_Template\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2183:19)
at eval (eval at <anonymous> (C:\Users\sh3240\Documents\My Web Sites\wordpress\wp-content\themes\QA_WP_Template\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2136:24)
at eval (eval at <anonymous> (C:\Users\sh3240\Documents\My Web Sites\wordpress\wp-content\themes\QA_WP_Template\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2904:23)
Most examples I see had concat and uglify in one process but since the concat part was working I broke them apart to show that. I know its something wrong with uglify, I just can't figure out what I am doing wrong.
The error you are getting doesn't really explain much... However, according to the little "documentation" on npm.js of gulp-uglify,
To help properly handle error conditions with Node stream, this project recommends the use of pump
You can read up on gulp-uglify and pump.
So, I tried the following:
# grab pump
npm install pump --save-dev
Then, in the gulpfile.js, I did the following:
gulp.task('uglify2', function (cb) {
pump([
gulp.src('./js/all.min.js'),
uglify(),
gulp.dest('./js/')
],
cb
);
});
The error that I am getting, which by the way, is a lot nicer than the error you are getting, is the following:
The problem seems to be on line 191, which suggests that there is something wrong with your code, rather than your gulp task.

Meteor crashing while building

I am building a fairly rather simple Meteor project on Windows 8, and despite both re-installing meteor, and manually re-setting the library, after the app has run for a short time meteor crashes and will not restart. Meteor is also unable to run reset, and I haven't been able to identify exactly what it is that causes this arise in the first place. There is a consistent error I get from the ccorcos:swipe, but runtime errors should not be crashing meteor right?
I have tried changing/removing the files in .meteor/client.
My question is both to identify what could be causing this particular error (what does "stat" mean in this context? other error messages I have found have while searching have been far more useful) as well as generally if there is a faster way of hard resetting a meteor project than running meteor create proj_name in a new folder and manually moving over the source files.
The stacktrace is below.
The packages I use are
meteor-platform
insecure
bevanhunt:leaflet
mdg:geolocation
accounts-facebook
service-configuration
less stevezhu:lodash
ccorcos:swipe
iron:router
underscore
coffeescript
accounts-ui
accounts-password
C:\Users\Fjafjan\Documents\GitHub\progress>meteor run
[[[[[ C:\Users\Fjafjan\Documents\GitHub\progress ]]]]]
=> Started proxy.
=> Started MongoDB.
C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\dev_bundle\lib\node_modules\fibers\future.js:245
throw(ex);
^
Error: EPERM, stat 'C:\Users\Fjafjan\Documents\GitHub\progress\.meteor\local\build\programs\web.browser\packages'
at Object.Future.wait (C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\dev_bundle\lib\node_modules\
fibers\future.js:398:15)
at Object.wrapper [as stat] (C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\files.js:1350:24
)
at C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\files.js:454:43
at Array.forEach (native)
at Function._.each._.forEach (C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\dev_bundle\lib\node_m
odules\underscore\underscore.js:79:11)
at Object.files.cp_r (C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\files.js:444:5)
at C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\files.js:456:13
at Array.forEach (native)
at Function._.each._.forEach (C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\dev_bundle\lib\node_m
odules\underscore\underscore.js:79:11)
at Object.files.cp_r (C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\files.js:444:5)
at C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\files.js:456:13
at Array.forEach (native)
at Function._.each._.forEach (C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\dev_bundle\lib\node_m
odules\underscore\underscore.js:79:11)
at Object.files.cp_r (C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\files.js:444:5)
at Object.files.rename (C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\files.js:1401:13)
at Object.files.renameDirAlmostAtomically (C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\fi
les.js:810:11)
at [object Object]._.extend.complete (C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\builder
.js:482:11)
at C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\bundler.js:1933:13
at C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\bundler.js:2147:20
at C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\buildmessage.js:264:13
at [object Object]._.extend.withValue (C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\fiber-
helpers.js:115:14)
at C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\buildmessage.js:257:29
at [object Object]._.extend.withValue (C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\fiber-
helpers.js:115:14)
at C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\buildmessage.js:255:18
at [object Object]._.extend.withValue (C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\fiber-
helpers.js:115:14)
at C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\buildmessage.js:246:23
at [object Object]._.extend.withValue (C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\fiber-
helpers.js:115:14)
at Object.capture (C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\buildmessage.js:245:19)
at Object.exports.bundle (C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\bundler.js:2040:31)
at C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\run-app.js:554:24
at time (C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\profile.js:231:28)
at Function.run (C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\profile.js:377:12)
at bundleApp (C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\run-app.js:544:34)
at [object Object]._.extend._runOnce (C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\run-app
.js:591:35)
at [object Object]._.extend._fiber (C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\run-app.j
s:821:28)
at C:\Users\Fjafjan\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\tools\run-app.js:402:12
As I'm new to programming, I can't tell you why this happens, but I was having the exact same problem. If you install a package using meteor add (package) while you have your app open in a code editor, it causes the app to break. Try closing the editor and refreshing everything. It worked for me.
Kill the meteor processes and reset the project.
ps aux | grep meteor
kill -1 [PID_OF_METEOR_PROC]
cd /path/to/project/
meteor reset
Replace [PID_OF_METEOR_PROC] with the actual PID or run once for each PID, and use the correct path to your meteor project

Categories