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