mardi 6 août 2019

Webpack alias of named import

In a react-native app that is also targeting web & Tizen, I'm trying to use webpack aliasing to replace a subcomponent of react-native-web with a custom package.

Relevant webpack config looks as follows:

module.exports = {
  //...
  resolve: {
    alias: {
      'react-native': 'react-native-web',
      'react-native/Libraries/Alert': 'web/MyOwnAlertComponent', // does not work
      'react-native-web/dist/exports/Alert': 'web/MyOwnAlertComponent', // does not work either
      ...
    }
  }
};

The first alias successfully aliases all react-native imports towards react-native-web. The Alert component is also part of react-native, and is imported in code as:

import { Alert } from 'react-native';

In react-native-web however, this Alert component is only a stub with no implementation. So in the second line of my webpack aliases I wanted to alias the react-native Alert towards my own implementation. This does not seem to work like this.

So how can I point react-native/Libraries/Alert or 'react-native-web/dist/exports/Alert towards my own Alert implementation? I'd like to resolve this, if possible, without touching the original code, which is shared between Android, iOS, tvOS, web & Tizen.




Aucun commentaire:

Enregistrer un commentaire