Linter error - Browser-only function is not defined

Question

I'm relying on a class that is available in browser, FileReader

I keep getting an error in webpack - 'FileReader' is not defined no-undef

What is the correct way of dealing with this? I'm currently using a method where I just ignore the message.

Answer 1

The issue is that since webpack cannot find it as part of Node.js and since it is not available, it will cause an error. But there are a few ways of getting around this.

Instead of

var reader = new FileReader();

use

Fix #1

var reader = new window.FileReader();

Fix #2

var reader = new global.FileReader();

webpack, by default, will convert global to window. More info at: https://webpack.js.org/configuration/node/

Fix #3

// in webpack.config.js
module.exports = {
  //...
  externals: {
    FileReader: 'FileReader'
  }
};

more info: https://webpack.js.org/configuration/externals/