Importing exif-js library Uncaught ReferenceError: EXIF is not defined error

Question

I am using vue in a rails application and am trying to import the exif-js library into my script in order to access the global EXIF variable to use as such

var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));

I have downloaded the package by following these yarn instruction.

yarn add exif-js -- save

I realize I need to use the javascript import to include it into my scripts and have tried

<script>
   import EXIF from 'exif-js'

    previewPhoto() {
      var reader = new FileReader()
      reader.onload = () => {        
        var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));
    }

</script>

and other variances such as import 'exif-js', however I keep getting Uncaught ReferenceError: EXIF is not defined error. How do I successfully import the library so that I can use it in my scripts.

score 1 · Answer 1 · answered Aug 16 '17 at 21:53

You can use it in a CommonJS way:

<script>
  var EXIF = require('exif-js');
  previewPhoto() {
    var reader = new FileReader()
    reader.onload = () => {        
      var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));
    }
  }
</script>

score 0 · Answer 2 · answered Jul 18 '17 at 23:18

import (if you look carefully at the top of the MDN article you linked) is not currently supported natively by most/all browsers are this point in time, although browsers are working towards native es6 module support. As a result, if you are not using webpack or another build tool, you need to use a different approach.

You can drop the exif-js library into your app via script tag in the head of your root html doc:

<script src="https://unpkg.com/exif-js@2.2.1"></script>

Once the file is parsed, a global EXIF variable will be available and you can run your code:

previewPhoto() {
    var reader = new FileReader()
    reader.onload = () => {        
        var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));
}

Note that the fat arrow function () => will also have limited browser support.

How do you make this work with webpack? I am getting the same error in laravel 5.5 — Chriz74, Jan 18 '18 at 17:27

Importing exif-js library Uncaught ReferenceError: EXIF is not defined error

2 Answers2