[solved] Duplicate resources android build error with v9.1.0 - [fonts were in source tree *and* using module's build.gradle font copy]

mikehardy commented 2 years ago

[x] Review the documentation: https://github.com/oblador/react-native-vector-icons
[x] Search for existing issues (including closed issues): https://github.com/oblador/react-native-vector-icons/issues

Environment

react-native 0.67.2, gradle 7.4, android gradle plugin 7.1.1, react-native-vector-icons 9.1.0 (hot off the presses!)

Description


FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:mergeDevDebugAssets'.
> [fonts/Fontisto.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/src/main/assets/fonts/Fontisto.ttf    [fonts/Fontisto.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/build/intermediates/ReactNativeVectorIcons/fonts/Fontisto.ttf: Error: Duplicate resources
  [fonts/Octicons.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/src/main/assets/fonts/Octicons.ttf    [fonts/Octicons.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/build/intermediates/ReactNativeVectorIcons/fonts/Octicons.ttf: Error: Duplicate resources
  [fonts/Feather.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/src/main/assets/fonts/Feather.ttf      [fonts/Feather.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/build/intermediates/ReactNativeVectorIcons/fonts/Feather.ttf: Error: Duplicate resources
  [fonts/Entypo.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/src/main/assets/fonts/Entypo.ttf        [fonts/Entypo.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/build/intermediates/ReactNativeVectorIcons/fonts/Entypo.ttf: Error: Duplicate resources
  [fonts/FontAwesome5_Brands.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/src/main/assets/fonts/FontAwesome5_Brands.ttf      [fonts/FontAwesome5_Brands.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/build/intermediates/ReactNativeVectorIcons/fonts/FontAwesome5_Brands.ttf: Error: Duplicate resources
  [fonts/MaterialCommunityIcons.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf        [fonts/MaterialCommunityIcons.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/build/intermediates/ReactNativeVectorIcons/fonts/MaterialCommunityIcons.ttf: Error: Duplicate resources
  [fonts/AntDesign.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/src/main/assets/fonts/AntDesign.ttf  [fonts/AntDesign.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/build/intermediates/ReactNativeVectorIcons/fonts/AntDesign.ttf: Error: Duplicate resources
  [fonts/Foundation.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/src/main/assets/fonts/Foundation.ttf        [fonts/Foundation.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/build/intermediates/ReactNativeVectorIcons/fonts/Foundation.ttf: Error: Duplicate resources
  [fonts/Ionicons.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/src/main/assets/fonts/Ionicons.ttf    [fonts/Ionicons.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/build/intermediates/ReactNativeVectorIcons/fonts/Ionicons.ttf: Error: Duplicate resources
  [fonts/FontAwesome5_Solid.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/src/main/assets/fonts/FontAwesome5_Solid.ttf        [fonts/FontAwesome5_Solid.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/build/intermediates/ReactNativeVectorIcons/fonts/FontAwesome5_Solid.ttf: Error: Duplicate resources
  [fonts/FontAwesome5_Regular.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/src/main/assets/fonts/FontAwesome5_Regular.ttf    [fonts/FontAwesome5_Regular.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/build/intermediates/ReactNativeVectorIcons/fonts/FontAwesome5_Regular.ttf: Error: Duplicate resources
  [fonts/FontAwesome.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/src/main/assets/fonts/FontAwesome.ttf      [fonts/FontAwesome.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/build/intermediates/ReactNativeVectorIcons/fonts/FontAwesome.ttf: Error: Duplicate resources
  [fonts/Zocial.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/src/main/assets/fonts/Zocial.ttf        [fonts/Zocial.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/build/intermediates/ReactNativeVectorIcons/fonts/Zocial.ttf: Error: Duplicate resources
  [fonts/EvilIcons.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/src/main/assets/fonts/EvilIcons.ttf  [fonts/EvilIcons.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/build/intermediates/ReactNativeVectorIcons/fonts/EvilIcons.ttf: Error: Duplicate resources
  [fonts/SimpleLineIcons.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/src/main/assets/fonts/SimpleLineIcons.ttf      [fonts/SimpleLineIcons.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/build/intermediates/ReactNativeVectorIcons/fonts/SimpleLineIcons.ttf: Error: Duplicate resources
  [fonts/MaterialIcons.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/src/main/assets/fonts/MaterialIcons.ttf  [fonts/MaterialIcons.ttf] /Users/mike/work/EquityResidences/equityresidences/packages/public-app/android/app/build/intermediates/ReactNativeVectorIcons/fonts/MaterialIcons.ttf: Error: Duplicate resources

Reproducible Demo

I'm still investigating this but thought to log it quickly since rolling back to 9.0.0 does not cause a build faliure, while 9.1.0 does. I can confirm with 9.0.0 I actually do have vector icons showing up as well so by all appearances 9.0.0 is working

Likely cause #1401 but I haven't looked into it thoroughly yet

I tried rm -fr android/build android/app/build and rebuilt, just to see if that had an effect. No effect. Only the revert to v9 is successful at the moment

I am not including specific fonts, the tail of my android/app/build.gradle is:


apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

oblador commented 2 years ago

Do you by any chance have them in your own project's fonts folder too?

oblador commented 2 years ago

Yeah, I'm pretty confident this is the case. You should pick one approach, either manually copying them to your fonts folder, or copying on build with gradle. To fix this error simply remove the duplicates in packages/public-app/android/app/src/main/assets/fonts, they are most likely out of date anyways.

mikehardy commented 2 years ago

I think you may have sniped it! I normally (that is: in all my other projects) just use the gradle file reference as I included at the bottom of the report, but in this particular one I have them in assets as well:

mike@bistromath:~/work/EquityResidences/equityresidences/packages/public-app/android (main) % find . | grep ttf
./app/src/main/assets/fonts/Octicons.ttf
./app/src/main/assets/fonts/Foundation.ttf
./app/src/main/assets/fonts/SimpleLineIcons.ttf
./app/src/main/assets/fonts/Feather.ttf
./app/src/main/assets/fonts/MaterialCommunityIcons.ttf
./app/src/main/assets/fonts/FontAwesome5_Regular.ttf
./app/src/main/assets/fonts/Entypo.ttf
./app/src/main/assets/fonts/MaterialIcons.ttf
./app/src/main/assets/fonts/FontAwesome.ttf
./app/src/main/assets/fonts/EvilIcons.ttf
./app/src/main/assets/fonts/Zocial.ttf
./app/src/main/assets/fonts/AntDesign.ttf
./app/src/main/assets/fonts/Ionicons.ttf
./app/src/main/assets/fonts/Fontisto.ttf
./app/src/main/assets/fonts/FontAwesome5_Brands.ttf
./app/src/main/assets/fonts/FontAwesome5_Solid.ttf

This project is based off a chain of templates that I attempt to keep maintained as starters for others, and they sadly suffer the same pathology: https://github.com/invertase/react-native-firebase-authentication-example/tree/main/template/android/app/src/main/assets/fonts https://github.com/plaut-ro/luna/tree/master/template/android/app/src/main/assets/fonts

So we have some fixing to do I suppose. It doesn't appear that this is react-native-vector-icons fault, though it is kind of a build break - if I'm understanding it correctly we were just getting lucky before that the build.gradle machinery from here was effectively overwriting the fonts we were already including as source and we were just lucky before because they were in the same spot.

mikehardy commented 2 years ago

Going to close this here as double-inclusion is an integrator problem, not a module problem, but perhaps this issue existing historically will help others if they have incorrectly double-included vector icons like I/we have in those templates, I'm tracking it now in those two template repos

Thanks for the help, and for react-native-vector-icons in general @oblador - much appreciated!

lyswhut commented 2 years ago

Same problem in v9.1.0, removing them will work again:

android/app/src/main/fonts/AntDesign.ttf
android/app/src/main/fonts/MaterialCommunityIcons.ttf

Update

Check your android/app/src/main/fonts directory, if the following files exist, just delete them:

AntDesign.ttf
Entypo.ttf
EvilIcons.ttf
Feather.ttf
FontAwesome.ttf
FontAwesome5_Brands.ttf
FontAwesome5_Regular.ttf
FontAwesome5_Solid.ttf
Fontisto.ttf
Foundation.ttf
Ionicons.ttf
MaterialCommunityIcons.ttf
MaterialIcons.ttf
Octicons.ttf
SimpleLineIcons.ttf
Zocial.ttf

mikehardy commented 2 years ago

@lyswhut I do not believe this is a module problem at all based on @oblador's response, and it appears you have the same thing - fonts in the source tree and fonts copied via use of the build.gradle script reference to this module's build.gradle that copies fonts. As Joel said, we (as users of react-native-vector-icons) have to choose one style or the other - that it worked before was kind of just coincidence and at least for the projects I'm working on I accept I was doing it wrong and need to use the module correctly...

SCasarotto commented 2 years ago

Once again @mikehardy you saved me hours of my life. ❤️

mrousavy commented 2 years ago

Not sure if I'm missing something here, but I did not have any icons duplicated in my android/ or src/ files.

I am running the following react-native-config.js to only copy over the icons I actually need:

const VECTOR_ICONS_FONTS_PATH = './node_modules/react-native-vector-icons/Fonts'
const VECTOR_FONTS = ['Ionicons.ttf']

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  dependencies: {
    // Disable auto linking for `react-native-vector-icons` and link
    // the required fonts manually to avoid duplicate resources issue in iOS.
    'react-native-vector-icons': {
      platforms: {
        ios: null,
        android: null,
      },
      assets: VECTOR_FONTS.map((font) => VECTOR_ICONS_FONTS_PATH + '/' + font),
    },
  },
  assets: ['./src/assets/fonts/'], // stays the same
}

And I have this in my build.gradle:

project.ext.vectoricons = [
    iconFontNames: [
        'Ionicons.ttf',
    ]
]

..and I get the duplicate resources errors when building. When removing my custom react-native-config, all icons get copied over and I still get the build error... 🤔

Am I doing something wrong? @oblador

oblador commented 2 years ago

@mrousavy You need to pick one approach, either the gradle one or RN autolinking. In this case I would suggest that you keep gradle only to make sure you get the right version.

mrousavy commented 2 years ago

hm, that still copies over all icons? I'll try to build a clean reproduceable sample.

shagun-firstlight commented 2 years ago

can you tell me the version in which it is resolved

mikehardy commented 2 years ago

@shagun-firstlight as far as I can tell - @mrousavy's comment notwithstanding since he may have a reproduction of erroneous behavior - this is a project-specific problem and the resolution will be in your project. 9.1.0 introduced this behavior that exposed project-specific issues, and there has been no release since.

carlosmgc2003 commented 2 years ago

I've had the same issue and react-native unlink react-native-vector-icons worked for me (I'm a noob and this was the answer I was looking for).

oblador commented 2 years ago

@mrousavy No, you can define an array of which fonts to copy. Are you saying you are not using the gradle file, have no fonts in your android project and still get this error?

mrousavy commented 2 years ago

@oblador yes, I tried only the Gradle approach (no custom RN config), as well as the custom RN config (no Gradle) approach, both with a complete nuke & clean install, but still all fonts were copied over. I'll provide a repro once I got some time 🙏

Fa1th7 commented 2 years ago

react-native unlink react-native-vector-icons

Thank you so much

AlexCernik commented 2 years ago

Why does this problem occur? react-native link and after react-native unlink react-native-vector-icons seems to work.

samaneh-kamalian commented 2 years ago

Hi. I have the same problem:

 Duplicate resources
  [fonts/MaterialCommunityIcons.ttf] /home/gitlab-runner/builds/L1s-mTeS/0//android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf    [fonts/MaterialCommunityIcons.ttf] /home/gitlab-runner/builds/L1s-mTeS/0/android/app/build/intermediates/ReactNativeVectorIcons/fonts/MaterialCommunityIcons.ttf: Error: Duplicate resources

When I want to build my project on gitlab runner I have this problem. When I use this command : react-native unlink react-native-vector-icons this lead to clean all fonts in android/app/src/main/assets/fonts and the problem is disappeared and build correctly. but in , for example, Samsung A51 keyboard will not work correctly! (disappear when user wants to type) So I can not remove fonts from android/app/src/main/assets/fonts . Now my question is : Why fonts are created automatically in path android/app/build/intermediates/ReactNativeVectorIcons/fonts ? and How can I solve my problem? I really stopped on this bug. Thanks in advanced

sudharsan-palanisamy commented 2 years ago

Yeah, I'm pretty confident this is the case. You should pick one approach, either manually copying them to your fonts folder, or copying on build with gradle. To fix this error simply remove the duplicates in packages/public-app/android/app/src/main/assets/fonts, they are most likely out of date anyways.

finally sorted out, thank you

samaneh-kamalian commented 2 years ago

Hi. I have the same problem:
 Duplicate resources
  [fonts/MaterialCommunityIcons.ttf] /home/gitlab-runner/builds/L1s-mTeS/0//android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf  [fonts/MaterialCommunityIcons.ttf] /home/gitlab-runner/builds/L1s-mTeS/0/android/app/build/intermediates/ReactNativeVectorIcons/fonts/MaterialCommunityIcons.ttf: Error: Duplicate resources
When I want to build my project on gitlab runner I have this problem. When I use this command : react-native unlink react-native-vector-icons this lead to clean all fonts in android/app/src/main/assets/fonts and the problem is disappeared and build correctly. but in , for example, Samsung A51 keyboard will not work correctly! (disappear when user wants to type) So I can not remove fonts from android/app/src/main/assets/fonts . Now my question is : Why fonts are created automatically in path android/app/build/intermediates/ReactNativeVectorIcons/fonts ? and How can I solve my problem? I really stopped on this bug. Thanks in advanced

Anybody can not answer my question ? :( In my system I do not have any problem, but I do not know why git lab runner create folder ReactNativeVectorIcons in path android/app/build/intermediates and copy fonts there !!!!!

lyswhut commented 2 years ago

@samaneh-kamalian try this solution

samaneh-kamalian commented 2 years ago

@samaneh-kamalian try this solution

Thanks for your reply. I did it this way and this problem is solved with this solution. But the added problem is that the Samsung a51 keyboard does not work properly and the keyboard closes when the user wants to type something! The only thing that has changed is the removal of ttfs

samaneh-kamalian commented 2 years ago

@samaneh-kamalian try this solution

Thanks for your reply. I did it this way and this problem is solved with this solution. But the added problem is that the Samsung a51 keyboard does not work properly and the keyboard closes when the user wants to type something! The only thing that has changed is the removal of ttfs

My problem solved with this : https://github.com/facebook/react-native/issues/33164

mohamedadel1994825 commented 2 years ago

Same problem in v9.1.0, removing them will work again:

android/app/src/main/fonts/AntDesign.ttf

android/app/src/main/fonts/MaterialCommunityIcons.ttf

Update

Check your android/app/src/main/fonts directory, if the following files exist, just delete them:

AntDesign.ttf

Entypo.ttf

EvilIcons.ttf

Feather.ttf

FontAwesome.ttf

FontAwesome5_Brands.ttf

FontAwesome5_Regular.ttf

FontAwesome5_Solid.ttf

Fontisto.ttf

Foundation.ttf

Ionicons.ttf

MaterialCommunityIcons.ttf

MaterialIcons.ttf

Octicons.ttf

SimpleLineIcons.ttf

Zocial.ttf

thanks so much , its save my day

Djotchuang commented 2 years ago

I've had the same issue and react-native unlink react-native-vector-icons worked for me (I'm a noob and this was the answer I was looking for).

Thanks so much. This worked for me. I had to write it as npx react-native unlink react-native-vector-icons.

tibbe commented 2 years ago

I'm trying to only use one approach (Gradle) but I can't make npx react-native link not copy the fonts to android/app/src/main/assets. I do need to run npx react-native link to link other fonts and I have this react-native.config.js to avoid copying the react-native-vector-icons fonts but they still get copied by link:

module.exports = {
  dependencies: {
    'react-native-vector-icons': {
      platforms: {
        ios: null,
        android: null,
      },
    },
  },
  project: {
    ios: {},
    android: {},
  },
  assets: ['./assets/fonts/'],
};

mikehardy commented 2 years ago

I think the answer here is: never ever ever ever ever ever use react-native link

It is deprecated forever, and is specifically removed in the CLI now. No one should ever use react-native link.

Don't use react-native link

I'm repeating myself in humor, but seriously, don't use it :-)

https://github.com/react-native-community/cli/pull/1537

tibbe commented 2 years ago

@mikehardy I'm happy to include my other (non react-native-vector-icons) fonts in whatever is the recommended way. I have't found a tutorial that doesn't use link however. What is the right way to include a regular font you downloaded nowadays? I currently put it in assets/fonts and run link.

mikehardy commented 2 years ago

I'm sorry (especially since my previous comment is a bit joking but also shows that they actually removed link) - I don't do anything that requires or required link myself so I have never looked in to it.

I checked that PR and see it was brought up as a concern: https://github.com/react-native-community/cli/pull/1537#pullrequestreview-873359135

I think you have to do in your source tree what link was doing for you: https://stackoverflow.com/a/41827668/9910298 (add it to your android native project assets) https://stackoverflow.com/a/31420849/9910298 (iOS?)

Then refer to it by name in vector icons to load it and use it ?

This is untested, just trying to be helpful (and also stitch together this issue and the react-native CLI discussion)

tido64 commented 2 years ago

For iOS at least, you can create a resources podspec, e.g.:

Pod::Spec.new do |s|
  s.name      = 'MyResources'
  s.version   = '1.0.0'
  ...
  s.resources = 'assets/fonts/*'
end

For Android, it's a little more complicated. You can probably write some Gradle scripts to copy them into place, but it's not very elegant.

mikehardy commented 2 years ago

This would probably be a useful general purpose module really, with assets/fonts (or just assets?) as the directory since everyone else is using it, and it does podspec as you mention, and the gradle stuff like react-native-vector-icons does here for android. handling it for web as well would be a bonus, if that requires special handling

liamjones commented 2 years ago

Re what to use instead of react-native link, we've been using https://github.com/unimonkiez/react-native-asset for a while to link fonts, etc on both platforms - not for vector-icons but I suspect it could work for that fine too.

mikehardy commented 2 years ago

That looks perfect @liamjones - for the new react-native CLI upcoming, since link is going away completely - this could serve as a good time to update the docs now if you have a flow you've tested + know works for custom fonts

liamjones commented 2 years ago

@mikehardy the docs for react-native-vector-icons specifically? Sure, I could have a go at doing that sometime soon

mikehardy commented 2 years ago

Yeah, and you can probably earn all sorts of Internet Points (worth more than bitcoin right now!) if you post some updated answers on the relevant stack overflow - I just know this is going to bite a ton of people

KrisLau commented 2 years ago

I'm only using the recommended gradle method and my android/app/src/main/assets/fonts is empty but I'm still getting the error:

[raw/node_modules_reactnativevectoricons_glyphmaps_fontawesome5free_meta] /Users/newuser/Desktop/Prototype/frontend/android/app/src/main/res/raw/node_modules_reactnativevectoricons_glyphmaps_fontawesome5free_meta.json     
[raw/node_modules_reactnativevectoricons_glyphmaps_fontawesome5free_meta] /Users/newuser/Desktop/Prototype/frontend/android/app/build/generated/res/react/internal/release/raw/node_modules_reactnativevectoricons_glyphmaps_fontawesome5free_meta.json: Error: Duplicate resources

Any recommendations?

shoaibarif244 commented 1 year ago

@mikehardy I'm happy to include my other (non react-native-vector-icons) fonts in whatever is the recommended way. I have't found a tutorial that doesn't use link however. What is the right way to include a regular font you downloaded nowadays? I currently put it in assets/fonts and run link.

USE npx react-native-asset

codewithmecoder commented 1 year ago

ctor-icons/fonts.gradle"

It worked Thank you so much.

AlbinCederblad commented 1 year ago

@mikehardy I'm happy to include my other (non react-native-vector-icons) fonts in whatever is the recommended way. I have't found a tutorial that doesn't use link however. What is the right way to include a regular font you downloaded nowadays? I currently put it in assets/fonts and run link.

USE npx react-native-asset

Thank you. Just rolled a new react-native project and setting up this library did not work at all. The issue was that the .sh script which is used to upgrade to Pro uses react-native link, which literally doesn't exist anymore.

yourerrorbro commented 1 year ago

I hope this email finds you well. I wanted to share an informative blog post with you that I recently came across. Here i provide proper solution. In above example i check. Initially worked but when build upload that's time create issue.

https://medium.com/@yourerrorbro/handling-duplicate-resource-issue-in-android-released-builds-in-react-native-f63c67176bce

DevHamzaShahid commented 12 months ago

nodemudules> react-native-vector-icons/font.gradle

Solved by changing the path :

from : into "$buildDir/intermediates/ReactNativeVectorIcons/fonts"

to: into "$buildDir/intermediates/assets/fonts"

oblador / react-native-vector-icons