Docker: Cannot find file for a React project

Question

I am working on setting up a React project in docker. The project runs fully well in my local environment, but when I try build it using Docker, I run into some build issue

Step 7/7 : RUN npm run build
 ---> Running in 31be0cd260c7

> educollect@0.1.0 build /app
> react-scripts build

Creating an optimized production build...
Failed to compile.

./src/Pages/Steps.js
Cannot find file '../Components/Steppers' in './src/Pages'.


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! educollect@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1

Here are my files:

Dockerfile

FROM node:alpine

WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH

COPY package.json /app/package.json
RUN npm install

COPY . /app

RUN npm run build

Package.json

{
  "name": "myproject",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.9.5",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.45",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.1",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.19.2",
    "node-sass": "^4.13.1",
    "prop-types": "^15.7.2",
    "query-string": "^6.11.1",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

When I try to build it using this command:

docker build -t myproject:latest .

I run into the build. Any form of help will be highly appreciated.

score 1 · Answer 1 · answered Mar 24 '20 at 20:52

1

The container is missing one of the components:

./src/Pages/Steps.js Cannot find file '../Components/Steppers' in './src/Pages'.

Double check that the Steps.js file is in the container by logging on the container.

answered Mar 24 '20 at 20:52

D. Richard

460
3
12

Steps.js is present in my project directory. It's inside the `myproject/src/Pages` directory. – Promise Preston Mar 24 '20 at 20:55
Alright well your node process is crashing inside your container because it cant find that file. Look at the error message again, Docker never lies – D. Richard Mar 24 '20 at 20:57
I understand that Docker doesn't lie, but how do I fix this. Is there any step that I am missing? – Promise Preston Mar 24 '20 at 21:00
Read my answer again – D. Richard Mar 24 '20 at 21:02
Does logging into the container seem different from checking the project structure in my local? Because the file `Steps.js` is on my local project structure. – Promise Preston Mar 24 '20 at 21:03
I would say yes seeing Docker is a virtual OS completely separate from the host machine – D. Richard Mar 24 '20 at 21:06
1

@PromisePreston, Richard is correct any way. It's likely a case sensitivity issue. That base image might not forgive you of any inconsistency in filenames case. Confirm the case of the files you are referencing. _index.js_ not _Index.js_. – Johnson Bayo Adekunle Mar 25 '20 at 14:48
OP actually check this file '../Components/Steppers' this is the file missing – D. Richard Mar 25 '20 at 15:05
@Johnson case sensitivity has nothing to do with the base image – D. Richard Mar 25 '20 at 15:13
1

@Richard .. '../Components/Steppers' is not a file in this case. It resolves to index.js in that folder – Johnson Bayo Adekunle Mar 27 '20 at 11:29
1

@Richard My point is that '../Components/Steppers' does not necessarily resolve to Steppers.js. It could resolve to index.js in that folder to import the whole folder as a module. Check the answer to this [https://stackoverflow.com/questions/44092341/how-do-index-js-files-work-in-react-component-directories] – Johnson Bayo Adekunle Apr 07 '20 at 21:56

score 0 · Accepted Answer · answered Jan 11 '21 at 05:39

Here's how I fixed it

The issue was a case-sensitivity issue. I had inconsistencies in the filename cases. I was using upper-cases incorrectly for them.

I was referencing index.js as Index.js and also referencing some other files in capital cases incorrectly instead of using actual cases that they have.

I fixed them all and referenced them properly and the build ran successfully.

Many thanks to Johnson Bayo Adekunle for your assistance.

That's all.

I hope this helps

Docker: Cannot find file for a React project

2 Answers2