React-native-fetch-blob: Cannot read property 'DocumentDir' of undefined

[Rugx]

On my Xcode I get "Cannot read property 'DocumentDir' of undefined".

I am using version 8.2.1 of Xcode.

With reference to issue #31 I read that this problem is related to the Xcode and that the problem has been solved for Xcode < 7.3.

I would like to know if my problem can't be solved since I'm using Xcode 8.2.1.

Thanks in advance

[abeauvois]

I'm having the same issue with Android, but running well with IOS:
"react": "~15.4.0-rc.4",
"react-native": "0.40.0",
"react-native-fetch-blob": "^0.10.2",

Error is coming from this lines in fs.js:

const RNFetchBlob:RNFetchBlobNative = NativeModules.RNFetchBlob
const emitter = DeviceEventEmitter
const dirs = {
    DocumentDir :  RNFetchBlob.DocumentDir, // => RNFetchBlob is  @undefined

[wkh237]

I have tried install the package in a pure 0.40 environment, it worked without any problem. Please check if the projects are linked, or remove the package and install again 👍

[Rugx]

I had to remove the "build" folder inside my "ios" folder and then restart my simulator. After that it's working fine

[bendyorke]

I'm getting a similar issue - I can't import anything from react-native-fetch-blob. Simply adding the line:

import RNFetchBlob from 'react-native-fetch-blob'

results in the following error:

I've tried resetting the cache, removing the build directory, reinstalling, relinking, and resetting content and settings on the simulator

Xcode version 8.2.1
react version 15.4.2
react-native version 0.41.2
react-native-fetch-blob version 0.10.2

EDIT: Updated screenshot

[tjkang]

Have you guys tried to rebuild them? I had same error and after i rebuilded with 'react-native run-ios' it fixed.
btw, i am having react-native version 0.37

[keyyuki]

I have save issue with @bendyorke but in android
"react": "15.4.0",
"react-native": "0.40.0",
react-native-fetch-blob version 0.10.2

[bogobogo]

Hey,

I had the same issue on Android and I managed to solve it. I have tried installing and uninstalling, linking and unlinking. it didn't work. After some investigation I found out that the automatic linking did not update my MainApplication.java file.

Make sure that it is configured properly by adding these lines:

...
+ import com.RNFetchBlob.RNFetchBlobPackage;                                                                                 
...
protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
+          new RNFetchBlobPackage()                                                                                         
      );
    }
  };
...

You can find the full explanation here:

Hope this helps

[jjhesk]

+1 I have the same issue too in iOS build
RN 0.41.2
Latest versions
@abeauvois @wkh237

[jjhesk]

Here i found the solutions and it worked for me.

step1.
open the xcode and manually relink the .a compiled files again. If they are not linked correctly, the icons will showed differently with the stroke outline instead of the structure icon. Do so and make them correctly linked. This can be found from the General - > Linked Frameworks and Libraries or go to tab Build Phrase -> Linked Binary With Libraries panel. They appear to be the same and works the same.

step2.
remove or uninstall the test apps in the simulator and close all the consoles related to JS debugger for the react native app.

step3.
Create a bash file in the root folder

#!/bin/bash
# Program:
#       Clean the folder caching and make the start the app debug
# To make the xcode derived data folder location please refer to this location
# http://stackoverflow.com/questions/13761934/xcode-derived-data-location/13762600
#
# History:
# 2015/07/16    VBird   First release

watchman watch-del-all
npm cache clean
rm -f /ios/build
react-native run-ios

like so, and run the script.

[awreese]

To piggyback on @bogobogo's post, I came across this issue starting Friday (July 28) and by yesterday found this thread that helped me clear up issue. When I would run 'RNFB_ANDROID_PERMISSIONS=true react-native link' to link the android libs it wouldn't actually do any of the linking but it did manage to make entries in my AndroidManifest.xml file. The problem though is it created two duplicated entries.

I removed the duplicates and finished linking for android manually and was able to build and run on an emulator. I assume linking manually for iOS would yield a similar result, if needed.

[andrewmarushko]

I solve this issue just linking project

react-native link
react-native run-ios

[laclance]

Fixed by reinstalling everything and manually linking again, https://github.com/wkh237/react-native-fetch-blob/wiki/Manually-Link-Package

[scientist1642]

on Ios, if you use Cocoapods make sure to run pod install after linking.

[beenadevi1]

Hello i have solved this issue for iOS---- when you install the react-native-fetch-blob and link with iOS, it only provide limited lib on native side.

you can to open project from iOS in Xcode then remove the library of RNFetchBlob.xcodeproj from library folder and then again add by right click on library folder from node modules-->react-native-fetch-blob--->iOS folder --->add project RNFetchBlob.xcodeproj then all required file will be there and make sure add lib on build phases also libRNFetchBlob.a

it works for me.

Thanks

[Salomao123]

Try to recompile your project with Android Studio .. it works for me!

[tetreault]

I have this same issue with a simple empty project with expo via create-react-native-app.

Simply adding import RNFetchBlob from "react-native-fetch-blob"; produces the error of "Cannot read property of DocumentDir of undefined.

Dependencies:

    "clarifai": "^2.9.0",
    "expo": "^30.0.1",
    "react": "16.3.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
    "react-native-fetch-blob": "^0.10.8"

[tetreault]

If its helpful to anyone, my workaround from this issue in Expo is just using ImageStore and ImageEditor from react-native to get Base64 of an image asset.

this.imageURL = require("./assets/pancakes.jpg");
this.image = Image.resolveAssetSource(this.imageURL);
this.imageSettings = {
      offset: { x: 0, y: 0 },
      size: { width: this.image.width, height: this.image.height }
};

ImageEditor.cropImage(
      this.image,
      this.imageSettings,
      uri => {
        ImageStore.getBase64ForTag(
          uri,
          data => {
            console.log(data);
          },
          e => console.warn("getBase64ForTag: ", e)
        );
      },
      e => console.warn("cropImage: ", e)
    );

[sstano]

After having the same issues, I managed to install react-native-fetch-blob and get rid of the Cannot read property 'DocumentDir of undefined' by:

1. Following the installation steps (I used npm to install the module).
2. Linking the package manually

I think the important part that I was missing even previously is to run pod install for iOS.
For Android, the reason it didn't work for me previously might be related to the fact that I'm using react-native-navigation in my project, which means my MainApplication.java is different to the default one (?). This time I just made sure I have the library initialized in getPackages() method and it just worked.

Here's my MainApplication.java for the reference (notice that it extends Navigation Application. It's content is a mixture of the default MainApplication and the one from React Native Navigation installation guide):

public class MainApplication extends NavigationApplication {

  @Override
  protected ReactGateway createReactGateway() {
    ReactNativeHost host = new NavigationReactNativeHost(this, isDebug(), createAdditionalReactPackages()) {
      @Override
      protected String getJSMainModuleName() {
        return "index";
      }
    };
    return new ReactGateway(this, isDebug(), host);
  }

  @Override
  public boolean isDebug() {
    return BuildConfig.DEBUG;
  }

  protected List<ReactPackage> getPackages() {
    // Add additional packages you require here
    // No need to add RnnPackage and MainReactPackage
    return Arrays.<ReactPackage>asList(
      new MapsPackage(),
      new RNFetchBlobPackage() 
    );
  }

  @Override
  public List<ReactPackage> createAdditionalReactPackages() {
    return getPackages();
  }

  @Override
  public void onCreate() {
    super.onCreate();
    Fabric.with(this, new Crashlytics());
    SoLoader.init(this, /* native exopackage */ false);
  }

}

Hope this helps!