React Native local components imports with @/ seems to fail

[mgscreativa]

Description

Trying to setup an Expo managed workflow project here to use CodePush the cli fails if I use local imports like this import EditScreenInfo from '@/components/EditScreenInfo'; If I import my local RN components with good old ./ it works. IE, if I change all lines like this import EditScreenInfo from '../../components/EditScreenInfo'; it works.

Repro Steps

1. Checkout repo
2. run npm install
3. run appcenter codepush release-react -a mgscreativa/ios-expo-code-push-plugin-managed-workflow --deployment-name "Development" --entry-file App.tsx --use-hermes --target-binary-version "1.0.0"

Expected behavior

Bundle created

Details

1. Is there a particular beacon/command that you are having trouble with?
   • e.g. appcenter tokens list
2. Which version of the App Center CLI are you using?
   • 2.14.4
3. Which OS version did you experience the issue on?
   • Ubuntu 22.04.1 LTS
4. What command line/shell are you using?
   • bash
5. What version of Node.js and NPM/Yarn are you using?
   • e.g. node v16.13.1
6. Additionally, you can provide verbose logs of a CLI command

Running "react-native bundle" command:

node node_modules/.bin/react-native bundle --assets-dest /tmp/code-push202378-13714-1aqtsrk.ef28/CodePush --bundle-output /tmp/code-push202378-13714-1aqtsrk.ef28/CodePush/main.jsbundle --dev false --entry-file App.tsx --platform ios
warn From React Native 0.72, your metro.config.js file should extend'@react-native/metro-config'. Please see the React Native 0.72 changelog, or copy the template at:
https://github.com/facebook/react-native/blob/main/packages/react-native/template/metro.config.js
warn Falling back to internal defaults.
Welcome to Metro v0.76.7
Fast - Scalable - Integrated

error Unable to resolve module @/components/EditScreenInfo from /media/martinb/SSD1TB/dev/Proyectos-Full-Stack/react-native-code-push-expo-plugin-managed-workflow/app/(tabs)/two.tsx: @/components/EditScreenInfo could not be found within the project or in these directories:
node_modules
1 | import { StyleSheet } from 'react-native';
2 |

    3 | import EditScreenInfo from '@/components/EditScreenInfo';
    | ^
    4 | import { Text, View } from '@/components/Themed';
    5 |
    6 | export default function TabTwoScreen() {.
    Error: Unable to resolve module @/components/EditScreenInfo from /media/martinb/SSD1TB/dev/Proyectos-Full-Stack/react-native-code-push-expo-plugin-managed-workflow/app/(tabs)/two.tsx: @/components/EditScreenInfo could not be found within the project or in these directories:
    node_modules
    1 | import { StyleSheet } from 'react-native';
    2 |
    3 | import EditScreenInfo from '@/components/EditScreenInfo';
    | ^
    4 | import { Text, View } from '@/components/Themed';
    5 |
    6 | export default function TabTwoScreen() {
    at ModuleResolver.resolveDependency (/media/martinb/SSD1TB/dev/Proyectos-Full-Stack/react-native-code-push-expo-plugin-managed-workflow/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:139:15)
    at DependencyGraph.resolveDependency (/media/martinb/SSD1TB/dev/Proyectos-Full-Stack/react-native-code-push-expo-plugin-managed-workflow/node_modules/metro/src/node-haste/DependencyGraph.js:277:43)
    at Object.resolve (/media/martinb/SSD1TB/dev/Proyectos-Full-Stack/react-native-code-push-expo-plugin-managed-workflow/node_modules/metro/src/lib/transformHelpers.js:169:21)
    at Graph._resolveDependencies (/media/martinb/SSD1TB/dev/Proyectos-Full-Stack/react-native-code-push-expo-plugin-managed-workflow/node_modules/metro/src/DeltaBundler/Graph.js:473:35)
    at Graph._processModule (/media/martinb/SSD1TB/dev/Proyectos-Full-Stack/react-native-code-push-expo-plugin-managed-workflow/node_modules/metro/src/DeltaBundler/Graph.js:261:38)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Graph._addDependency (/media/martinb/SSD1TB/dev/Proyectos-Full-Stack/react-native-code-push-expo-plugin-managed-workflow/node_modules/metro/src/DeltaBundler/Graph.js:372:20)
    at async Promise.all (index 2)
    at async Graph._processModule (/media/martinb/SSD1TB/dev/Proyectos-Full-Stack/react-native-code-push-expo-plugin-managed-workflow/node_modules/metro/src/DeltaBundler/Graph.js:322:5)
    at async Graph._addDependency (/media/martinb/SSD1TB/dev/Proyectos-Full-Stack/react-native-code-push-expo-plugin-managed-workflow/node_modules/metro/src/DeltaBundler/Graph.js:372:20)
    info Run CLI with --verbose flag for more details.
    Error: Failed to release a CodePush update.

[MikhailSuendukov]

Hi @mgscreativa, and thank you for reaching out to us. I've manage to reproduce the error you encountered in your project. Upon investigation, I found that the issue stems from the AppCenter CLI usage of the React Native package during the bundle assembly. Specifically, this error can be replicated by executing the command react-native bundle --platform ios --entry-file App.tsx. It's important to note that this error is not related to the AppCenter CLI, but rather to the React Native package. As such, I will be closing this issue for now, but if you have any questions, feel free to reopen this issue.