how to work with react-native

[nschild]

Hi, I'm trying to get this working with react native, metro bundle, typescript, bable

import exifr from 'exifr'; gives me the error

Error: TransformError node_modules/exifr/dist/full.umd.js: node_modules/exifr/dist/full.umd.js:Invalid call at line 1: import(
/* webpackIgnore: true */
e)]

import Exif from '/node_modules/exifr/dist/lite.legacy.umd'; gives me the error

TypeError: Cannot read property 'includes' of undefined, js engine: hermes

What is the proper method to import this? Is there a bable config I need to add to support the webpack ignore statement?

[hungdev]

I get same issue

[pedro-pinho]

As of my understanding, you need to use ES Modules with react-native, like so

import exifr from 'exifr/dist/full.esm.mjs'

And on metro.config

const defaultAssetExts = require("metro-config/src/defaults/defaults").assetExts;
module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  resolver: {
    assetExts: [
        ...defaultAssetExts, // <- array spreading defaults
        'mjs'
    ]
  }
};

So it can include the mjs files this way. Only issue is that the import actually just imports a number

console.log('exifr', exifr);
console.log('typeof exifr', typeof exifr);

Gives

exifr 3
typeof exifr number

Any help?

[hungdev]

I changed to the lib, you can try it. https://github.com/mattiasw/ExifReader#using-react-native