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 aren’t equivalent, or the module resolver fails for any other reason, error outputs are 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"

Include babel-plugin-module-resolver with this command.

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

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.
"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 through a change to Babel’s configuration file. This change is made either to 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
        ...
    ],
    ...
  };

Next, clean and rebuild your package. If the module replacement was successful, you see output in your logs that indicates a library was swapped, for example:

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

Supported Third-Party Libraries and Services.

​About the preset

​Installation

​Setup

​Related topics

About the preset

Installation

Setup

Related topics