Error with docker and react, digital envelope routines::unsupported-CodePudding

I have enrolled in a docker course and the instructor has provided a starter project with some rather old react code.

I dockerized the react project, here's the simple Dockerfile:

FROM node

WORKDIR /app

COPY package.json .

RUN npm i

COPY . .

EXPOSE 3000

CMD ["npm", "start"]

Then I built the image:

docker build -t goals-react .

And ran a container in attached mode:

docker run --name goals-app --rm -p 3000:3000 goals-react

This is the output I received:

> frontend@0.1.0 start
> react-scripts start

ℹ ｢wds｣: Project is running at http://172.17.0.4/
ℹ ｢wds｣: webpack output is served from
ℹ ｢wds｣: Content not from webpack is served from /app/public
ℹ ｢wds｣: 404s will fallback to /

Starting the development server...

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)      
    at Object.createHash (node:crypto:130:10)
    at module.exports (/app/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/app/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/app/node_modules/webpack/lib/NormalModule.js:471:10)
    at /app/node_modules/webpack/lib/NormalModule.js:503:5
    at /app/node_modules/webpack/lib/NormalModule.js:358:12
    at /app/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/app/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/app/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
/app/node_modules/react-scripts/scripts/start.js:19
  throw err;
  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)      
    at Object.createHash (node:crypto:130:10)
    at module.exports (/app/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/app/node_modules/webpack/lib/NormalModule.js:417:16)
    at /app/node_modules/webpack/lib/NormalModule.js:452:10
    at /app/node_modules/webpack/lib/NormalModule.js:323:13
    at /app/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /app/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/app/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /app/node_modules/babel-loader/lib/index.js:59:103 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v17.1.0

I assumed it was because the react project was using an old version of react, so I upgraded the package.json file with the following commands:

npx npm-check-updates -u
npm install

Then I removed and recreated the image, and then ran a new container:

docker rmi goals-react
docker build -t goals-react .
docker run --name goals-app --rm -p 3000:3000 goals-react

But to my surprise I received the same error. So I googled digital envelope routines::unsupported and I found yet another stackoverflow discussion.

I executed the following command:

export NODE_OPTIONS=--openssl-legacy-provider

Then I rebuilt the image and restarted the container, but to no avail. I decided to read the error message more thoroughly and it seems to be a webpack error. I went to the webpack github page and I realised that someone else had the same issue, right here, however the issue is closed. They also recommended the above command, but that obviously doesn't work for me.

Thanks in advance for any feedback and help.

Edit:

As requested by @MikiBelavista, here is the package.json file:

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.15.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "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"
    ]
  }
}

CodePudding user response：

Change your line

"start": "react-scripts start",

"start": "react-scripts --openssl-legacy-provider start"

But be aware of that OpenSSL implementations of algorithms that have been deemed legacy. More OpenSSl