Trouble with Metro and the react-native-kepler package

Currently I’m changing the alias of all the Amazon specific imports from @amzn to @amazon-devices, and I’m having some trouble with the package @amazon-devices/react-native-kepler which is causing issues with Metro when building VPKG files. If I go back to @amzn/react-native-kepler (old alias) it is fixed and builds the VPKG as expected.

Do I need to update some confiugs following this update?

  • Logs:
   ~/Projects/Kepler-Client git:(refactor/replace-webview-package) ✗ 
➜   npm run build:debug

> @amzn/kepler-client@1.0.0 build:debug
> react-native build-kepler --build-type Debug --build-number 12

- Awaiting resources 
warn This command is deprecated and will be removed in a future version of the Vega CLI plugin.
warn Please replace usage with 'build-vega' instead.
warn Invoking 'build-vega' with respective args...
info Building bundle artifacts for index.js
info JS system bundle functionality unsupported for "Debug" build types. Using regular bundle...
info Building regular bundle for index.js
                Welcome to Metro v0.76.9
              Fast - Scalable - Integrated


error Unable to resolve module react-native from /home/devis/Projects/Kepler-Client/index.js: react-native could not be found within the project or in these directories:
  node_modules
   5 |  */
   6 |
>  7 | import { AppRegistry, LogBox } from 'react-native'
     |                                      ^
   8 | import { App } from './src/App'
   9 | import { name as appName } from './app.json'
  10 |.
Error: Unable to resolve module react-native from /home/devis/Projects/Kepler-Client/index.js: react-native could not be found within the project or in these directories:
  node_modules
   5 |  */
   6 |
>  7 | import { AppRegistry, LogBox } from 'react-native'
     |                                      ^
   8 | import { App } from './src/App'
   9 | import { name as appName } from './app.json'
  10 |
    at ModuleResolver.resolveDependency (/home/devis/Projects/Kepler-Client/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:139:15)
    at DependencyGraph.resolveDependency (/home/devis/Projects/Kepler-Client/node_modules/metro/src/node-haste/DependencyGraph.js:277:43)
    at Object.resolve (/home/devis/Projects/Kepler-Client/node_modules/metro/src/lib/transformHelpers.js:169:21)
    at Graph._resolveDependencies (/home/devis/Projects/Kepler-Client/node_modules/metro/src/DeltaBundler/Graph.js:472:35)
    at Graph._processModule (/home/devis/Projects/Kepler-Client/node_modules/metro/src/DeltaBundler/Graph.js:260:38)
    at async Graph._traverseDependenciesForSingleFile (/home/devis/Projects/Kepler-Client/node_modules/metro/src/DeltaBundler/Graph.js:248:5)
    at async Promise.all (index 0)
    at async Graph.initialTraverseDependencies (/home/devis/Projects/Kepler-Client/node_modules/metro/src/DeltaBundler/Graph.js:232:5)
    at async DeltaCalculator._getChangedDependencies (/home/devis/Projects/Kepler-Client/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:229:25)
    at async DeltaCalculator.getDelta (/home/devis/Projects/Kepler-Client/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:112:16)
  • package.json
{
  "name": "@amzn/kepler-client",
  "version": "1.0.0",
  "files": [
    "dist"
  ],
  "scripts": {
    "clean": "rm -rf node_modules buildinfo.json dist bvm",
    "start": "react-native start",
    "test": "jest --colors ",
    "test:snapshot": "jest --colors --updateSnapshot",
    "lint": "eslint src tst --ext .js,.ts,.tsx",
    "lint:fix": "eslint src tst --ext .js,.ts,.tsx --fix",
    "compile": "tsc -p tsconfig.json",
    "build": "npm run compile",
    "build:release": "react-native build-kepler --build-type Release --build-number 1 --target armv7",
    "build:debug": "react-native build-kepler --build-type Debug --build-number 1 --target armv7",
    "build:app": "npm-run-all build:release build:debug",
    "config:generate": "ts-node scripts/build.ts",
    "release": "npm-run-all lint test build build:app"
  },
  "dependencies": {
    "@amazon-devices/headless-task-manager": "^1.2.4",
    "@amazon-devices/kepler-adid-retriever": "^1.0.14",
    "@amazon-devices/kepler-graphics": "^2.3.5",
    "@amazon-devices/kepler-media-account-login": "^1.1.12",
    "@amazon-devices/kepler-media-content-launcher": "^2.0.13",
    "@amazon-devices/kepler-media-controls": "^1.0.17",
    "@amazon-devices/kepler-media-types": "^1.0.0",
    "@amazon-devices/kepler-performance-api": "^0.1.2",
    "@amazon-devices/keplerscript-appstore-iap-lib": "^2.12.13",
    "@amazon-devices/keplerscript-netmgr-lib": "^2.0.18",
    "@amazon-devices/react-native-async-storage__async-storage": "~2.0.2+1.23.1",
    "@amazon-devices/react-native-device-info": "^2.0.1758683737",
    "@amazon-devices/react-native-kepler": "^2.0.1758683737",
    "@amazon-devices/webview": "^3.3.1769932800",
    "@amzn/device-config-lib": "^1.0.0",
    "@amzn/package-manager-lib": "~1.0.0",
    "@react-native-async-storage/async-storage": "1.23.1",
    "react": "18.2.0",
    "react-native": "0.72.0",
    "react-native-uuid": "^2.0.3"
  },
  "devDependencies": {
    "@amzn/kepler-cli-platform": "^0",
    "@react-native-community/cli": "11.3.2",
    "@react-native/eslint-config": "0.72.2",
    "@react-native/metro-config": "^0.72.6",
    "@testing-library/react-native": "^7.2.0",
    "@tsconfig/react-native": "^3.0.2",
    "@types/ejs": "^3.1.5",
    "@types/fs-extra": "^11.0.4",
    "@types/jest": "^28.0.0",
    "@types/node": "^24.7.2",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^5.30.0",
    "archiver": "^7.0.1",
    "babel-jest": "^28.0.0",
    "ejs": "^3.1.10",
    "eslint": "^8.12.0",
    "fs-extra": "^11.2.0",
    "jest": "^28.0.0",
    "metro-react-native-babel-preset": "^0.76.5",
    "mustache": "^4.2.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.6.2",
    "react-test-renderer": "18.2.0",
    "ts-jest": "^28.0.0",
    "ts-node": "^10.9.2",
    "typescript": "4.8.4"
  },
  "kepler": {
    "projectType": "application",
    "appName": "kepler-client",
    "targets": [
      "tv"
    ],
    "features": [
      "vega"
    ],
    "api": 0.1
  }
}

Hi @Devis,

Thank you for your question about the Metro and react-native-kepler package issue.

This is a common issue encountered during the @amzn@amazon-devices namespace migration. The react-native-kepler package provides the Metro resolver config that tells Metro where to find react-native (system-bundled on Vega). A few things to check:

  1. Update your Metro config Your metro.config.js likely still references @amzn/react-native-kepler. Update it:

    const { getDefaultConfig } = require('@amazon-devices/react-native-kepler/metro-config');
    
  2. Migrate remaining @amzn packages You still have @amzn/device-config-lib and @amzn/package-manager-lib under the old scope. Mixing scopes can cause resolution issues — migrate all @amzn packages to @amazon-devices.
    Use the scope migrator tool to catch anything missed (imports, configs, etc.): Developer's Guide: Simplifying npm scope migration with Amazon provided tooling

  3. Clean install

    rm -rf node_modules package-lock.json
    npm install
    
  4. Update your build command Replace build-kepler with build-vega in your package.json scripts — the logs show build-kepler is deprecated.

If the issue persists after these steps, please share your metro.config.js so we can take a closer look.

Thanks for helping us improve the Vega platform.

Warm regards,
Aishwarya

Hello Aishwarya,

  1. My Metro config actually references @react-native/metro-config. I also checked @amazon-devices/react-native-kepler/metro-config but there isn’t a “metro-config” folder there. Here’s the whole script:
// metro.config.js

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config')

/**
+ * Metro configuration
+ * https://facebook.github.io/metro/docs/configuration
  *
+ * @type {import('metro-config').MetroConfig}
  */
const config = {}

module.exports = mergeConfig(getDefaultConfig(__dirname), config)
  1. These packages return 404 with the @amazon-devices alias. Is there an alternative for these?
    • @amzn/device-config-lib to access the device config to detect if Captions are enabled. Documentation
    • @amzn/package-manager-lib required for IAP. Documentation
  2. and 4. - I followed your instructions and did a clean install. But I still get the same error.

Thanks!

Hi @Devis,

Thanks for the follow-up.

We’ve identified the root cause: your package.json has @amzn/kepler-cli-platform as a devDependency. This package hardcodes @amzn/react-native-kepler as the Metro platform resolver, which is why Metro can’t resolve react-native after your migration to @amazon-devices.

Fix: Replace @amzn/kepler-cli-platform with @amazon-devices/kepler-cli-platform in your devDependencies, then do a clean install.

Regarding @amzn/device-config-lib and @amzn/package-manager-lib: These packages have not been migrated to the @amazon-devices scope and no equivalents exist. Keep using the @amzn scope for these two packages for now.

Let us know if you run into anything else.

Warm regards,
Aishwarya

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.