Assets in linked dependencies not loading.

Current Behavior

I’m working on a React Native iOS app with linked dependencies. Image assets in these projects aren’t loading in <Image> components. If I copy the linked module’s source directly into my app’s node_modules folder, assets in these projects load fine.

Expected Behavior

Assets in linked dependencies load as if they were installed via yarn/npm install.

Haul Configuration (webpack.haul.js)

var path = require('path')

module.exports = ({ platform }, defaults) => {
  return {
    entry: `./index.${platform}.js`,
    devtool: 'source-map',
    resolve: {
      ...defaults.resolve,
      modules: [path.resolve(__dirname, 'node_modules'), 'node_modules']
    }
  }
};

I’ve added some logging to assetLoader.js which illustrates the issue (the root for my project for this example is /Users/erobinson/Code/company/reactnative-example/React/, with a symlinked dependency to a module located in /Users/erobinson/Code/javascript/reactnative-onboarding)…

filepath: /Users/erobinson/Code/javascript/reactnative-onboarding/images/arrow-left/[e-mail]
dirname: /Users/erobinson/Code/javascript/reactnative-onboarding/images/arrow-left
assets: assets/ios
url: ../../../javascript/reactnative-onboarding/images/arrow-left
dest: ../javascript/reactnative-onboarding/images/arrow-left/[e-mail]

The require for this image in my linked module results in a server request to /javascript/reactnative-onboarding/images/arrow-left/[e-mail] instead of looking in the assets/ios directory. I believe this is due to AssetLoader’s url property being assigned via path.relative, which is getting tripped up by symlinks outside of the containing app’s directory structure.

I guess my question is… is this something that should be handled via haul’s webpack config, or a bug in the assetLoader when dealing with symlinked resources?

[itaym2]

Hi, I have a project using haul and symlinks for some packages, and I also encountered some weird issues when working with images.
After investigating the bundle created by haul I discovered that it used 2 different instances of AssetRegistry to register the images (one required from the app’s node_module dir, and one required from the linked package node_modules dir).

I configured webpack to always resolve react-native from the app’s node_modules folder, and it fixed the issue:

    resolve: {
        ...defaults.resolve,
        alias: {
                'react-native': path.resolve(__dirname, 'node_modules/react-native'),
        },

Not sure if this is the same problem you guys are having, but it’s worth giving it a shot.

[zamotany]

Closing due to inactivity. Feel free to create new issue if there’s still a problem with linked assets.