oblador / react-native-vector-icons

Customizable Icons for React Native with support for image source and full styling.
https://oblador.github.io/react-native-vector-icons/
MIT License
17.35k stars 2.12k forks source link

[Xcode 11] 'Multiple commands produce' error when building with new Xcode build system #1074

Closed fungilation closed 4 years ago

fungilation commented 4 years ago

Environment

MacOS 10.14.6 RN 0.60.5 Latest RNVI Building on iOS

Description

Describe your issue in detail. Include screenshots if needed.

Reproducible Demo

https://github.com/facebook/react-native/issues/20492#issuecomment-533912772

On Xcode before upgrade 11, things work correctly and font assets copy without fatal error.

After Xcode 11 stable released and upgraded, it required fonts removal under [CP] Copy Pods Resources in Build Phases. Subsequent pod update brings them back, needing manual removal again.

Not sure if this is fixable only with special treatment on Xcode >= 11?

efstathiosntonas commented 4 years ago

same here with 0.61.0-rc.3 and xcode 11 11A420a mojave 10.14.6

chescko29 commented 4 years ago

Same here.

It looks like a bug or some new issue with new Xcode version.

Error response is:

Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.

Detailed response:

Build system information error: Multiple commands produce '/path/of/the/project/ios/build/NameOfTheProject/Build/Products/Debug-iphonesimulator/NameOfTheProject.app/Zocial.ttf':

_1) Target 'NameOfTheProject' (project 'NameOfTheProject') has copy command from '/path/of/the/project/NameOfTheProject/nodemodules/react-native-vector-icons/Fonts/Zocial.ttf' to '/path/of/the/project/NameOfTheProject/ios/build/NameOfTheProject/Build/Products/Debug-iphonesimulator/NameOfTheProject.app/Zocial.ttf'

2) That command depends on command in Target 'NameOfTheProject' (project 'NameOfTheProject'): script phase “[CP] Copy Pods Resources”

Build system information error: Multiple commands produce '/path/of/the/project/ios/build/NameOfTheProject/Build/Products/Debug-iphonesimulator/NameOfTheProject.app/SimpleLineIcons.ttf':

_1) Target 'NameOfTheProject' (project 'NameOfTheProject') has copy command from '/path/of/the/project/NameOfTheProject/nodemodules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf' to '/path/of/the/project/NameOfTheProject/ios/build/NameOfTheProject/Build/Products/Debug-iphonesimulator/NameOfTheProject.app/SimpleLineIcons.ttf'

2) That command depends on command in Target 'NameOfTheProject' (project 'NameOfTheProject'): script phase “[CP] Copy Pods Resources”

...

That response repeat for each .ttf file used by the library.

I had to temporary react-native unlink react-native-vector-icons, and the project build again, but with not icons.

bpouzet commented 4 years ago

Find a solution, simply remove duplicate reference fonts in "Copy Bundle Resources" NOT in "[CP] Copy Pods Resources"

jacklj commented 4 years ago

Removing duplicate font files in Copy Bundle Resources worked for me.

The problem seems to be caused by the new autolinking feature in React Native 0.60 - the line use_native_modules! in ios/Podfile means when you do pod install, any pods found in node_modules are automatically linked. This means that links to all font files are added to [CP] Copy Pods Resources when you do pod install.

If you previously installed react-native-vector-icons manually by adding the font files to Copy Bundle Resources, you then get a "Multiple commands produce..." fatal build error.

So to fix the problem, just remove the font files from Copy Bundle Resources, so that they are only in [CP] Copy Pods Resources.

KaneNguyen commented 4 years ago

Removing duplicate font files in Copy Bundle Resources worked for me.

The problem seems to be caused by the new autolinking feature in React Native 0.60 - the line use_native_modules! in ios/Podfile means when you do pod install, any pods found in node_modules are automatically linked. This means that links to all font files are added to [CP] Copy Pods Resources when you do pod install.

If you previously installed react-native-vector-icons manually by adding the font files to Copy Bundle Resources, you then get a "Multiple commands produce..." fatal build error.

So to fix the problem, just remove the font files from Copy Bundle Resources, so that they are only in [CP] Copy Pods Resources.

Hi jackli, I tried it but it created a new problem :(

Screen Shot 2019-09-24 at 16 55 34 Screen Shot 2019-09-24 at 16 55 43 Screen Shot 2019-09-24 at 16 55 54 Screen Shot 2019-09-24 at 16 56 30
KaneNguyen commented 4 years ago

@jacklj can you help me, pls !

awgeorge commented 4 years ago

Is there anyway to disable this feature? We're still on .59 and the linking happens in our build process. We don't have our workspace committed, the pipeline literally does a pod install and react native link every time. Now our builds fail as its duplicating these fonts.

keisnet commented 4 years ago

@awgeorge We're in the same situation, what worked for us was to just choose the legacy build system in xcode 11.1.

webdesign2be commented 4 years ago

I had the same issue with the double linking stuff on Xcode.

"react-native": "0.61.5" "react-native-vector-icons": "^6.6.0"

Xcode: 11.2.1

I used this solution to get it to work for me: https://github.com/oblador/react-native-vector-icons/issues/661#issuecomment-517905162

But on the console i get this:

error: React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:
react-native-vector-icons (to unlink run: "react-native unlink react-native-vector-icons")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above.
Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically.
If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md

error: Could not find the following native modules: RNVectorIcons. Did you forget to run "pod install" ?

As long as I don't install the pod RNVectorIcons all works as expected. But that can't be more than a temporary workaround.

ulises-jimenez commented 4 years ago

For anyone else who didn't know this, Copy Bundle Resources can be found under the BuildPhases` tab in the target in your project

sadikyalcin commented 4 years ago

For anyone else who didn't know this, Copy Bundle Resources can be found under the BuildPhases` tab in the target in your project

Thanks. Everyone providing a solution but no one saying where it is 👍

pacozaa commented 4 years ago

@ulises-jimenez the real mvp

ManigandanRaamanathan commented 4 years ago

Fixed it by removing fonts in the Copy Bundle Resource

leonardomarciano commented 4 years ago

Real problem with module.

Fixed it by removing fonts in the Xcode - Build Phases/[CP] Copy Bundle Resource

njdullea commented 4 years ago

Only remove fonts from build phases that are part of RNVI, if you are adding your own fonts you will need these under Copy Bundle Resource.

jonasgroendahl commented 4 years ago

Is there any way to avoid having manually go into XCode and remove the fonts from the Copy Bundle Resource tap when launching a new project using react-native-vector-icons and custom fonts with RN 0.6+ (autolink feature)?

marktdodds commented 4 years ago

@jonasgroendahl This fixed it for me https://github.com/oblador/react-native-vector-icons/issues/1074#issuecomment-560150374

jonasgroendahl commented 4 years ago

@marktdodds thanks, this worked! :)

lore978 commented 4 years ago

Be sure to have unchecked the “Target Membership”

RnbWd commented 4 years ago

It'd be nice not to have to manually remove this every time I run pod install. Screen Shot 2020-02-05 at 11 39 20 AM

MattiasMansson commented 4 years ago

@RnbWd Incase you haven't found your workaround yet, my approach to avoid having to remove it after every pod install was the following:

  1. yarn add react-native-vector icons
  2. Go into node_modules/react-native-vector-icons/Fonts and copy the fonts you wish to use.
  3. Place the copied fonts in a folder (in my case src/assets/icons)
  4. Include the icons folder in your react-native-config.js
    module.exports = {
    assets: ['./src/assets/icons']
    };
  5. Modify node_modules/react-native-vector-icons/react-native-config.js to the following
    module.exports = {
    dependency: {
    assets: [],
    },
    };
  6. Inside node_modules/react-native-vector-icons/RNVectorIcons.podspec, remove the s.resources = "Fonts/*.ttf" line entirely.
require 'json'
version = JSON.parse(File.read('package.json'))["version"]

Pod::Spec.new do |s|

  s.name           = "RNVectorIcons"
  s.version        = version
  s.summary        = "Customizable Icons for React Native with support for NavBar/TabBar, image source and full styling."
  s.homepage       = "https://github.com/oblador/react-native-vector-icons"
  s.license        = "MIT"
  s.author         = { "Joel Arvidsson" => "joel@oblador.se" }
  s.platforms      = { :ios => "9.0", :tvos => "9.0" }
  s.source         = { :git => "https://github.com/oblador/react-native-vector-icons.git", :tag => "v#{s.version}" }
  s.source_files   = 'RNVectorIconsManager/**/*.{h,m}'
  s.preserve_paths = "**/*.js"
  s.dependency 'React'

end
  1. Run npx patch-package react-native-vector-icons.
  2. Run cd ios && pod install && cd ..
  3. Run npx react-native link
  4. Add "postinstall": "npx patch-package" to the scripts in package.json so the patch is automatically applied after every install.
carlost commented 4 years ago

@fungilation, i am pretty sure that this issue is very much still alive. let me know if i am missing something. i just wasted almost 90 minutes trying to figure out why this was happening in my app after upgrading some tooling. it would be unfortunately if this kept happening to more folks.

it seems like the crux of the problem is that the font files are being referred to by both the react-native.config.js and the podspec.

the reference to the font files as assets in the react-native.config.js will cause the react-native link to load the fonts as a resource for the App project.

while the reference to the font files as resources in the RNVectorIcons.podspec will cause pod install to load the fonts as resources for the Podfile project.

i suspect that the solution is to update either react-native.config.js or podspec to that the fonts are not double counted.

carlost commented 4 years ago

so to follow up on my earlier post ... i have a post install hook in my package.json that patches the react-native.config.js file in react-native-vector-icons to remove the assets: ['Fonts'] config. that resolves this issue.

orinoco commented 4 years ago

To build on @carlost strategy, for me it was the podspec. Adding this to the scripts section on package.json fixed it for me.

"postinstall": "sed -i '' '/s.resources/d' ./node_modules/react-native-vector-icons/RNVectorIcons.podspec"

29er commented 4 years ago

@orinoco none should have to do that. Ever.

nabilfreeman commented 4 years ago

@29er no this definitely shouldn't be necessary, but it looks like when the dev team set up this library to work with autolinking they didn't consider the use case of people having their own custom fonts alongside the RN library and assumed people would not need to run react-native link.

Deleting react-native.config.js on postinstall didn't work for this use case but modifying the podspec as recommended by @orinoco did.

waqas19921 commented 4 years ago

@oblador Any solution for that...

carlost commented 4 years ago

@orinoco ... we just need to change one of the files so the assets aren't addressed twice. Your fix is way more compact that mine since it doesn't need the stupid patch file. I didn't even think of doing that ... probably because sed makes me break out in the "sweats" :)

prashant9912 commented 4 years ago

@ManigandanRaamanathan YES, link work perfect just need to remove all fonts from 'Copy Bundle Resources' ❤️

polyeezy commented 4 years ago

File -> Workspace Settings -> Legacy Build System

helderberto commented 4 years ago

Tested on the following versions of packages:


I've made this steps and project are building again:

  1. Add react-native-vector-icons:

    $ yarn add react-native-vector-icons 
  2. Link resources to project:

    cd <your-project>; react-native link; cd <your-project>/ios; pod install;
  3. Open project in the Xcode and click in the left side on your project name:

    Screen Shot 2020-04-09 at 15 16 56
  4. Go to the Build Phases like the following:

    Screen Shot 2020-04-09 at 15 17 03
  5. You'll see the Copy Bundle Resources like the following:

    Screen Shot 2020-04-09 at 15 17 18

Note: Remove all font icons from the list, in the case of image icons was been removed.

  1. Run your project again to re-install with this update:
    $ react-native run-ios

I hope this step by step helps you. ✨

anandbn commented 4 years ago

Solution at https://user-images.githubusercontent.com/3395492/46074144-0ac18300-c187-11e8-973b-4d08251fcb18.png worked for me.

thubamamba commented 4 years ago

Fixed it by removing fonts in the Copy Bundle Resource

This also worked for me. Thank you.

x5engine commented 4 years ago

add this to your podfile

  post_install do |installer|
    system("sed -i '' '/s.resources/d' ../node_modules/react-native-vector-icons/RNVectorIcons.podspec")
  end
resting commented 4 years ago

I'm removing the copied fonts manually for now. The pod spec wasn't added to Podfile the behavior shouldn't include the fonts to [CP Copy Pods Resources]. I hope this issue will be opened and fixed.

krishnaSpotnana commented 4 years ago

pod install

npx react-native run-ios

mtkuyucu commented 4 years ago

If above solutions did not work for you I will explain my solution here. RN Version : 0.62

yarn add react-native-vector-icons pod install

Manually move Fonts directory under ( node_modules/react-native-vectors-icons) to your project in XCode with

Then and most important part you need to add fonts to Info.plist as UIFonts. I will be shown like

Screen Shot 2020-06-15 at 20 19 50

After that It worked for me I hope it will for you

kindacoder commented 4 years ago

Find a solution, simply remove duplicate reference fonts in "Copy Bundle Resources" NOT in "[CP] Copy Pods Resources"

how to do this ?

KandarpAjvalia commented 4 years ago

@kindacoder see if same fonts exist, because if you install two packages that have fonts there's a chance there will be duplicates. I had installed react-native-vector-icons and native-base, both had fonts and there were duplicates in the bundle resources and that was causing this error. Here's where I found the solution

kindacoder commented 4 years ago

@kindacoder see if same fonts exist, because if you install two packages that have fonts there's a chance there will be duplicates. I had installed react-native-vector-icons and native-base, both had fonts and there were duplicates in the bundle resources and that was causing this error. Here's where I found the solution

thank you so much @KandarpAjvalia

PriR commented 4 years ago

Find a solution, simply remove duplicate reference fonts in "Copy Bundle Resources" NOT in "[CP] Copy Pods Resources"

Thank you! I lost a day trying to add these icons D:

MrQureshi commented 4 years ago

For anyone else who didn't know this, Copy Bundle Resources can be found under the BuildPhases` tab in the target in your project

thank you

martin-garcia-blanco commented 4 years ago

For anyone else who didn't know this, Copy Bundle Resources can be found under the BuildPhases` tab in the target in your project

And what happend if my console shows this error but i dont have build yet

vasylenkoArtem commented 3 years ago

Find a solution, simply remove duplicate reference fonts in "Copy Bundle Resources" NOT in "[CP] Copy Pods Resources"

I have searched for 'FontName.ttf' and remove duplicate rows. There are maybe problems with dependencies too. I removed one dependency and my app builds well Screenshot 2020-08-25 at 13 43 52 Screenshot 2020-08-25 at 13 47 44

chobitsX commented 3 years ago

you can fix it by running next command if you're using react-native@0.60.0 or above

npx react-native unlink react-native-vector-icons
gilsonviana commented 3 years ago

@chobits4 solution worked for me. Thanks!

hongmaoxiao commented 3 years ago

oh my god! Why this bug still exist ? 2021 is coming soon. This shit bug waste three hours of my time.

Shahnewaj commented 3 years ago

Very simple solution .... after pod install , runnpx react-native unlink react-native-vector-icon

then paste the following in info.plist

    <key>UIAppFonts</key>
    <array>
        <string>AntDesign.ttf</string>
        <string>Entypo.ttf</string>
        <string>EvilIcons.ttf</string>
        <string>Feather.ttf</string>
        <string>FontAwesome.ttf</string>
        <string>FontAwesome5_Brands.ttf</string>
        <string>FontAwesome5_Regular.ttf</string>
        <string>FontAwesome5_Solid.ttf</string>
        <string>Fontisto.ttf</string>
        <string>Foundation.ttf</string>
        <string>Ionicons.ttf</string>
        <string>MaterialCommunityIcons.ttf</string>
        <string>MaterialIcons.ttf</string>
        <string>Octicons.ttf</string>
        <string>SimpleLineIcons.ttf</string>
        <string>Zocial.ttf</string>
    </array>
RnbWd commented 3 years ago

I actually solved this issue by deleting my entire ios folder, and then copying an identical ios folder from a freshly made app with react-native init (your app name). Currently using 63.3, but this technique also worked with 62.2. I used the git gui built into vscode to undo the changes to info.plist, entitlements, icons, and splashpage.

I'm also manually linking all custom fonts, instead of using react-native link.

nlindroos commented 3 years ago

Hi! I'm wondering why this issue is closed. It is certainly not resolved, since autolinking when you do pod install with react-native-vector-icons still breaks at least iOS release builds. This still happens with the newest versions of React Native and this package.

"react-native": "0.63.3",
"react-native-vector-icons": "^7.0.0",