dbasedow/react-native-webp

Compile error after installing

Opened this issue · 12 comments

Hi, I get this compile error after installing. I believe I followed the instructions listed in the README.

  • npm install react-native-webp --save
  • react-native link
  • Added WebP.framework to the project
  • Added $(SRCROOT)/../node_modules/react-native-webp to the Frameworks Search Paths

Compile Error:
../node_modules/react-native-webp/node_modules/react-native/ReactAndroid/src/main/jni/first-party/fb/include/fb/assert.h:15:19: error: expected ';' after top level declarator namespace facebook { ^ Bridging-Header.h:15:9: note: in file included from Bridging-Header.h:15: #import "RCTLinkingManager.h" ^../node_modules/react-native-webp/node_modules/react-native/Libraries/LinkingIOS/RCTLinkingManager.h:12:9: error: 'React/RCTEventEmitter.h' file not found #import <React/RCTEventEmitter.h> ^ <unknown>:0: error: failed to import bridging header 'Bridging-Header.h'

+1 @dbasedow, did you fix that issue? @christianbach

i got this error

Undefined symbols for architecture x86_64:
  "_WebPDecodeRGBA", referenced from:
      -[DBAWebpImageDecoder decodeImageData:size:scale:resizeMode:completionHandler:] in libReactNativeWebp.a(DBAWebpImageDecoder.o)
  "_WebPGetInfo", referenced from:
      -[DBAWebpImageDecoder canDecodeImageData:] in libReactNativeWebp.a(DBAWebpImageDecoder.o)
ld: symbol(s) not found for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

Same error:

Undefined symbols for architecture x86_64:
  "_WebPAnimDecoderDelete", referenced from:
      -[DBAWebpImageDecoder decodeImageData:size:scale:resizeMode:completionHandler:] in libReactNativeWebp.a(DBAWebpImageDecoder.o)
  "_WebPAnimDecoderGetInfo", referenced from:
      -[DBAWebpImageDecoder decodeImageData:size:scale:resizeMode:completionHandler:] in libReactNativeWebp.a(DBAWebpImageDecoder.o)
  "_WebPAnimDecoderGetNext", referenced from:
      -[DBAWebpImageDecoder decodeImageData:size:scale:resizeMode:completionHandler:] in libReactNativeWebp.a(DBAWebpImageDecoder.o)
  "_WebPAnimDecoderHasMoreFrames", referenced from:
      -[DBAWebpImageDecoder decodeImageData:size:scale:resizeMode:completionHandler:] in libReactNativeWebp.a(DBAWebpImageDecoder.o)
  "_WebPAnimDecoderNewInternal", referenced from:
      _WebPAnimDecoderNew in libReactNativeWebp.a(DBAWebpImageDecoder.o)
  "_WebPAnimDecoderOptionsInitInternal", referenced from:
      _WebPAnimDecoderOptionsInit in libReactNativeWebp.a(DBAWebpImageDecoder.o)
ld: symbol(s) not found for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

Hi @princenaman ,

Those functions are in WebPDemux.framework.
You have to link it to your project.

I have the 'React/RCTBridge.h' file not found error. I tried everything I can find online. Including different paths for the Header Search Path. I tried changing "RCTImageLoader.h" to <React/RCTImageLoader.h> in DBAWebpImageDecoder.h, now I have 'React/RCTImageLoader.h' file not found. I seems that there is some problems with the Header Search path. Which should I actually use and does it have to be in main projects or in ReactNativeWebp project?

Thanks in advance, battling with this issue 2 days already...

Hi @Symyon , maybe this PR #13 is what you are looking for.
BTW, I don't have the header path problem, so I haven't try that PR.

Hi @kira1928 , thanks for your reply! I was watching that PR, I changed the ReactNativeWebp.xcodeproj/project.pbxproj file as he did. No luck. Tried to install via npm directly from his github repository, downloaded the repo myself and manually setup all the pieces etc... still no luck.
I had the same issues with some other project libraries, but that is easily sorted out by adding "$(SRCROOT)/../../../ios/Pods/Headers/Public" to their Header Search Path. Here it doesn't work.
Maybe the repo is just old and was built with an older react native in mind?
Also after installing, inside the "node_modules/react-native-webp" there is another folder "node_modules" which has its own "react-native" folder inside, full of things ( like another React folder).
Maybe this repo is using an internal react-native library?
Thanks in advance for your help.

OK, I figured out. I had to add "$(SRCROOT)/../../ios/Pods/Headers/Public" to the Header Search Paths instead of "$(SRCROOT)/../../../ios/Pods/Headers/Public". The xcode project of webp is one level higher than others.

Hi @Symyon , as for this -> inside the "node_modules/react-native-webp" there is another folder "node_modules" which has its own "react-native" folder inside, I think this is a bug in react-native-webp's package.json file.
It somehow works when using npm, but when I using yarn instead, a 'multiple react-native exist' red-box error occurred. One way to fix that is moving that dependency to devDependency like other react-native modules, or I think you can simply delete that dependency.

Thx @kira1928 , yes I had that error box. Strangely that I did not get it on Mac/iOS, but I did get it on Windows/Android. It was a pain to gert rid of it, as simply deleting the folder and updating the package.json of webP project wasn't enough. I had to clean cache , remove temp folders etc to get it clean.
Anyway, I forked the project, combined some modifications from other forks (modified the headers path, removed dependencies form package.json) and added all the steps in the readme that worked for me. So if anybody is reading this and having problems, check my fork of the repo and all the instructions in the readme.

Thanks @kira1928 for the help!

@Symyon have you been able to get this to work with RN 0.60+?
I think it broke.

@sgeier I am still at RN 0.5x. I don't think I will update to a newer version. Thanks for the heads up!