PptxGenjs writeFile() not working in IE11 - javascript

While everything seems to work fine, when debugger hits pres.writeFile() function , i cant get the pptx at all. Mostly like a promise-base issue. Of course when testing with Chrome everything works as expetexted. Anyone face any similar issue before? Any suggestions? What's wrong with IE11?
var pres = new pptxgen();
function fetch_data(el) {
$.ajax({
url:`${document.querySelector('.off-to-see-the-wizard > .route').innerHTML}`,
contentType:"application/json",
dataType:"json",
success:function(response){
if(response)
{
var data=JSON.parse(response);
createPresentation(data,el);
}
else{
console.log(response)
}
},
error:function(err){
console.log(err);
}
})
}
function createPresentation(data){
var second_image="image/base64 ...."
var main_image="image/jpg;base64 ..."
function createMasterSlide(pres){
pres.defineSlideMaster({
title:'MASTER_SLIDE',
bkgd: 'FFFFFF',
objects:[
{'text':{text:`Test ${data._gateDescript} review`,options:{color:'000000',x:4.7,y:6.77,h:0.46,w:3.63, fontSize:14}}},
{'image':{x:0.3,y:6.47,w:1.14,h:0.83,data:second_image}}
],
slideNumber: { x:9.11, y:6.77 ,w:0.43 ,h:0.42}
})
}
function createMainSlide(pres){
pres.author="Team";
pres.layout='LAYOUT_4x3';
let main_slide=pres.addSlide();
main_slide.addImage({data:main_image, w:10, h:7.5})
main_slide.addText(`Project ID: ${data._p.Id}\nProject Name: ${data._p.Name}`, {color:'D55C00' ,x:0.47, y:3.56, w:5.0, h:0.7, fontSize:24})
main_slide.addText(`Review: Test ${data._gateDescript} \nDate: ${Date.now()} `)
}
createMasterSlide(pres);
createMainSlide(pres);
pres.writeFile('Presentation.pptx');
}
Quick Update
Error :
Please see image attached. Error
Ι get to know that jszip has an issue with ie11
To be specific pptxgenjs make use of jszip , that runs generateInternalStream. In the scope of this function something breaks out. Any clues?

Which version of jszip are you using? It seems that pptxgenjs#3.1.1 uses jszip v3.2.1 for default.
I found some have the same error when using jszip version 3.2.x in IE and Edge. You could refer to this thread. The last version not having this problem is 3.1.5. You could try with jszip version 3.1.x.

Quick update for your reference .
The issue was finally resolved by installing jszip 3.1.5 version.
Its stable and functionally using IE11.
So you should install this specific version
npm install jszip#3.1.5 --save
Then please navigate to node modules , get to copy all jszip node module.
Navigate back to pptxgenjs node module. Navigate into pptxgenjs--->node_modules and overwrite jszip with the version you have installed and copied previously.
So pptxgenjs lib would use jszip 3.1.5 version .
Issue resolved.
Thanks everyone :)

Related

Uncaught InvalidData: data did not match any variant of untagged enum ArgsEnum

I'm enthusiastic about Deno so I'm giving it a try. Found a tutorial on building a REST API here.
So, when I'm trying to run it, I get this InvalidData error:
error: Uncaught InvalidData: data did not match any variant of untagged enum ArgsEnum
at unwrapResponse ($deno$/ops/dispatch_json.ts:43:11)
at Object.sendAsync ($deno$/ops/dispatch_json.ts:98:10)
at async Object.connect ($deno$/net.ts:216:11)
at async Connection.startup (https://deno.land/x/postgres/connection.ts:138:17)
at async Client.connect (https://deno.land/x/postgres/client.ts:14:5)
at async Database.connect (file:///Users/svenhaaf/git/deno/logrocket_deno_api/db/database.js:17:5)
Now, it looks to me that something is wrong when trying to connect to the database, but I can't really figure out what.
What does this InvalidData error mean? How should I fix this?
FYI my deno --version prints:
deno 0.42.0
v8 8.2.308
typescript 3.8.3
Code:
I cloned the repo from https://github.com/diogosouza/logrocket_deno_api, and in config.js, I edited line 1 from const env = Deno.env() to const env = Deno.env, since it looks like Deno.env became an object instead of a method.
The tutorial is not using versioned URLs, and deno-postgres version that is being used is not compatible with v0.42.0, since https://deno.land/x/postgres/mod.ts is pulling from master
Change db/database.js to import from https://deno.land/x/postgres#v0.3.11/mod.ts, since v0.3.11 is the correct version for Deno v0.42.0
import { Client } from "https://deno.land/x/postgres#v0.3.11/mod.ts";
Remember to always use the version in the URL if you don't want the code to stop working when a new Deno or package version is released.

Possible Unhandled Promise Rejection (id: 0): Error: "getLoginData" is read-only

Destructuring from props is not working inside an async function while it's working fine if I use it using this.props.
This is for a react-native app already in production which suddenly started giving this error 2 days back.
I've tried upgrading babel using this
But no success so far.
If I use this.props.getLoginData instead, it works fine
If I use following function, it's erroneous:
yo = async () => { // with async
const { getLoginData } = this.props; // error
};
While the following function works fine:
yo = () => { // without async
const { getLoginData } = this.props;
console.log(getLoginData); // works fine
};
This also works fine:
yo = async () => { // with async
console.log(this.props.getLoginData); // works fine
};
I expect both of the scenarios to run fine.
Please clone and run this repo to reproduce this bug.
Please find the steps to run the project and environment info in README.md.
P.S.: You will find the error in console( Press ⌘⌥I )
It looks like a dependency of babel is the cause of the issue in my case.
When I look in my package-lock.json, and search for plugin-transform-regenerator I see version 7.4.5. Locking the version to 7.4.4 by adding it to my package.json allows me to build without issue.
This problem would have been easier to track down if I was not ignoring my package-lock.json.
In summary,
npm i -E #babel/plugin-transform-regenerator#7.4.4
I've encountered the same problem.
Using babel version 7.4.4 didn't help me, but I've found another solution that worked - wrapping the destructure in try-catch block.
I still don't know why this problem happens though - will update when I do.
________UPDATE_______
Eventually, the solution #makenova offered worked (Thanks man!).
What I had to do is to remove all node modules + package-lock, then run
npm i -E #babel/plugin-transform-regenerator#7.4.4
and after that run
npm i
Before that I've used yarn and it didn't do the trick.
Update:
nicolo-ribaudo fixed the issue here: https://github.com/facebook/regenerator/pull/377
An alternative solution is to force the regenerator-transform to use ~0.13.0 as suggested by nicolo-ribaudo.
If you are using yarn, add this to your package.json:
"resolutions": {
"regenerator-transform": "~0.13.0"
}
If you are using npm:
Install it as a devDependency
Delete package-lock.json
Re-install dependencies
I've a async function, when destructuring and save const show me error: Possible Unhandled Promise Rejection (id: 0): Error: “userOperations” is read-only , this worked for me (change let by const):
https://github.com/facebook/regenerator/issues/375#issuecomment-527209159

Missing module exports in IE11/Edge

I'm having trouble getting an npm module to work since it was changed to ES2015.
I have an ES2015 app that is bundled by browserify and transformed with babelify. I am trying to upgrade an npm module named credit-card for credit card validation, which was changed from ES5 to ES6 in the current version. The problem starts with IE11/Edge. The code works fine on Chrome. Here's how the module is imported in the transformed app (babel'd code):
var _this = this;
var _creditCard = require('credit-card');
var _creditCard2 = _interopRequireDefault(_creditCard);
Here's a piece of code calling it:
this.validateCreditCard = function () {
var ccNumber = _this.account_number_credit_card.value.replace(/\D/, '');
_this.creditCardValidation = {
accountHolder: _this.account_holder_credit_card.value.replace(/\W/g, '').length >= 2,
cvc: _this.account_cvc_credit_card.value.replace(/\D/g, '').length > 2,
accountNumber: _creditCard2.default.isValidCardNumber(ccNumber, _creditCard2.default.determineCardType(ccNumber, { allowPartial: true }))
};
return _underscore2.default.all(_underscore2.default.values(_this.creditCardValida tion));
};
Now on Chrome this works without a problem. On IE however, the exported functions of the credit card module are missing.
Here's a printscreen of a console log of the module in IE
And here's Chrome
It looks like defaults is completely missing in IE. Is this a known issue? Do any of you have encountered this problem before and can give me some hints? Any pointers on how I could investigate this issue to understand what is going wrong and how I could fix it?
Stepping through the require() in IE11 Debugger i found out that there was a problem with Object.assign being undefined in IE11. After some searching I found this thread. The answer in this thread worked out in the end. I needed to add polyfill to my browserify bundle and enable the "transform-es2015-classes" plugin with the opt loose: true (See this thread for code).

Cordova 3.4.0 : File Api GetFile Abort Error

Recently upgraded Cordova framework of my app to 3.4.0
I used to write a file within the Documents directory of iOS app.
the file access code snippet is as shown below.
var path = "/var/mobile/Applications/MyApp/Documents/tempDir/txtFile.txt";
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,
function(fileSystem){
fileSystem.root.getFile(path,{create:true, exclusive: false},
function(fileEntry){
console.log('gotFileEntry');
);
},
function(){
console.log('gotFileEntry fail');
}
);
},
function(){
console.log('fail');
}
);
In the newer version of cordova(3.4.0) it is failing to get the fileentry and throwing an error code = 3 i.e ABORT_ERR
Please help me on this. As my complete module depends on this.
Any help is greatly appreciated. thanks in advance.
after digging Cordova FILE plugin, found out that the file path passed should be relative in the latest version. refer here

How to set the source path in Ace editor

I am embedding Ace locally offline and so am not using the hosted package and am subject to the same origin policy.
How do you tell ace to look in a particular folder for it's source of modes, themes and workers?
You used to be able to use:
editor.config.set("modePath", "Scripts/Ace");
editor.config.set("workerPath", "Scripts/Ace");
editor.config.set("themePath", "Scripts/Ace");
But that doesn't work in the latest version.
How can this be achieved?
Thanks in advance
I had a similar issue and you can actually let Ace know what's the base folder path this way:
ace.config.set("basePath", "/Scripts/Ace");
This work with the latest version I have, v1.1.3
The simple way to achieve the same thing is to embed all scripts from the Ace source folder into the web page manually, excluding the worker-xxx.js files. This is still a bodge though.
The answer from #rorofromfrance solve my problem of the base folder path on loading Ace script on the fly:
$.getScript($('#js')[0].href, function() {
$('.theme').change(function() {draw.change();});
$.getScript("/ace/src-min/ace.js", function() {
if (!editor) {ace.config.set("basePath", "/ace/src-min"); draw.editor();};
$.getScript("/underscore/underscore-min.js", function() {
editor.getSession().on('change', _.debounce(function() {draw.diagram();}, 100));
$.getScript("/tensorflow/tf.min.js", function() {
$.ajax({
type: "GET",
dataType: "xml",
url: "/sitemap.xml",
success: draw.getJSON(xml)
});
});
});
});
});
I have a similar requirement in a current project of mine.
I created an Angular project with all the files bundles in a single directory without access to node_modules in runtime, using a remote package for the ace basePath was out of the question.
Then I stumbled upon the Ace embedding guide and it clued me that I can import the relevant modes and themes straight from my dependencies and just use new instead of a path string.
https://ajaxorg.github.io/ace-api-docs/index.html#embedding-ace
from the docs:
var JavaScriptMode = ace.require("ace/mode/javascript").Mode;
editor.session.setMode(new JavaScriptMode());
So I just imported the mode and theme I went and provided them straight to Ace
import DraculaTheme from "ace-builds/src-noconflict/theme-dracula";
import JavaScriptMode from "ace-builds/src-noconflict/mode-javascript";
const aceEditor = ace.edit(this.editor.nativeElement);
aceEditor.session.setValue("function greet() {\n\tconsole.log('hello world');\n}\n");
aceEditor.setTheme(DraculaTheme);
aceEditor.session.setMode(new JavaScriptMode.Mode());
Notice that I didn't set any basePath !!!

Categories