Require cycle

[mengerzhuanyong]

Require cycle: node_modules/rn-fetch-blob/index.js -> node_modules/rn-fetch-blob/polyfill/index.js -> node_modules/rn-fetch-blob/polyfill/FileReader.js -> node_modules/rn-fetch-blob/index.js

It is recommended to solve this problem！

[allan-simon]

@ihavenoface5 is it possible to have the patch included upstream ?

[ebarahona]

You can use your own forked repo.

Modify these files can avoid require cycle: IN DIR rn-fetch-blob/polyfill all thease 4 files: Blob.js, Fetch.js, FileReader.js, XMLHttpRequest.js

// import RNFetchBlob from '../index.js' import {NativeModules} from 'react-native'; const RNFetchBlob = NativeModules.RNFetchBlob

Fork the repo and apply the patch, install it from there until the fix is merged. Change package.json to point to your fork. Here is an example using a PUBLIC fork:

"rn-fetch-blob": "git://github.com/foo/bar.git"

[allan-simon]

currently I use the patch-package solution , has this way, I will get updated if bug fixes are merged , without the hassle of maintaining our own fork

[ebarahona]

currently I use the patch-package solution , has this way, I will get updated if bug fixes are merged , without the hassle of maintaining our own fork

Yep! patch-package is definitely the best approach for bug fixes (like this).

[nicoladj77]

The patch-package approach doesn't work in Windows 10, I get an error in parsing the patch.

[darron1217]

Any update on this issue? Is it complicated issue?

[ThaJay]

@darron1217 On the one hand this repo is kinda dead. On the other hand the owner does not want to break the latest version of this for (by now very) old versions of React Native.

It's very simple to solve by the way. If you con't care about supporting older versions of React-Native, justy remove some imports. If you want to keep the latest version working for everyone, properly solve the circle by some way of dependency injection. Multiple possible solutions have been discussed.

I don't care at the moment because I'm not working on a project that uses this. Read all the links in this topic if you're interested, all the information you would need is there.

[cristianoccazinsp]

I would love for the repo to not die. It's so useful, even if the code is a bit hackish.

[Traviskn]

666

[ilies-space]

Modify these files can avoid require cycle: IN DIR rn-fetch-blob/polyfill all thease 4 files: Blob.js, Fetch.js, FileReader.js, XMLHttpRequest.js

// import RNFetchBlob from '../index.js' import {NativeModules} from 'react-native'; const RNFetchBlob = NativeModules.RNFetchBlob

it's work thank you , but is it the best practice solution for this issue ?

[osamaaamer95]

You can fork the repo and do it that way too. However, I love patch-package because it is a simple solution that can be committed to your repository and work for other members of your team.

[ujangmisbah]

Modify these files can avoid require cycle: IN DIR rn-fetch-blob/polyfill all thease 4 files: Blob.js, Fetch.js, FileReader.js, XMLHttpRequest.js

// import RNFetchBlob from '../index.js' import {NativeModules} from 'react-native'; const RNFetchBlob = NativeModules.RNFetchBlob

Thanks this worked

[MSH786]

import {NativeModules} from 'react-native'; const RNFetchBlob = NativeModules.RNFetchBlob

This also works in react-native-fetch-blob

Thanks Dude!

[ujangmisbah]

Modify these files can avoid require cycle: IN DIR rn-fetch-blob/polyfill all thease 4 files: Blob.js, Fetch.js, FileReader.js, XMLHttpRequest.js

// import RNFetchBlob from '../index.js' import {NativeModules} from 'react-native'; const RNFetchBlob = NativeModules.RNFetchBlob

Thanks, this works fine

[storkyle]

Modify these files can avoid require cycle: IN DIR rn-fetch-blob/polyfill all thease 4 files: Blob.js, Fetch.js, FileReader.js, XMLHttpRequest.js

// import RNFetchBlob from '../index.js' import {NativeModules} from 'react-native'; const RNFetchBlob = NativeModules.RNFetchBlob

Thanks brother, @zhuxianqin !

Note: I made a patch from @zhuxianqin's solution. I hope that makes it easier 😃

1. install patch-package

2. create a folder in your project called "patches"

3. Inside "patches" folder get the patch from this gist (for convenience) https://gist.github.com/storkyle/d2f09ef376b3843915345150b0740977 . And name it as rn-fetch-blob+0.12.0.patch

4. add "patch-package" in postinstall in package.json before doing yarn install. In package.json

   "scripts": {
   "postinstall": "patch-package"
   } 

5. run yarn install or npm install

[Remigius2011]

@storkyle , thanks for the patch. this works for me.

Question: does anybody know of a maintained fork or a good replacement for rn-fetch-blob?

[cristianoccazinsp]

https://github.com/RonRadtke/react-native-blob-util

[alpha0010]

Self promotion: I wrote https://github.com/alpha0010/react-native-file-access when this library was marked as unmaintained. API is similar, but implementation is completely new. Feature set reduced to what I thought were the essentials (less code/simpler code means fewer places for bugs... in theory).

[dexiouz]

Modify these files can avoid require cycle: IN DIR rn-fetch-blob/polyfill all thease 4 files: Blob.js, Fetch.js, FileReader.js, XMLHttpRequest.js

// import RNFetchBlob from '../index.js' import {NativeModules} from 'react-native'; const RNFetchBlob = NativeModules.RNFetchBlob

Awesome. This fixed the issue for me

[keisan1231]

I resolved this script

Please write in ${root}/script/rn-fetch-blob_warning.js

var fs = require('fs');

const replaced = `import RNFetchBlob from '../index.js'`;
const replacement = `import {NativeModules} from 'react-native';\nconst RNFetchBlob = NativeModules.RNFetchBlob`;

const files = [
  'node_modules/rn-fetch-blob/polyfill/Fetch.js',
  'node_modules/rn-fetch-blob/polyfill/Blob.js',
  'node_modules/rn-fetch-blob/polyfill/XMLHttpRequest.js',
];

files.forEach(file => {
  fs.readFile(file, 'utf8', function (err, data) {
    if (err) {
      return console.log(err);
    }

    var result = data.replace(new RegExp(replaced, 'g'), replacement);
    fs.writeFile(file, result, 'utf8', function (err) {
      if (err) return console.log(err);
    });
  });
});

and in package.json

"scripts": {
.....
    "postinstall": "node scripts/rn-fetch-blob_warning.js"
  },

Please reinstall. (yarn install) Then , waring vanishes

[gtaylor44]

Thank you @storkyle ... Don't need to manually patch each time packages are installed with this solution.

[Faseeh-Abbas-Khan]

Modify these files can avoid require cycle: IN DIR rn-fetch-blob/polyfill all thease 4 files: Blob.js, Fetch.js, FileReader.js, XMLHttpRequest.js

// import RNFetchBlob from '../index.js' import {NativeModules} from 'react-native'; const RNFetchBlob = NativeModules.RNFetchBlob

Worked for me

[satyabrata45]

Same issue

[rk-maker]

Modify these files can avoid require cycle: IN DIR rn-fetch-blob/polyfill all thease 4 files: Blob.js, Fetch.js, FileReader.js, XMLHttpRequest.js

// import RNFetchBlob from '../index.js' import {NativeModules} from 'react-native'; const RNFetchBlob = NativeModules.RNFetchBlob

Thanks man this issue has been resolved

[biplovappservinc]

this is all are fixing not a permanent solution.

[technokasim]

Modify these files can avoid require cycle: IN DIR rn-fetch-blob/polyfill all thease 4 files: Blob.js, Fetch.js, FileReader.js, XMLHttpRequest.js

// import RNFetchBlob from '../index.js' import {NativeModules} from 'react-native'; const RNFetchBlob = NativeModules.RNFetchBlob

It works for me. thanks

[pond]

Cyclic dependencies for almost 4 years and still not fixed?

That's... Unfortunate :-O

[tarouboy]

Try this forked package, still actively maintained. https://github.com/RonRadtke/react-native-blob-util

[lfrallon]

Hello, this still exists on:

"react": "18.0.0", "react-native": "^0.69.0", "rn-fetch-blob": "^0.12.0",

Update:

Fix after I installed "rn-fetch-blob": "0.13.0-beta.2" mentioned in https://github.com/joltup/rn-fetch-blob/issues/798#issuecomment-1218917753.

[mickey35vn]

Modify these files can avoid require cycle: IN DIR rn-fetch-blob/polyfill all thease 4 files: Blob.js, Fetch.js, FileReader.js, XMLHttpRequest.js

// import RNFetchBlob from '../index.js' import {NativeModules} from 'react-native'; const RNFetchBlob = NativeModules.RNFetchBlob

it works for me, many thanks

[Adil7767]

Require cycle: node_modules/rn-fetch-blob/index.js -> node_modules/rn-fetch-blob/polyfill/index.js -> node_modules/rn-fetch-blob/polyfill/Fetch.js -> node_modules/rn-fetch-blob/index.js Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle. same issue is here