Haul: Assets in linked dependencies not loading.

Created on 18 Apr 2017 · 9Comments · Source: callstack/haul

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/[email protected]
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/[email protected]

The require for this image in my linked module results in a server request to /javascript/reactnative-onboarding/images/arrow-left/[email protected] 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?

enhancement

Source

eric-robinson

👍1

Most helpful comment

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.

itaym2 on 13 Dec 2017

👍4 🎉3

All 9 comments

Can you post a sample project which I can try?

satya164 on 19 Apr 2017

@satya164 Yup, here's a slimmed down example:
linkedAssetsIssue.zip

There is a sample react component (SampleComponent) with an image in a sample-module. Run yarn link from here.
There is a sample react project in company/apps/sample-app. Run yarn install from there, then yarn link "sample-module".
Run yarn run haul start -- --platform ios
Run the sample iOS app from company/apps/sample-app/ios
The <Image> in the SampleComponent doesn't load.

Thanks for taking a look into this… I'm a bit new to react to React and Webpack, so apologies if I'm doing something naive here 😬

eric-robinson on 20 Apr 2017

Thanks. It likely has to do with the fact that it's a symlink. We probably need to do extra work to handle symlinks.

satya164 on 20 Apr 2017

I have some time to dig into this. Can you point me in the right direction of where I should be working to try and get this fixed?

casesandberg on 11 Sep 2017

I really could benefit from having this too -- would this be something that would need to be handled in assetLoader.js to work around symlinks? If so, I could potentially dig into it a bit further as well.

ryanlanciaux on 6 Oct 2017

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.

itaym2 on 13 Dec 2017

👍4 🎉3

@eric-robinson Hi ,Have you solved this problem?

Xing-He on 24 Jan 2018

I was running into this issue where image assets from a library I had symlinked (via npm link) weren't loading, and @itaym2's solution worked perfectly for me, images from the linked library now load as expected!