React App with craco doesn't start in docker-compose

Question

I was given a React Project that I need to containerize with Docker Compose. I have a Dockerfile:

FROM node:latest

# Create app directory
WORKDIR /usr/src/app

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

COPY package.json ./

ADD . /usr/src/app

RUN npm install

EXPOSE 3000
CMD [ "npm", "start" ]

and the docker-compose.yml:

version: "3"

services:
  front:
    container_name: dev_front
    environment:
      - PATH= /app/node_modules/.bin:${PATH}
    build:
      context: .
    ports:
      - 3000:3000
    restart: always

• I saw this question that was linked to my problem:
  Create React App fails to build inside docker
  
  I tried to add the PATH environment like in the answer, but I stil get:

dev_front | craco: *** Cannot find ESLint loader (eslint-loader). ***
dev_front | The following changes are being made to your tsconfig.json file:
dev_front | - compilerOptions.paths must not be set (aliased imports are not supported)
dev_front | dev_front | ℹ ｢wds｣: Project is running at http://172.19.0.2/
dev_front | ℹ ｢wds｣: webpack output is served from
dev_front | ℹ ｢wds｣: Content not from webpack is served from /usr/src/app/public
dev_front | ℹ ｢wds｣: 404s will fallback to /

• Then I found this question:
  How do I run a webpack build from a docker container?
  The answer tells that, docker and webpack are in conflict to what is the internal container address. I changed my config.js file like in the answer.
  

craco.config.js:

const CracoAlias = require("craco-alias");

module.exports = {
    webpack: {
        alias: {
            'vscode': require.resolve('@codingame/monaco-languageclient/lib/vscode-compatibility')
        },
        devServer: {
            host: '0.0.0.0',
            port: 3000
        }
    },
    plugins: [{
        plugin: CracoAlias,
        options: {
            source: "tsconfig",
            baseUrl: "./src",
            tsConfigPath: "./tsconfig.extend.json"
        }
    }]
};

Still doesn't work.

Answer 1

It had to with the webpack version

The solution was to add the line in the Dockerfile:

ENV NODE_OPTIONS --openssl-legacy-provider

For more information: Node.js 17.0.1 Gatsby error - "digital envelope routines::unsupported ... ERR_OSSL_EVP_UNSUPPORTED"