Errors when using webpack/Typescript

[Vivihung]

I hit 2 errors in my project where we use webpack/Typescript.
(Note: I'm using the library in a web page)
The first error happened when building my project,

ERROR in ./~/pptxgenjs/dist/pptxgen.js

Module not found: Error: Cannot resolve module 'fs' in c:\myproj\node_modules\pptxgenjs\dist
 @ ./~/pptxgenjs/dist/pptxgen.js 2536:10-23

ERROR in ./~/image-size/lib/index.js

Module not found: Error: Cannot resolve module 'fs' in c:\myproj\node_modules\image-size\lib
 @ ./~/image-size/lib/index.js 3:9-22

ERROR in ./~/image-size/lib/types/tiff.js

Module not found: Error: Cannot resolve module 'fs' in c:\myproj\node_modules\image-size\lib\types
 @ ./~/image-size/lib/types/tiff.js 6:9-22

By referring to this post, I put the workaround in my webpack config
node: { fs: "empty" }

Then I hit another error when running my page in browser
Uncaught (in promise) TypeError: callback is not a function at eval (eval at <anonymous> (main.js:8466), <anonymous>:193:104)

It comes from this line of code in pptxgen.js
zip.generateAsync({type:'nodebuffer'}).then(function(content){ fs.writeFile(strExportName, content, callback(strExportName)); });

So, I comment it out as the following to bypass the error

/*
if ( NODEJS ) {
	zip.generateAsync({type:'nodebuffer'}).then(function(content){ fs.writeFile(strExportName, content, callback(strExportName)); });
}
else { */
	zip.generateAsync({type:'blob'}).then(function(content){ writeFileToBrowser(strExportName, content, callback); });
// }

Is there any way I can resolve the second error without changing PptxGenJS code?

[gitbrent]

Hi @Vivihung ,

Thanks for reporting this. The callback issue affects Node.js as well as webpack.

Please try your build again with the newest codebase and let me know how it goes.

[Vivihung]

Thanks for the quick fix!
Could you please release 1.4.0 to npm so my project can consume it?

[gitbrent]

Hi @Vivihung ,

Version 1.4.0 has been released to NPM.

Please let me know if you have any further issues.

[HoangLong93]

Hi @gitbrent ,
After updating to angular 6, I'm also having 'Error: Cannot resolve module 'fs' ' in multiple file in the image-size and pptxgenjs modules.
It seems like the new Angular 6 doesn't inject module fs anymore which might cause this problem. Is there a way to work around this?
Thanks

[gitbrent]

Hi @HoangLong93

What version of PptxgenJS are you using?

PptxGenJS = require("pptxgenjs");
var pptx = new PptxGenJS();
console.log(pptx.version);

[akushylun]

Have the same issue as @HoangLong93
Version - 2.1.0.

Mistakes:

1. Can't resolve 'fs'
2. Can't resolve 'path'
3. Can't resolve 'stream'

Will be great, if it is a work around.
Thanks.

[HoangLong93]

Hi @gitbrent ,
Yes I'm using v2.1 also.

Thanks

[gitbrent]

@akushylun @HoangLong93

Okay, thanks for checking.

Version 2.2.0 has the newest Node-detection code that fixes these unresolved libraries.

It'll be released this weekend...

[HoangLong93]

Hi @gitbrent ,
I just update to the new version 2.2.0, however I still see the same error with Angular 6. Can you have a look?

ERROR in ./node_modules/image-size/lib/index.js
Module not found: Error: Can't resolve 'fs'

ERROR in ./node_modules/image-size/lib/types/tiff.js
Module not found: Error: Can't resolve 'fs'

ERROR in ./node_modules/image-size/lib/index.js
Module not found: Error: Can't resolve 'path'

ERROR in ./node_modules/jszip/lib/readable-stream-browser.js
Module not found: Error: Can't resolve 'stream'
Failed to compile.

Thanks for your help

[gitbrent]

Hi @HoangLong93 ,

Well crud, so much resolving this with 2.2.0...

Since Angular utilizes the single package.json configuration file that Node uses, the library dependencies are not accurate. Including libraries built for client/console (e.g. image-size) result in errors as fs won't exist.

Since the issue is in the compilation phase, i'd recommend removing image-size from the dependencies package.json file. However, JSZip is needed, so i'm unsure what to recommend there... is a different version available that works with browsers, surely some other Angular projects use JSZip.

[HoangLong93]

@gitbrent , well that's unfortunate.
Thanks for your effort and info. I'll try to find a way to work around it then.
Best,

[gitbrent]

@HoangLong93

Please let me know what you find - i'd like to be able to have the library work with Angular (and create some sort of guide).

[jcanaan88]

Hi. I think I'm having a relate issue.

I ran npm install pptxgenjs, then I tried following the library integration example here:
https://gitbrent.github.io/PptxGenJS/docs/integration.html#angular-example

I just created a new TS file with just the example code in it. I import it into one of my component.ts files and try to call the generatePPT function, and I get the following messages:

ERROR in ./node_modules/image-size/lib/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\user\Documents\angularApps\playground\value-added-selling\node_modules\image-size\lib'
ERROR in ./node_modules/image-size/lib/types/tiff.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\user\Documents\angularApps\playground\value-added-selling\node_modules\image-size\lib\types'
ERROR in ./node_modules/image-size/lib/index.js
Module not found: Error: Can't resolve 'path' in 'C:\Users\user\Documents\angularApps\playground\value-added-selling\node_modules\image-size\lib'
ERROR in ./node_modules/jszip/lib/readable-stream-browser.js
Module not found: Error: Can't resolve 'stream' in 'C:\Users\user\Documents\angularApps\playground\value-added-selling\node_modules\jszip\lib'

Removing "image-size": ">=0.5.1", didn't seem to change anything either unfortunately.

I've now done two things that seems to have potentially resolved the image-size and jszip problems.

npm i stream to solve jszip problem

then from this thread:
angular/angular-cli#8272

I added

"browser": {
    "fs": false,
    "path": false,
    "os": false
  }

to the image-file library package.json file.

I'm no longer getting the errors above, however now I'm getting a console error:

"Uncaught TypeError: PptxGenJS is not a constructor"

I change my code now to say:

const pptx = new PptxGenJS.constructor();

And I get "pptx.setBrowser is not a function... addNewSlide is not a function... etc.

It's like I'm not actually importing PptxGenJS or something.

This is my code:

declare var require: any;
var PptxGenJS = require('pptxgenjs');
const pptx = new PptxGenJS.constructor();

pptx.setBrowser(true);

export function generatePPT() {
    const slide = pptx.addNewSlide();
    const opts = { x: 1.0, y: 1.0, font_size: 42, color: '00FF00' };
    slide.addText('Hello World!', opts);
    pptx.save();
}
```
`

If I don't declare require, it throws an error on that as well. 

[jcanaan88]

Ok. I managed to get it to work. Couple of things I did:

Module not found: Error: Can't resolve 'stream' in 'C:\Users\user\Documents\angularApps\playground\value-added-selling\node_modules\jszip\lib'

in angular cli, I ran npm i stream.

To resolve

ERROR in ./node_modules/image-size/lib/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\user\Documents\angularApps\playground\value-added-selling\node_modules\image-size\lib'
ERROR in ./node_modules/image-size/lib/types/tiff.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\user\Documents\angularApps\playground\value-added-selling\node_modules\image-size\lib\types'
ERROR in ./node_modules/image-size/lib/index.js
Module not found: Error: Can't resolve 'path' in 'C:\Users\user\Documents\angularApps\playground\value-added-selling\node_modules\image-size\lib'
ERROR in ./node_modules/jszip/lib/readable-stream-browser.js

Added the following to the image-size/package.json file

browser": {
    "fs": false,
    "path": false,
    "os": false
  }

To resolve the warning I received for not being able to find fs in pptxgenjs, I added the code above to the pptxgenjs/package.json file as well

To resolve the issue with "require," I followed these steps:
https://stackoverflow.com/questions/31173738/typescript-getting-error-ts2304-cannot-find-name-require

Now the following seems to work as intended:

var PptxGenJS = require('pptxgenjs');
const pptx = new PptxGenJS();

pptx.setBrowser(true);

export function generatePPT() {
    const slide = pptx.addNewSlide();
    const opts = { x: 1.0, y: 1.0, font_size: 42, color: '00FF00' };
    slide.addText('Hello World!', opts);
    pptx.save();
}

[gitbrent]

Thanks @jcanaan88 .

I've added the browser element to the package.json and i've made several other changes to Node detection lately, so i'm hopeful this issue will improve shortly.