CODEWITHSUNDEEP
reactjsdocker
Chiamaka Nwolisa
Chiamaka Nwolisa

Reputation: 971

Docker build fails to resolve absolute path

I have a react app where I use absolute imports instead of relative imports (https://medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d). Everything works as should on my local machine but when I try to build on docker it fails.

I have an .env file which contains NODE_PATH='./' and create-react-app is configured in such a way that its webpack configuration will automatically pick up ‘.env’ files and read the NODE_PATH environment variable, which can then be used for absolute imports so something like src/components/NavBar, resolves.

But when I try to build on docker, it doesn't resolve but throws this error.

Cannot find module: 'src/components/NavBar'. Make sure this package is installed.
You can install this package by running: yarn add src/components/NavBar.

Any pointers would be appreciated.

Today is my first time working with Docker so I’m a noob.

Additional Info:

I use a Dockerfile and a docker-compose.yml file.

I use react-app-rewired (https://github.com/timarney/react-app-rewired) which basically helps you override create-react-app webpack configs without ejecting.

Dockerfile

FROM node:10.15.1

ENV NODE_ENV production

RUN mkdir /usr/invoicing

COPY . /usr/invoicing

WORKDIR /usr/invoicing

RUN npm install

RUN npm run build

docker-compose.yml

version: '3.5'
services:
  web:
    container_name: invoice-frontend
    build:
      context: .
      dockerfile: Dockerfile
    command: npm start
    ports:
      - '3000:3000'
    networks:
      - frontend
    environment:
      - NODE_ENV=production
networks:
  frontend:
    driver: 'bridge'

Upvotes: 1

Views: 4492

Answers (2)

MrGabGab
MrGabGab

Reputation: 1

For those who are building an image of your Next.js project: When creating a project through the Next.js CLI with TypeScript, the CLI places TypeScript into dev dependencies.

So when building with NODE_ENV=production and next build, the dev dependencies are not used. If TypeScript is not used, your tsconfig.json is not processed, so all of your absolute paths are not computed.

I encountered this issue with the following Dockerfile:

FROM node:20.11.0-bullseye-slim

# Create destination directory
WORKDIR /app

# A wildcard is used to ensure both package.json AND package-lock.json are copied
COPY package*.json ./

# Set environment variables & args for deployment
ARG NODE_ENV=production
ENV NODE_ENV=${NODE_ENV}
ARG ENV=production
ENV ENV=${ENV}
ARG PORT=3000
ENV PORT=${PORT}
ARG BACK_HOST
ENV BACK_HOST=${BACK_HOST}

# Install app dependencies
RUN npm install

# Bundle app source
COPY . .

# Build the app
RUN npm run build

# Expose the port the app runs on
EXPOSE ${PORT}:${PORT}

CMD [ "npm", "run", "start" ]

So removing the following lines from the Dockerfile solved my absolute path problem:

ARG NODE_ENV=production
ENV NODE_ENV=${NODE_ENV}

Upvotes: 0

Chiamaka Nwolisa
Chiamaka Nwolisa

Reputation: 971

I’ve found the problem and the solution:

Apparently, I named a folder navBar and when I renamed it to be NavBar, Git didn't detect a change in the foldername and didn't do anything about it. So on my local machine (which is a Mac), it shows NavBar but on Gitlab which uses git commits, it still appeared as navBar and cos Docker runs on Linux and Linux is case sensitive, the build fails.

This also explains why the build worked on my local machine. Mac’s filesystem hfplus is case insensitive so it didn't see a problem.

To solve the renaming problem; I used the git mv command. There’s a caveat tho; if you want to rename a foldername to folderName (ie change the case) on case insensitive file systems like Mac, you’ll get an error saying fatal: renaming ‘foldername’ failed: Invalid argument.

In order to rename the folder successfully, use this command. git mv foldername tempname && git mv tempname folderName. This splits the process into two steps; first renaming the foldername to tempname and the renaming tempname to folderName.

Hopefully, this helps someone 😊

Upvotes: 9

Related Questions