seikichi/tiff.js

Cannot resolve module 'fs'

Opened this issue · 18 comments

cancan101 commented

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 commented

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 commented

yes, that works!

  • 👍1
prabh-62 commented

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"
}
  • 👍1
pahuta commented

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

"browser": {
    "fs": false,
    "path": false,
    "os": false
  }
  • 👍3
thangaraj80 commented

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.

  • 👍4
joshuaballas commented

Same issue as @thangaraj80 .

pahuta commented

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

"browser": {
    "tiff": false
  }
joshuaballas commented

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

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

@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 commented

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

thangaraj80 commented
prabh-62 commented

I tried loading through assets folder as well
screen shot 2018-08-22 at 8 44 01 am

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 commented
Knu111 commented

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 commented

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 commented

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 commented

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

abelmark commented

"path": false,

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