Webpack build failing - node.js

Question

Im trying to learn mongodb and trying to start the server.
I have come a long way, and understand mutch more now, but this strange error i don´t now.
When i run npm run build i get some error i can figure it out.
> xxxx#1.0.0 build
> webpack -p
node:internal/crypto/hash:71
this[kHandle] = new _Hash(algorithm, xofLen);
^
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (C:\wamp\www\xxxx\node_modules\webpack\lib\util\createHash.js:135:53)
at ConcatenatedModule._createIdentifier (C:\wamp\www\xxxx\node_modules\webpack\lib\optimize\ConcatenatedModule.js:563:16)
at new ConcatenatedModule (C:\wamp\www\xxxx\node_modules\webpack\lib\optimize\ConcatenatedModule.js:445:27)
at C:\wamp\www\xxxx\node_modules\webpack\lib\optimize\ModuleConcatenationPlugin.js:250:26
at SyncBailHook.eval [as call] (eval at create (C:\wamp\www\xxxx\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:16)
at SyncBailHook.lazyCompileHook (C:\wamp\www\xxxx\node_modules\tapable\lib\Hook.js:154:20)
at C:\wamp\www\xxxx\node_modules\webpack\lib\Compilation.js:1351:37
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\wamp\www\xxxx\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (C:\wamp\www\xxxx\node_modules\tapable\lib\Hook.js:154:20)
at Compilation.seal (C:\wamp\www\xxxx\node_modules\webpack\lib\Compilation.js:1342:27)
at C:\wamp\www\xxxx\node_modules\webpack\lib\Compiler.js:675:18
at C:\wamp\www\xxxx\node_modules\webpack\lib\Compilation.js:1261:4
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\wamp\www\xxxx\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:24:1)
at AsyncSeriesHook.lazyCompileHook (C:\wamp\www\xxxx\node_modules\tapable\lib\Hook.js:154:20)
at Compilation.finish (C:\wamp\www\xxxx\node_modules\webpack\lib\Compilation.js:1253:28)
at C:\wamp\www\xxxx\node_modules\webpack\lib\Compiler.js:672:17
at eval (eval at create (C:\wamp\www\xxxx\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:11:1)
at C:\wamp\www\xxxx\node_modules\webpack\lib\Compilation.js:1185:12
at C:\wamp\www\xxxx\node_modules\webpack\lib\Compilation.js:1097:9
at process.processTicksAndRejections (node:internal/process/task_queues:77:11) {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
Node.js v18.12.1
PS C:\wamp\www\xxxx> Webpack build failing
This is the webpack config file:
const path = require("path");
module.exports = {
mode: "development",
entry: path.resolve(__dirname, "src", "app"),
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
publicPath: "/",
hashFunction: "sha256",
},
resolve: {
extensions: [".js", ".jsx"],
},
devServer: {
historyApiFallback: true,
},
module: {
rules: [
{
test: /\.jsx?/,
loader: "babel-loader",
},
],
},
};
this is my dependencies
"dependencies": {
"#babel/core": "^7.11.6",
"#babel/node": "^7.10.5",
"#babel/preset-env": "^7.11.5",
"#babel/preset-react": "^7.10.4",
"#babel/register": "^7.11.5",
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.56",
"axios": "^0.20.0",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"body-parser": "^1.19.0",
"bootstrap": "^4.5.2",
"cors": "^2.8.5",
"eslint-plugin-react": "^7.20.6",
"express": "^4.17.1",
"history": "^4.7.2",
"md5": "^2.3.0",
"mongodb": "^3.6.1",
"mongoose": "^5.10.5",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-bootstrap": "^1.3.0",
"react-dom": "^16.13.1",
"react-redux": "^7.2.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.1",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-saga": "^1.1.3",
"uuid": "^8.3.0",
"webpack": "^4.44.1"
and when i run npm run dev i get this error:
> xxxx#1.0.0 dev
> webpack-dev-server --open
i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\wamp\www\xxxx
i ｢wds｣: 404s will fallback to /index.html
i ｢wdm｣: wait until bundle finished: /
[BABEL] Note: The code generator has deoptimised the styling of C:\wamp\www\xxxx\node_modules\react-dom\cjs\react-dom.development.js as it exceeds the
max of 500KB.
× ｢wdm｣: Hash: 69df8570757be8d1fecc
Version: webpack 4.46.0
Time: 8620ms
Built at: 2023-01-11 00:08:31
Entrypoint main =
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src/app 40 bytes {main} [built]
[./node_modules/ansi-html-community/index.js] 4.25 KiB {main} [built]
[./node_modules/react-dom/index.js] 1.32 KiB {main} [built]
[./node_modules/react/index.js] 189 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.25 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.89 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 960 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.55 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 401 bytes {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/app/components/Main.jsx] 3.54 KiB {main} [built]
[./src/app/index.jsx] 198 bytes {main} [built]
+ 436 hidden modules
ERROR in chunk main [entry]
bundle.js
multi C:\wamp\www\xxxx\node_modules\webpack-dev-server\client\index.js?http://localhost:8080 C:\wamp\www\xxxx\src\app
error:0308010C:digital envelope routines::unsupported
i ｢wdm｣: Failed to compile.
And i dont now what to do.

Answer 1

I think the problem comes from Node version 18. We have some ways to solve it. You may downgrade your Node version to 16. Upgrade your Webpack version. Or a simple method is add the environment NODE_OPTIONS=--openssl-legacy-provider for your run script.
export NODE_OPTIONS=--openssl-legacy-provider
npm run dev