fs.opensync is not a function

Question

I'm trying to use image-size in my react app on my local machine, and when I'm trying to get dimensions of a .jpg image, the app is crashing with an error:

TypeError: fs.openSync is not a function

syncFileToBuffer
D:/Projects/artworks-portfolio-app/ArtworkPortfolioApp/node_modules/image-size/dist/index.js:118
  115 | 
  116 | function syncFileToBuffer(filepath) {
  117 |   // read from the file, synchronously
  118 |   const descriptor = fs.openSync(filepath, 'r');
  119 |   const size = fs.fstatSync(descriptor).size;
  120 |   const bufferSize = Math.min(size, MaxBufferSize);
  121 |   const buffer = Buffer.alloc(bufferSize);

imageSize
D:/Projects/artworks-portfolio-app/ArtworkPortfolioApp/node_modules/image-size/dist/index.js:151
  148 |   if (typeof callback === 'function') {
  149 |     queue.push(() => asyncFileToBuffer(filepath).then(buffer => process.nextTick(callback, null, lookup(buffer, filepath))).catch(callback));
  150 |   } else {
  151 |     const buffer = syncFileToBuffer(filepath);
  152 |     return lookup(buffer, filepath);
  153 |   }
  154 | }

calcDimensions
D:/Projects/artworks-portfolio-app/ArtworkPortfolioApp/src/pages/home/index.js:53
  50 |    }
  51 | 
  52 |    const calcDimensions = () => {
  53 |        var dimensions = sizeOf('../../img/arts_hd_folder/1.jpg');
     | ^  54 |        console.log(dimensions.width, dimensions.height);
  55 | 
  56 |    }

(anonymous function)
D:/Projects/artworks-portfolio-app/ArtworkPortfolioApp/src/pages/home/index.js:60
  57 | 
  58 |     useEffect(() => {
  59 | 
  60 |        calcDimensions();
     | ^  61 |        setPhotos(makeImgArray(imgLinks))
  62 |    }, []);
  63 | 

Errors from browser's console:

Uncaught TypeError: fs.openSync is not a function
    at syncFileToBuffer (index.js:118)
    at imageSize (index.js:151)
    at calcDimensions (index.js:53)
    at index.js:60
    at commitHookEffectList (react-dom.development.js:22010)
    at commitPassiveHookEffects (react-dom.development.js:22043)
    at HTMLUnknownElement.callCallback (react-dom.development.js:337)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
    at invokeGuardedCallback (react-dom.development.js:439)
    at flushPassiveEffectsImpl (react-dom.development.js:25379)
    at unstable_runWithPriority (scheduler.development.js:701)
    at runWithPriority$2 (react-dom.development.js:12231)
    at flushPassiveEffects (react-dom.development.js:25348)
    at react-dom.development.js:25227
    at workLoop (scheduler.development.js:645)
    at flushWork (scheduler.development.js:600)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:197)

index.js:1406 The above error occurred in the <Home> component:
    in Home (created by Context.Consumer)
    in Route (at app/index.js:17)
    in Switch (at app/index.js:16)
    in div (at app/index.js:14)
    in Router (created by BrowserRouter)
    in BrowserRouter (at app/index.js:13)
    in App (at src/index.js:5)

index.js:118 Uncaught TypeError: fs.openSync is not a function
    at syncFileToBuffer (index.js:118)
    at imageSize (index.js:151)
    at calcDimensions (index.js:53)
    at index.js:60
    at commitHookEffectList (react-dom.development.js:22010)
    at commitPassiveHookEffects (react-dom.development.js:22043)
    at HTMLUnknownElement.callCallback (react-dom.development.js:337)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
    at invokeGuardedCallback (react-dom.development.js:439)
    at flushPassiveEffectsImpl (react-dom.development.js:25379)
    at unstable_runWithPriority (scheduler.development.js:701)
    at runWithPriority$2 (react-dom.development.js:12231)
    at flushPassiveEffects (react-dom.development.js:25348)
    at react-dom.development.js:25227
    at workLoop (scheduler.development.js:645)
    at flushWork (scheduler.development.js:600)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:197)

I've been trying different examples of code from the repository of this lib, but nothing works. I think I just forgot to do something simple but I can't realize what.

Answer 1

It appears to be a module dedicated for server-side Node.js apps.

Browser does not give access to the machines' filesystem the way like Node gives, so the fs module is not present in the browser.

Answer 2

If you are writing node.js code (not browser JS) it looks like the error that would occur if you haven't included the "fs" module at the top of your file. You may need to add: const fs = require("fs");

If you want to get dimensions of an image using browser-executing JS, you could do a fetch, but it's easier to simply create a new Image:

var img = new Image();

img.onload = function(){
  var height = img.height;
  var width = img.width;

  console.log(`HxW ${height}x${width}`);
}

img.src = 'https://i.ytimg.com/vi/OwF3alPebO8/maxresdefault.jpg';