0.62 - Missing images required from outside folder

[n34mvx]

Environment

System: OS: macOS 10.15.3 CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz Memory: 734.50 MB / 16.00 GB Shell: 5.7.1 - /bin/zsh Binaries: Node: 12.16.1 - /usr/local/opt/node@12/bin/node Yarn: 1.22.0 - /usr/local/bin/yarn npm: 6.13.4 - /usr/local/opt/node@12/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1 IDEs: Android Studio: 3.6 AI-192.7142.36.36.6200805 Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild npmPackages: react: 16.11.0 => 16.11.0 react-native: 0.62.0 => 0.62.0

Upgrading version

0.61.5 -> 0.62 upgraded manually according to this https://github.com/react-native-community/upgrade-support/issues/13 - everything is done except localization migration and recommended settings update - there are no issues in issues navigator. Project runs fine without it

Description

The problem: In release builds on iOS, images that are imported from outside of project root are not shown Description: We are using yarn workspaces, and images for the project are stored outside of the project root, few levels higher. metro.config.js is configured to properly resolve paths to these assets (through resolvers.extraNodeModules). Problem occurs when running application in "Release" build configuration on iOS - images that are required from outside of project root are blank. "Debug" configuration and also Android builds (debug and release) don't have this problem. Build doesn't crash, there are no warnings. console.log(require('@resources/image.png')) properly logs a number. Requiring the same image through aliases ('../../resources/image.png' and '@resources/image.png') logs the same number as expected Sometimes after running in "Debug" configuration it is also possible to get your images in "Release", given I don't clean build folder in xcode. If I do clean build folder though, no images appear

Reproducible demo

I tried to reproduce the problem by creating 2 new projects with react-native init (0.61.5 and 0.62) and none of these projects have this issue, which leads me to believe something went wrong during upgrade

Looking forward to any possible suggestions

[christianbach]

@asgmax We are seeing the same issues for our app after upgrading to 0.62 from 0.61. Everything works on Android. iOS works in debug, but building Stage or Production breaks requiring assets from outside the project root

[christianbach]

I took a look inside the create release app and there is a few differences in the assets dir from 0.61 and 0.62

0.62

0.61

These commits seems relevant: https://github.com/react-native-community/cli/pull/939 https://github.com/facebook/react-native/pull/27932

My hunch is that the cli side got released but the react-native side didn't make it to 0.62. Perhaps @janicduplessis or @grabbou has some insights?

I can confirm that patching react-native/Libraries/Image/AssetSourceResolver.js with the changes from https://github.com/facebook/react-native/pull/27932/files#diff-19fe76b55a3380d421bb1ebe901b35e3 works!

[chubillkelvin]

@christianbach I tried patching like you suggested, but with no luck in succeeding.

Is it possible because of my assets being in another folder under node_module?

I do not have an assets folder, instead, my images locate in a node module outside of my project root.

[UPDATE]: I finally figured out the problem. I was using App Center - when building the app, this solution was working well. However, I forgot to change the script for code push. Since code push updates the asset files, this break the images again. All I have to do is to deploy the same solution to both pipeline for my case. Thank you!

[christianbach]

@christianbach I tried patching like you suggested, but with no luck in succeeding.

Is it possible because of my assets being in another folder under node_module?

I do not have an assets folder, instead, my images locate in a node module outside of my project root.

[UPDATE]: I finally figured out the problem. I was using App Center - when building the app, this solution was working well. However, I forgot to change the script for code push. Since code push updates the asset files, this break the images again. All I have to do is to deploy the same solution to both pipeline for my case. Thank you!

Great, nice to see that it worked. The fix is included in the upcoming 0.63 release.

[martingg88]

I do have calling image that is outside of project root. It works for IOS, but image doesn't show up and return number 3 on Android. Any idea how to solve this issue? Thank

Folder 1 and 2 are at two different locations. Folder 1 (Project root)

1. Sample/Index.js

Folder 2 2. assets/img/test.jpeg

Sample/Index.js (Import image at this file) import img1 from '../assets/img/test.jpeg';

[jamesmalin]

Is this being corrected soon?

[Andrea-Arguello]

@asgmax Did you ever find a solution? I am facing this exact same issue. First, images wouldn't load even on Debug for iOS, which was solved by react-native-fix-image. However, for Release I'm experiencing the same issue as you. Xcode logs several CUICatalog: Invalid asset name supplied: '(null)'warnings too.

[Andrea-Arguello]

Forgot to mention, this wasn't even after upgrading the app, all the time we've been running on RN 0.61.5 on an Expo ejected project.

[n34mvx]

@Andrea-Arguello for us, fixes mentioned above didn't work, even after upgrading to 0.63.3 problem still remained. The only solution that worked was creating a symlink inside project folder that points to the resource folder outside the project