Import Libraries in Your App with VMRP

You can use the Vega Module Resolver Preset (VMRP) to import libraries in your app. The preset replaces third-party libraries with their Vega-platform ported equivalencies. Use this preset to start using Vega for apps that already run on iOS or Android. VMRP is required because Vega implements split bundling by default, and the JavaScript bundling doesn’t support standard npm aliases and overrides. VMRP provides an aliasing solution to ensure proper module resolution in this split bundle architecture. Without this preset, you have to import Vega ported equivalencies of existing libraries. For example, if your app uses react-native-gesture-handler and you want to use this on Vega, you need to add this line to your code for the Vega version of the library:

import { ... } from '@amazon-devices/react-native-gesture-handler'

With VMRP, the import names can continue to be used as from 'react-native-gesture-handler' and at bundle-time, the library will be swapped out.

About the preset

The VMRP walks through the node_modules of the package using it, constructing the relationship between Vega-ported packages and the equivalent library being requested by your application. If the versions are equivalent, a mapping is established and the relationship is logged in the output. If the versions are not equivalent, or the module resolver fails for any other reason, error outputs will be logged.

Installation

The VMRP is distributed as a separate NPM package. To install, run the following command.

npm install --save-dev "@amazon-devices/kepler-module-resolver-preset"

Additionally, you should include babel-plugin-module-resolver with this command.

npm install --save-dev "babel-plugin-module-resolver"

Additionally, you need to install both the original third-party library and its Vega-ported library equivalent. For example, if you want to replace gesture handler with it’s Vega-equivalent library, you must install both packages in your package.json dependencies with their exact version, as shown below.

"dependencies": {
  ...
  "@amazon-devices/react-native-gesture-handler": "2.0.0+2.13.0",
  "react-native-gesture-handler": "2.13.0",
  ...
}

Setup

After installation, you need to let babel know that you have a new preset you want to use when building your code, which is done via a change to Babel’s configuration file. Generally, this is either a .babelrc or babel.config.js found in the same folder as your package.json file:

module.exports = {
    presets: [
        'module:metro-react-native-babel-preset',
        'module:@amazon-devices/kepler-module-resolver-preset', // Enables usage of VegaModuleResolverPreset
        ...
    ],
    ...
  };

After that, you should clean and re-build your package. If the module replacement was successful, you will see output in your logs that indicates a library was swapped, for example:

[stdout] transform: [kepler-module-resolver] Mapped <LibraryNameHere> to <VegaPortedLibraryNameHere>@<Version>

​About the preset

​Installation

​Setup

About the preset

Installation

Setup