Dockerfile Build Issue in GitHub Actions: Module Not Found Error

Question

I am encountering an issue while building a Docker image in a GitHub Actions workflow. The Dockerfile is configured to build a Node.js application and deploy it to Cloud Run. The build process fails during the "yarn build" step with the error message:

Module not found: Error: Can't resolve '@/utils/actions/api/my-axios' in '/app/src/store'

The Dockerfile is as follows:

# Use the official Node.js runtime as the base image
FROM node:19.9.0-alpine as build
# Set the working directory in the container
WORKDIR /app
# Copy package.json and package-lock.json (or yarn.lock) to the container
COPY package.json yarn.lock ./
# Copy the rest of the application code to the container
COPY . .
# Debugging: list contents of the directory
RUN ls -l /app && tree -L 3 /app
# Install project dependencies
RUN yarn install
# Compile TypeScript to JavaScript
RUN yarn build
# Use Nginx as the production server
FROM nginx:alpine
# Copy the built React app to Nginx's web server directory
COPY nginx/nginx.conf /etc/nginx/nginx.conf
COPY --from=build /app/build /usr/share/nginx/html

The error occurs specifically in the my-axios.ts file, which is located in the utils directory of the application.

The GitHub Actions workflow is responsible for building and deploying the Docker image to Google Cloud Run. The workflow file is as follows:

name: Google Cloud Deployment - Build And Deploy Server
on:
 workflow_dispatch:
env:
 PROJECT_ID: ${{ secrets.GCR_PROJECT_ID }}
 IMAGE_NAME: dashboard-dev
 SERVICE: -ashboard-dev
 REGION: europe-west1
jobs:
 build-push-gcr:
 name: Build and Push to GCP
 runs-on: ubuntu-latest
 steps:
 # ... (omitted for brevity)
 - name: Build Docker Image
 run: docker build -t ${{ env.IMAGE_NAME }}:lastest .
 # ... (omitted for brevity)

I need assistance in modifying the Dockerfile or GitHub Actions workflow to resolve the "Module not found" error during the build process.

Docker error message:

------
 > [build 7/7] RUN yarn build:
0.555 yarn run v1.22.19
0.588 $ craco build
2.395 Creating an optimized production build...
9.306 Failed to compile.
9.306 
9.307 Module not found: Error: Can't resolve '@/utils/actions/api/my-axios' in '/app/src/store'
9.307 
9.307 
9.343 error Command failed with exit code 1.
9.343 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
------
Dockerfile:23
--------------------
 21 | 
 22 | # Compile TypeScript to JavaScript
 23 | >>> RUN yarn build
 24 | 
 25 | 
--------------------
ERROR: failed to solve: process "/bin/sh -c yarn build" did not complete successfully: exit code: 1
Error: Process completed with exit code 1.

Here also the tree:

/app
├── Dockerfile
├── README.md
├── babel.config.js
├── craco.config.js
├── jest.config.js
├── nginx
│ └── nginx.conf
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── store
│ │ └── store.ts
│ ├── styles
│ │ ├── index.ts
│ │ └── modal.styles.ts
│ └── utils
│ └── actions
│ └── Api
│ └── my-axios.ts
├── tailwind.config.js
├── tsconfig.json
└── yarn.lock

under my my-axios.ts file in utils directory

import axios from "axios";
const axiosInstance = axios.create({
 baseURL: process.env.REACT_APP_EXPANDER_SERVER,
 withCredentials: true,
})
export default axiosInstance;

carco.config.js

require("dotenv").config();
const path = require("path");
const webpack = require("webpack");
module.exports = {
 webpack: {
 configure: {
 resolve: {
 fallback: {
 process: require.resolve("process/browser"),
 zlib: require.resolve("browserify-zlib"),
 stream: require.resolve("stream-browserify"),
 util: require.resolve("util"),
 buffer: require.resolve("buffer"),
 asset: require.resolve("assert"),
 },
 },
 },
 plugins: [
 new webpack.ProvidePlugin({
 Buffer: ["buffer", "Buffer"],
 process: "process/browser",
 }),
 ],
 alias: {
 "@": path.resolve(__dirname, "./src"),
 },
 },
};

• Azeem: In your directory structure, the nested directory starts with capital letter Api whereas in the error log it's in the small letter i.e. @/utils/actions/api/my-axios. Apparently, that seems to be issue here.
• Roni Jack Vituli: So all the name of directory should be lowercase? @Azeem
• Azeem: The names are case sensitive on Linux systems i.e. ubuntu-latest. So, you need to adjust it accordingly.
• Azeem: You're welcome! In case of such not found errors, always make sure that the item in the error exists or not.

Answer 1

What might be missing from your troubleshooting is to check for case-sensitivity. While you might not be used to it if you are using a Windows for example. Linux-based systems are case-sensitive. I would recommend checking This Stack Exchange Link. When checking your file tree, you can see that under utils>actions you have Api. With a capital A in the beginning. whereas the error clearly states its looking for @/utils/actions/api/my-axios where the api is all small letters. Thoroughly investigating the errors (especially for such cases) should be your first to-go when troubleshooting.