ReactNative not working inside docker when project folders mounted from different locations

51 views Asked by At

I have problem when running react-native development/build inside of Docker. My goal is to have separated folder on host machine for source code and run/build environment (node, android, ...).

When I have all files inside single folder and mounted into docker (using docker-compose + volumes), everything works fine and application build is successful. When I separate folders on host and mount everything together by docker-compose volumes, I get error. When merge everything back and mount just single folder, everything works again.

Error message:

BUNDLE  ./index.js 

error: Error: Unable to resolve module ./src/screens/loginScreen from /home/node/my_test/App.js: 

None of these files exist:
  * src/screens/loginScreen(.native|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  * src/screens/loginScreen/index(.native|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  24 | import { createDrawerNavigator } from '@react-navigation/drawer';
  25 |
> 26 | import LoginScreen from './src/screens/loginScreen';
     |                          ^
  27 | import HomeScreen from './src/screens/homeScreen';
  28 | import ProductScreen from './src/screens/productScreen';
  29 | import SettingsScreen from './src/screens/settingsScreen';
    at ModuleResolver.resolveDependency (/home/node/my_test/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:114:15)
    at DependencyGraph.resolveDependency (/home/node/my_test/node_modules/metro/src/node-haste/DependencyGraph.js:277:43)
    at Object.resolve (/home/node/my_test/node_modules/metro/src/lib/transformHelpers.js:169:21)
    at Graph._resolveDependencies (/home/node/my_test/node_modules/metro/src/DeltaBundler/Graph.js:473:35)
    at Graph._processModule (/home/node/my_test/node_modules/metro/src/DeltaBundler/Graph.js:261:38)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Graph._addDependency (/home/node/my_test/node_modules/metro/src/DeltaBundler/Graph.js:372:20)
    at async Promise.all (index 2)
    at async Graph._processModule (/home/node/my_test/node_modules/metro/src/DeltaBundler/Graph.js:322:5)
    at async Graph._traverseDependenciesForSingleFile (/home/node/my_test/node_modules/metro/src/DeltaBundler/Graph.js:249:5)

docker-compose WORKING (all project files in "/mnt/Docker/MyTest/"):

version: "3"
services:
    android:
        build:
            context: .
            dockerfile: Dockerfile-Android
        working_dir: /home/node/my_test/
        volumes:
            - /mnt/Docker/MyTest/:/home/node/my_test/
            - /mnt/Android/:/opt/android/
        environment:
            NODE_ENV: development
        network_mode: "host"
        healthcheck:
            disable: true
        tty: true

changes I need (separated location for source code) in docker-compose (volumes), but NOT working:

volumes:
    - /mnt/Docker/MyTest/:/home/node/my_test/
    - /home/devel/Code/MyTest/src/:/home/node/my_test/src/
    - /home/devel/Code/MyTest/App.js:/home/node/my_test/App.js
    - /home/devel/Code/MyTest/babel.config.js:/home/node/my_test/babel.config.js
    - /home/devel/Code/MyTest/index.js:/home/node/my_test/index.js
    - /home/devel/Code/MyTest/package-lock.json:/home/node/my_test/package-lock.json
    - /home/devel/Code/MyTest/package.json:/home/node/my_test/package.json
    - /home/devel/Code/MyTest/android/app/build.gradle:/home/node/my_test/android/app/build.gradle

    - /mnt/Android/:/opt/android/

Dockerfile (inspirated here):

FROM node:18.18.2-bookworm
ENV ACCEPT_EULA=Y

ARG ANDROID_NDK_VERSION=26.1.10909125
ARG ANDROID_BUILDTOOLS_VERSION=34.0.0
ARG CMAKE_VERSION=3.22.1
ARG WATCHMAN_VERSION=2023.10.23.00

ENV JAVA_HOME=/usr/lib/jvm/java-17-openjdk-amd64
ENV ANDROID_HOME=/opt/android
ENV ANDROID_PATH_CMDTOOLS=${ANDROID_HOME}/cmdline-tools/latest/bin
ENV ANDROID_PATH_BUILDTOOLS=${ANDROID_HOME}/build-tools/$ANDROID_BUILDTOOLS_VERSION
ENV ANDROID_PATH_NDK=${ANDROID_HOME}/ndk/$ANDROID_NDK_VERSION
ENV CMAKE_PATH=${ANDROID_HOME}/cmake/$CMAKE_VERSION/bin
ENV PATH=${ANDROID_PATH_BUILDTOOLS}:${CMAKE_PATH}:${ANDROID_PATH_CMDTOOLS}:${ANDROID_HOME}/emulator:${ANDROID_PATH_NDK}:${ANDROID_HOME}/platform-tools:/home/node/.npm-global/bin:${PATH}

RUN apt-get update -qq -y && apt-get upgrade -y && apt-get dist-upgrade -y && apt-get install -qq -y --no-install-recommends \
        apt-transport-https curl file gcc git g++ gnupg2 libc++1-15 libgl1 libtcmalloc-minimal4 make openjdk-17-jdk-headless openssh-client patch python3 python3-distutils rsync ruby ruby-dev tzdata unzip sudo zip \
        ninja-build jq shellcheck \
    && gem install bundler \
    && apt-get autoremove -y && apt-get autoclean -y && rm -rf /var/lib/apt/lists/* && apt-get clean;

# Install watchman
RUN wget -qcO - https://github.com/facebook/watchman/releases/download/v${WATCHMAN_VERSION}/watchman-v${WATCHMAN_VERSION}-linux.zip > /tmp/watchman.zip \
    && cd /tmp/ \
    && unzip watchman.zip \
    && cd watchman-v${WATCHMAN_VERSION}-linux/ \
    && mkdir -p /usr/local/var/run/watchman \
    && mv bin/* /usr/local/bin \
    && mv lib/* /usr/local/lib \
    && chmod 755 /usr/local/bin/watchman \
    && chmod 2777 /usr/local/var/run/watchman \
    && rm -rf /tmp/watchman* \

RUN mkdir -p ${ANDROID_HOME} \
    && chmod 777 -R ${ANDROID_HOME}

RUN npm install -g npm

USER node

Notes:

  • I entered container (docker exec ... bash) and checked, if is everything mounted inside and yes, content of "src" is present in "my_test" project folder and all mounted files are accessible by container "node" user.
  • I tried to change problematic source file App.js line 26 to: "import LoginScreen from 'src/screens/loginScreen';" but same problem.
  • I'm using same folder separation for React (web) development and works fine, just ReactNative is problematic.
  • Maybe not important, but "/mnt/Docker/" is mounted from external device on host system and I need to keep it.
  • Host: Debian 11, Docker version 24.0.7

Thank you

0

There are 0 answers