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!
Related
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 ?
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
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.
I am developing a prototype web application. I used Yeoman to create an Angular application with Grunt, NPM, and Bower etc. The PouchDB API says you can enable debugging like so:
PouchDB.debug.enable('*');
This however requires the node debug module to be installed. I have tried installing it via bower and referencing it in my index.html but to no avail. How do I inject the debug module into Angular? Or is this function only available when the PouchDB is ran from a Node.js server?
EDIT:
The exact error I am getting is bellow. The line it complains about is: PouchDB.debug.enable('*');
TypeError: Cannot read property 'enable' of undefined
at new <anonymous> (http://localhost:9000/scripts/services/taskdb.js:13:15)
at invoke (http://localhost:9000/bower_components/angular/angular.js:4129:17)
at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:4140:23)
at Object.<anonymous> (http://localhost:9000/bower_components/angular/angular.js:3998:24)
at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:4129:17)
at Object.enforcedReturnValue [as $get] (http://localhost:9000/bower_components/angular/angular.js:3982:37)
at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:4129:17)
at http://localhost:9000/bower_components/angular/angular.js:3947:37
at getService (http://localhost:9000/bower_components/angular/angular.js:4088:39)
at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:4120:13)
angular.js:11413 TypeError: Cannot read property 'enable' of undefined
at new <anonymous> (http://localhost:9000/scripts/services/taskdb.js:13:15)
at invoke (http://localhost:9000/bower_components/angular/angular.js:4129:17)
at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:4140:23)
at Object.<anonymous> (http://localhost:9000/bower_components/angular/angular.js:3998:24)
at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:4129:17)
at Object.enforcedReturnValue [as $get] (http://localhost:9000/bower_components/angular/angular.js:3982:37)
at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:4129:17)
at http://localhost:9000/bower_components/angular/angular.js:3947:37
at getService (http://localhost:9000/bower_components/angular/angular.js:4088:39)
at invoke (http://localhost:9000/bower_components/angular/angular.js:4120:13) <div ng-view="" class="ng-scope">
When you use PouchDB, the debug module is already installed. You don't need to do anything except call PouchDB.debug.enable('*'). :)
Note that in PouchDB v7.0.0 loading a separate plugin is required for this.
So I am getting errors in my javascript for my angularJS app but I can't see where they are at. If I open the sources tab in the debugger and cant see any of my angularJS stuff. Here is an example of the error I'm getting in my console to prove it:
Error: InvalidCharacterError: DOM Exception 5
Error: An invalid or illegal character was specified, such as in an XML name.
at p.extend.attr (eval at <anonymous> (https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js:4:4994), <anonymous>:2:30181)
at Function.p.extend.access (eval at <anonymous> (https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js:4:4994), <anonymous>:2:15973)
at p.fn.extend.attr (eval at <anonymous> (https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js:4:4994), <anonymous>:2:26741)
at Object.Attributes.$set (eval at <anonymous> (eval at <anonymous> (https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js:4:4994)), <anonymous>:3775:28)
at eval (eval at <anonymous> (eval at <anonymous> (https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js:4:4994)), <anonymous>:4406:15)
at forEach (eval at <anonymous> (eval at <anonymous> (https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js:4:4994)), <anonymous>:140:20)
at mergeTemplateAttributes (eval at <anonymous> (eval at <anonymous> (https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js:4:4994)), <anonymous>:4401:7)
at applyDirectivesToNode (eval at <anonymous> (eval at <anonymous> (https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js:4:4994)), <anonymous>:4149:13)
at compileNodes (eval at <anonymous> (eval at <anonymous> (https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js:4:4994)), <anonymous>:3902:15)
at compile (eval at <anonymous> (eval at <anonymous> (https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js:4:4994)), <anonymous>:3840:29)
Notice all the in the stack trace? Any idea why this is happening? It used to work just fine...
You should check out the Chrome Extension for Angular called Batarang: https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk