Cannot resolve module 'fs'

[cancan101]

I am using webpack to built a bundle that has tiff.js. I have not installed fs as I plan to use in browser however I see the following warning / error:

ERROR in ./~/tiff.js/tiff.min.js
Module not found: Error: Cannot resolve module 'fs' in /Users/alex/git/project/node_modules/tiff.js
 @ ./~/tiff.js/tiff.min.js 103:7-20 1056:331-344

[seikichi]

Hi @cancan101

Thank you for using tiff.js. Please try node: {fs: 'empty'} option as follows:

main.js

const tiff = require('tiff.js');
console.log(tiff);

webpack.config.js

module.exports = {
  target: 'web',
  entry: './main.js',
  output: {
    filename: 'bundle.js',
  },
  node: {
    fs: 'empty',
  },
};

[cancan101]

yes, that works!

[prabh-62]

angular/angular-cli#9827
Angular CLI doesn't expose webpack config.

@seikichi can you help me in creating a separate file for browser environment? and then it can referenced in package.json like this:

{
	"browser": "tiff.browser.js",
	"typings": "tiff.d.ts"
}

[pahuta]

Hot fix, just add it to the "package.json":

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

[thangaraj80]

Hi @seikichi ,
Iam using Angular 6
"@angular/compiler-cli": "^6.0.2",
"typescript": "~2.7.2",
not able to use "tiff.js": "^1.0.0",

it throws following error,
ERROR in ./node_modules/tiff.js/tiff.min.js
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\0606\Desktop\tiff\node_modules\tiff.js'
ERROR in ./node_modules/tiff.js/tiff.min.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\0606\Desktop\tiff\node_modules\tiff.js'
ERROR in ./node_modules/tiff.js/tiff.min.js
Module not found: Error: Can't resolve 'path' in 'C:\Users\0606\Desktop\tiff\node_modules\tiff.js'

I tried all the above comments its not working.

[joshuaballas]

Same issue as @thangaraj80 .

[pahuta]

@RockGuitarist1 , look here #27 (comment)
Try this:

"browser": {
    "tiff": false
  }

[joshuaballas]

@pakhuta I tried adding this in my package.json with no luck:

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

[pahuta]

@RockGuitarist1 if you use webpack watch you should stop it and rerun build. If it doesn't help you, sorry, I don't know how to help you.

[joshuaballas]

@pakhuta Angular 6 with Angular CLI, just like thangaraj80.

[thangaraj80]

try using tiff.js for client side, add in assets folder Thanks, Thangaraj.S My Photography http://500px.com/thangaraj80 http://www.flickr.com/photos/thangaraj80/

…

On Fri, Jul 6, 2018 at 7:58 PM Joshua Ballas ***@***.***> wrote: @pakhuta <https://github.com/pakhuta> Angular 6 with Angular CLI, just like thangaraj80. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#27 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ARCygCu9syxL0pPFIHcyfA4meqtCywrvks5uD3QYgaJpZM4QD6FF> .

[prabh-62]

I tried loading through assets folder as well

ERROR in src/app/app.component.ts(12,25): error TS2307: Cannot find module 'assets/tiff.min.js'.
ERROR in src/app/app.component.ts(13,10): error TS2339: Property 'initialize' does not exist on type 'Promise<any>'.

I posted the same issue in Angular CLI repository. angular/angular-cli#11944

[thangaraj80]

importScripts("../assets/js/tiff.js"); Tiff.initialize({}); Thanks, Thangaraj.S My Photography http://500px.com/thangaraj80 http://www.flickr.com/photos/thangaraj80/

…

On Wed, Aug 22, 2018 at 6:17 PM Prabhdeep Singh ***@***.***> wrote: I tried loading through assets folder as well [image: screen shot 2018-08-22 at 8 44 01 am] <https://user-images.githubusercontent.com/13006107/44464045-a63f6100-a5e7-11e8-829a-e68cf6ae1bf9.png> ERROR in src/app/app.component.ts(12,25): error TS2307: Cannot find module 'assets/tiff.min.js'. ERROR in src/app/app.component.ts(13,10): error TS2339: Property 'initialize' does not exist on type 'Promise<any>'. I posted the same issue in Angular CLI repository. angular/angular-cli#11944 <angular/angular-cli#11944> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#27 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ARCygK92ABzZOXzwwJwiD8a_5fBhxzJ_ks5uTVLlgaJpZM4QD6FF> .

[Knu111]

Hi,
I have the same problem than @thangaraj80 and @RockGuitarist1 and I'm stuck with this issue...

Did someone found a solution or a workaround ? I'have tried a lot of solutions but none of these worked...

Simon

[NAMSGithub]

I have tried everything here that I could for my Angular CLI and it has not worked. I found this guide but it did not work either.

https://blog.lysender.com/2018/07/angular-6-cannot-resolve-crypto-fs-net-path-stream-when-building-angular/

Would love to hear a fix. will post back if i find anything. I'm just trying to render a tiff in the browser.

[thangaraj80]

Add tiff.js in angular.json
{
"glob": "tiff.min.js",
"input": "node_modules/tiff.js/",
"output": "/assets"
},
declare variable in your ts file
declare function importScripts(...urls: string[]): void;
declare var Tiff: any

importScripts(input.protocol + input.host +"/assets/tiff.min.js");

load your tiff files using
let fileReader = new FileReader();
fileReader.onload = (event: any) =>{
arrayBuffer = event.target.result;
const tiff = new Tiff({ buffer: arrayBuffer });
const image: ArrayBuffer = tiff.readRGBAImage();

[NAMSGithub]

thank you for your reply @thangaraj80, i ended up yesterday converting the tiff images to jpg on the database side.

[abelmark]

"path": false,

Is there a reason this hasn't been added to the repo permanently?