I have a Vite + Vue.js 3 poryect in typescript and when I do npm run dev and enter in http://localhost:5173/ everithing works, but when I do npm run build && npm run preview and enter in http://localhost:4173/ the web give me a this javascript error TypeError: d.events is undefined, which is impossible to debug because of all code have been minimized.
I though that is something works in dev, it should be work in build + preview.
Am I missing something or skipping some mandatory step?
How can I build my project whiteout minimized?
UPDATE: I have this method in a store:
storemap.$subscribe((mutation, state) => {
if (map == null) return;
if (
mutation.events.key != "layer" ||
mutation.events.newValue == mutation.events.oldValue
)
return;
console.log("storemap.layer", storemap.layer);
map.addSelectedLayer(state.layer);
});
I have added in the second if this condition mutation.events == null || and TypeError: d.events is undefined disappeared (although the web is still not working).
It is very difficult debug in this way. Is there any better way?
Events is only available in dev: https://pinia.vuejs.org/api/interfaces/pinia.SubscriptionCallbackMutationPatchObject.html#events
Related
Has anyone faced this with Cypress?
When I run my test using cypress, a particular test, keeps failing because hidden element is not showing up but when I run the same test manually, I can see the element with the hidden element showing up as soon as I enter value.
There is a field in our UI where if I pass invalid characters, then it should immediately show the hidden error element using aria, but this is not happening when running through cypress.
Desired behavior
When I run the same above test manually on the same field the result I am getting is this.
Cypress test Result:
Actual Result:
Code :
I think with <pvd-system-message> you have a shadow-root preventing access to the text inside you element.
Try
cy.get('#address-cityNameError')
.should('have.attr', 'message')
.shadow() // inside shadow-root
.should('contain', 'City contains invalid characters')
In case there are other tests with this problem, add includeShadowDom option to your config.
Ref Configuration options
cypress.config.js
const { defineConfig } = require('cypress')
module.exports = defineConfig({
e2e: {
baseUrl: 'http://localhost:1234',
includeShadowDom: true
}
})
My script has some syntax error but instead of showing the error, PhantomJS doesn't display anything. Why Phantom JS isn't showing parse error if he script has errors?
In the following PhantomJS script (running via windows CMD), phantomJs hangs instead of showing error if there is a parsing error in the script.
var system = require('system');
var webpage = require('webpage').create();
console.log('starting script');
if (system.args.length === 0) {
console.log('no args');
} else {
system.args.forEach(function(arg,index){
console.log('arg is '+arg+' at '+index);
});
}
webpage.open('http://localhost:3000/cookie-demo',function(status){
if (status === 'success'){
console.log('success in opening page');
phantom.cookies.forEach(function(cookie,index){
for ( var key in cookie){
/*if instead of index, I use i as variable (undefined), the script just hangs!*/
console.log('[cookie:'+index+']'+key+'='+'cookie[key]');
}
});
phantom.exit(0);
}
else{
console.log('could not open the page');
phantom.exit(1);
}
});
If there is no syntax error in the script, I get following output
C:\Users\Manu\Documents\manu\programs\random>phantomjs --cookies-file=cookie-jar.txt phantomTest.js
starting script
arg is phantomTest.js at 0
success in opening page
[cookie:0]domain=cookie[key]
[cookie:0]expires=cookie[key]
[cookie:0]expiry=cookie[key]
[cookie:0]httponly=cookie[key]
[cookie:0]name=cookie[key]
[cookie:0]path=cookie[key]
[cookie:0]secure=cookie[key]
[cookie:0]value=cookie[key]
[cookie:1]domain=cookie[key]
[cookie:1]expires=cookie[key]
[cookie:1]expiry=cookie[key]
[cookie:1]httponly=cookie[key]
[cookie:1]name=cookie[key]
[cookie:1]path=cookie[key]
[cookie:1]secure=cookie[key]
[cookie:1]value=cookie[key]
But if there is a syntax error, I see nothing on the console and it doesnt exit
C:\Users\Manu\Documents\manu\programs\random>phantomjs --cookies-file=cookie-jar.txt phantomTest.js
PhantomJS version 2.0 and 2.1 will silently fail and hang if there are syntax errors. Use versions 1.9.8 or 2.5 betas. All downloads are here: https://bitbucket.org/ariya/phantomjs/downloads/
Better still migrate to Puppeteer which is a project with very similar API that uses headless Google Chrome underneath.
I'm trying on device make calls but device do not nothing...
This is my code, i'm using Appcelerator 4.4.0.201511241829, IOS 9.2
var dialog = Ti.UI.createAlertDialog({
cancel: 0,
buttonNames: ['Cancel', 'Ok'],
message: "Are you sure?"
});
dialog.addEventListener('click', function(e){
if (e.index !== e.source.cancel){
// IF WE ARE BUILDING FOR DEVELOPMENT PURPOSES - TRY CALLING A FAKE NUMBER
if(ENV_DEV){
Titanium.Platform.openURL('tel:00000000');
}
// ELSE IF WE ARE BUILDING PRODUCTION - THEN USE THE LISTED NUMBER
else if(ENV_PRODUCTION){
Titanium.Platform.openURL('tel:00000000');
}
}
});
dialog.show();
any help?
Your code for call a number seems correct. I suppose that nothing happen because ENV_DEV and ENV_PRODUCTION variables are not True, and so the two if statements are not satisfy.
First of all I suggest you to add an else statement for be sure that one one condition is satisfy. You can modify your code like this:
// IF WE ARE BUILDING FOR DEVELOPMENT PURPOSES - TRY CALLING A FAKE NUMBER
if(ENV_DEV){
Titanium.Platform.openURL('tel:00000000');
}
// ELSE IF WE ARE BUILDING PRODUCTION - THEN USE THE LISTED NUMBER
else if(ENV_PRODUCTION){
Titanium.Platform.openURL('tel:00000000');
}else{
Titanium.Platform.openURL('tel:00000000');
}
Secondly you can add a console log like this Ti.API.info("yourMsg") in each statements to check in which if you are.
I hope this is helpful
Your 'dial a number' code indeed seems correct. I would like to suggest you to structure your code a bit different, I'll give you an example from a recent project of mine.
You can configure phone numbers for your different environments(prod, dev) in your config.json(assuming you are working on an Alloy project, and not a Classic Titanium project), an example:
{
"global": {
"phoneNumber": tel:0032499001122"
},
"env:development": {
"phoneNumber": tel:0111111"
},
"env:test": {},
"env:production": {}, ..
This reduces the code in your click-handler to:
if (e.index !== e.source.cancel){
Ti.Platform.openURL(Alloy.CFG.phoneNumber);
}
Because you pass the environment when you start the application, you do not longer need to check the environment in your code.
Don't forget to add your environment flag(-D development) if you run your app via the CLI, eg.
titanium build -p ios -T simulator -D development
I've been struggling with this for a few hours now. I have the following in my gulpfile:
gulp.task('styles', function() {
gulp.src('C:\\TeamCity\\buildAgent\\work\\5003e8de5901599\\dev\\Content\\css\\less\\dealer-landing.less')
.pipe(less())
.pipe(gulp.dest('C:\\TeamCity\\buildAgent\\work\\5003e8de5901599\\dev\\Content\\css'));
});
I run 'gulp styles' which completes with no errors, but the .css is never created. I tried simply commenting out the middle line as seen below and that works as expected; the less file gets copied to the dest directory:
gulp.task('styles', function() {
gulp.src('C:\\TeamCity\\buildAgent\\work\\5003e8de5901599\\dev\\Content\\css\\less\\dealer-landing.less')
//.pipe(less())
.pipe(gulp.dest('C:\\TeamCity\\buildAgent\\work\\5003e8de5901599\\dev\\Content\\css'));
});
Any idea why gulp-less doesn't generate the css? If I use just less, the file is generated correctly.
I experienced this due to an undefined class in my less file.
I discovered the undefined class through logging.
Gulp may not throw errors unless you explicitly log them. To log, require gulp-util in your gulpfile:
var util = require('gulp-util');
And then add logging:
.pipe(less().on('error', util.log)),
Run gulp style to see the error (possibly an undefined class).
Fix it and your style task should generate the css.
We are using the superb WebdriverJS (with Selenium) to perform acceptance testing on our web app. Everything works fine, and our tests execute successfully when we use Firefox and Safari.
However, when we use PhantomJS, our tests fail with unhelpful errors. It's almost as if... Javascript isn't even running inside the client page! Something that would cause this would be if PhantomJS' javascript environment ran into errors. Unfortunately, I can't seem to find a way to access Javascript errors when using PhantomJS with WebdriverJS.
If we were using PhantomJS directly, we could simply do (from the PhantomJS site):
page.onError = function(msg, trace) {
console.log(msg);
trace.forEach(function(item) {
console.log(' ', item.file, ':', item.line);
});
}
Unfortunately, I don't know how to access this mysterious page object when using PhantomJS within WebdriverJS. Any thoughts?
You can actually access JS errors in your PhantomJS stdout log at INFO level.
$ phantomjs --webdriver 4444 --webdriver-loglevel=INFO
You can even push things forward by setting the log level to DEBUG and see what actually PhantomJS does to execute the commands you send through Webdriver / Ghostdriver.
I figured out a workable solution! Essentially, it involves using an onerror event handler to intercept (and store) the Javascript errors. Then, once the DOM is ready, we report the errors via hidden DOM elements. This allows Selenium to look for specific elements (e.g. ".javascript-errors"), which is something it's naturally quite good at. Thanks go to myriad other blog posts and SO questions for getting me to this point.
The code:
//For detecting and reporting Javascript errors via Selenium. Note that this should be in its own file to allow this code to reliably detect syntax errors in other files.
var errors = [];
//Handle all errors
window.onerror = function(message, url, line) {
errors.push({"message":message, "url":url, "line":line});
}
//Report errors visually via HTML once the DOM is ready
window.onload = function() {
if(errors.length==0)
return;
var div = document.createElement("div");
div.className = 'javascript-errors';
div.innerHTML = '';
var style = "position:absolute; left:-10000px; top:auto; width:1px; height:1px;"; //CSS to hide the errors; we can't use display:none, or Selenium won't be able to read the error messages. Adapted from http://webaim.org/techniques/css/invisiblecontent/
for(var i=0; i<errors.length; i++)
div.innerHTML += '<div class="javascript-error" style="' + style +'"><span class="message">' + errors[i].message.replace('<', '<').replace('>', '>') + '</span><br/><span class="url">' + errors[i].url + '</span><br/><span class="line">' + errors[i].line + '</span></div>';
document.body.appendChild(div);
}