Error: error:0308010C:digital envelope routines::unsupported - Next.js [duplicate]

Question

This problem occurs in the Next.js project with Node version 17 I tried a lot of solutions but this solution is the best you can solve this problem if it occurred with you

> [email protected] dev
> next dev

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
ready - started server on http://localhost:3000
node:internal/crypto/hash:67
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

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 (E:\Collage\COURSES\react.js projects2\01.Build and Deploy a Premium Next JS React Website _ Landing Page, Business Website, Portfolio\nextjs_landing_page\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (E:\Collage\COURSES\react.js projects2\01.Build and Deploy a Premium Next JS React Website _ Landing 
Page, Business Website, Portfolio\nextjs_landing_page\node_modules\webpack\lib\NormalModule.js:417:16)
    at handleParseError (E:\Collage\COURSES\react.js projects2\01.Build and Deploy a Premium Next JS React Website _ Landing Page, Business Website, Portfolio\nextjs_landing_page\node_modules\webpack\lib\NormalModule.js:471:10)
    at E:\Collage\COURSES\react.js projects2\01.Build and Deploy a Premium Next JS React Website _ Landing Page, Business Website, Portfolio\nextjs_landing_page\node_modules\webpack\lib\NormalModule.js:503:5
    at E:\Collage\COURSES\react.js projects2\01.Build and Deploy a Premium Next JS React Website _ Landing Page, Business Website, Portfolio\nextjs_landing_page\node_modules\webpack\lib\NormalModule.js:358:12
    at E:\Collage\COURSES\react.js projects2\01.Build and Deploy a Premium Next JS React Website _ Landing Page, Business Website, Portfolio\nextjs_landing_page\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (E:\Collage\COURSES\react.js projects2\01.Build and Deploy a Premium Next JS React Website _ Landing Page, B    at Array.<anonymous> (E:\Collage\COURSES\react.js projects2\01.Build and Deploy a Premium Next JS React Website _ Landing Page, Business Website, Portfolio\nextjs_landing_page\node_modules\loader-runner\lib\LoaderRunner.js:205:4) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
Node.js v17.2.0

Answer 1

First, install cross-env

npx install cross-env

then, Just set this in scripts in package.json

"dev": "cross-env NODE_OPTIONS='--openssl-legacy-provider' next dev",

Last run this command

npm run dev