WebPack - Issue : Error: Can't resolve 'fs'

[plhosk]

Thank you for submitting an issue to jsPDF. Please read carefully.

Are you using the latest version of jsPDF?

The issue occurs after upgrading from 1.3.5 to 1.4.0 (npm version). My project uses Webpack to build a bundle.

Have you tried using jspdf.debug.js?

I did. the error occurs on line 5387:14-27 (var fs = require('fs');)

  		var nodeJSMethod = function nodeJSMethod(path, sync, callback) {
  			sync = sync || true;
  			var fs = require('fs');
  			if (sync === true) {
  				var data = fs.readFileSync(path).toString();
  				return data;
  			} else {
  				fs.readFile('image.jpg', function (err, data) {
  					callback(data);
  				});
  			}
  		};

Steps to reproduce

It happens when I use webpack to build my project

Ideally a link too. Try fork this http://jsbin.com/rilace/edit?html,js,output

What I saw

ERROR in ./node_modules/jspdf/dist/jspdf.debug.js
Module not found: Error: Can't resolve 'fs' in '.\node_modules\jspdf\dist'
 @ ./node_modules/jspdf/dist/jspdf.debug.js 5387:14-27

What I expected

Expected webpack to complete without error as it did in v1.3.5

[one-pieces]

+1

[Uzlopak]

Duplicate of #1753

Do you have any possible solutions? I guess that it is not the first time such an issue exists?

[mesiora]

+1

[Uzlopak]

Seems like you have to modify your webpack configuration

https://jlongster.com/Backend-Apps-with-Webpack--Part-I

So the solutions seems to be
webpack-contrib/css-loader#447 (comment)

[ZeevKatz]

+1

[Uzlopak]

https://webpack.js.org/configuration/node/

[ZeevKatz]

I'm using the latest angular cli version, so webpack configuration is not a good solution for me.

[MrRio]

I think the issue is as we’ve added node support is it’s using that instead during the webpack build. When it should be using the browser functions. We may have to detect webpack...

On Tue, 22 May 2018 at 10:38, Zeev Katz ***@***.***> wrote: I'm using the latest angular cli version, so webpack configuration is not a good solution for me. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1764 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAC5s5kXAKFVuLQBHfjJztV-Oa3dM6B7ks5t09yEgaJpZM4UH0Jg> .

-- James Hall Director Parallax Agency Ltd M. 07894950320

[Uzlopak]

@MrRio

I think the problem is, that webpack tries to resolve fs, because it scans the js-files. This can be fixed by the mentioned webpack configuration. This seems to be standard solution provided by webpack, as it is part of their documentation.

What has to be done in an angular cli-version... well. I dont know.

[Uzlopak]

Well an ugly "hack" would be
var fs = require('fs'); to var fs = Function("return requ" + "ire('fs')")();

[crazyx13th]

for webpack you can use

node: {
   fs: 'empty'
},

[inthegarage]

@arasabbasi At the moment I can't get angular to work with this version, and I don't want to eject my project into a webpack one.
It's possible it doesn't work anymore. If anyone has a solution, then please post here.

[lordgreg]

Same issue. We cannot update our projects to Angular6 because of this issue. Would appreciate any workaround.

[inthegarage]

@lordgreg You can take a look here:
angular/angular-cli#10681 (comment)

The issue is using libraries that angular 6 isn't "built" for (namely fs). Looks like its affecting a lot of projects - gettext to name one.

I couldn't get the "patch" fix to work yet. Will spend more time on it at some point. will currently stay at Angular 5.

[lordgreg]

Thank you for your suggestion @inthegarage. I hope the issue actually lies in the support for Node which was added recently, as said by @MrRio. I'll wait for the update, otherwise its too much hacking involved 👍 💯

[Uzlopak]

removed with Commit 7a1089a

Will be part of v. 1.4.1

[LordShiroe]

For now, a hack for Angular CLI 6 is this. And the reason why is not supported anymore, as stated in this comment is that they are trying to discourage libraries that run in the browser of using node globals.

[Uzlopak]

Well it would have been good to know these things. But it makes sense in some way for webpack devs...

[nbijl-worthit]

@arasabbasi when can we expect v1.4.1?

[yin-xie]

Whether v1.4.1 can resolve this bug?

[Snowsoul]

when can we expect v1.4.1? I cannot build the app because of this issue.

[Uzlopak]

Because people are still posting

[mohitpanjwani]

I think you should release a build with this fix if possible as most of the people use webpack and this is a blocker.

Thank you for the work so far 🚀

[Uzlopak]

I am aware of that. Another big bug/feature has to be fixed and then i will recommend to James to release.

[Uzlopak]

v. 1.4.1 released

[MrZhouZh]

resolve node native module error.

Module not found: Error: Can't resolve 'module' in '/electron/node_modules/fflate/esm'

ENV

Electron: ^22.3.4
jspdf: ^2.5.2
webpack: ^5.65.0