Build Fails

[JimLynchCodes]

Why Add a "Publish to Prod" button if it just leads to a failing build?? @issaafalkattan

[13:14:30.049] Cloning github.com/JimLynchCodes/gh-brokes (Branch: main, Commit: fa67ca4)
[13:14:30.288] Previous build cache not available
[13:14:30.989] Cloning completed: 939.134ms
[13:14:31.092] Running "vercel build"
[13:14:31.494] Vercel CLI 28.13.2
[13:14:31.712] Installing dependencies...
[13:14:31.973] yarn install v1.22.17
[13:14:32.024] warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[13:14:32.025] [1/4] Resolving packages...
[13:14:32.177] [2/4] Fetching packages...
[13:14:41.583] [3/4] Linking dependencies...
[13:14:41.585] warning "next > styled-jsx > @babel/plugin-syntax-jsx@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
[13:14:49.493] [4/4] Building fresh packages...
[13:14:49.683] $ husky install
[13:14:49.742] husky - Git hooks installed
[13:14:49.746] Done in 17.78s.
[13:14:49.765] Detected Next.js version: 12.0.0
[13:14:49.769] Running "yarn run build"
[13:14:49.914] yarn run v1.22.17
[13:14:49.937] $ next build
[13:14:50.533] Attention: Next.js now collects completely anonymous telemetry regarding usage.
[13:14:50.533] This information is used to shape Next.js' roadmap and prioritize features.
[13:14:50.533] You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
[13:14:50.533] https://nextjs.org/telemetry
[13:14:50.533] 
[13:14:50.550] Browserslist: caniuse-lite is outdated. Please run:
[13:14:50.550] npx browserslist@latest --update-db
[13:14:50.550] 
[13:14:50.550] Why you should do it regularly:
[13:14:50.550] https://github.com/browserslist/browserslist#browsers-data-updating
[13:14:50.584] info  - Checking validity of types...
[13:14:54.543] warn  - The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config
[13:14:57.138] info  - Creating an optimized production build...
[13:14:57.155] warn  - Disabled SWC because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
[13:14:57.447] Browserslist: caniuse-lite is outdated. Please run:
[13:14:57.447] npx browserslist@latest --update-db
[13:14:57.447] 
[13:14:57.447] Why you should do it regularly:
[13:14:57.448] https://github.com/browserslist/browserslist#browsers-data-updating
[13:14:58.047] info  - Using external babel configuration from /vercel/path0/.babelrc
[13:14:58.275] [styled-jsx] Loading plugin from path: /vercel/path0/node_modules/styled-jsx-plugin-postcss/index.js
[13:15:00.110] Browserslist: caniuse-lite is outdated. Please run:
[13:15:00.111]   npx browserslist@latest --update-db
[13:15:00.111]   Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
[13:15:00.143] 
[13:15:00.143] warn - You have enabled the JIT engine which is currently in preview.
[13:15:00.143] warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
[13:15:01.788] Failed to compile.
[13:15:01.788] 
[13:15:01.788] HookWebpackError: error:0308010C:digital envelope routines::unsupported
[13:15:01.788]     at makeWebpackError (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:45539:9)
[13:15:01.788]     at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:29467:12
[13:15:01.788]     at eval (eval at create (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:140927:10), <anonymous>:91:1)
[13:15:01.788] -- inner error --
[13:15:01.789] Error: error:0308010C:digital envelope routines::unsupported
[13:15:01.789]     at new Hash (node:internal/crypto/hash:71:19)
[13:15:01.789]     at Object.createHash (node:crypto:133:10)
[13:15:01.789]     at getHashDigest (/vercel/path0/node_modules/next/dist/compiled/loader-utils/index.js:1:29141)
[13:15:01.789]     at /vercel/path0/node_modules/next/dist/compiled/loader-utils/index.js:1:31472
[13:15:01.789]     at String.replace (<anonymous>)
[13:15:01.789]     at Object.interpolateName (/vercel/path0/node_modules/next/dist/compiled/loader-utils/index.js:1:31381)
[13:15:01.789]     at /vercel/path0/node_modules/next/dist/build/webpack/plugins/copy-file-plugin.js:41:51
[13:15:01.789] caused by plugins in Compilation.hooks.processAssets
[13:15:01.789] Error: error:0308010C:digital envelope routines::unsupported
[13:15:01.790]     at new Hash (node:internal/crypto/hash:71:19)
[13:15:01.790]     at Object.createHash (node:crypto:133:10)
[13:15:01.790]     at getHashDigest (/vercel/path0/node_modules/next/dist/compiled/loader-utils/index.js:1:29141)
[13:15:01.790]     at /vercel/path0/node_modules/next/dist/compiled/loader-utils/index.js:1:31472
[13:15:01.790]     at String.replace (<anonymous>)
[13:15:01.790]     at Object.interpolateName (/vercel/path0/node_modules/next/dist/compiled/loader-utils/index.js:1:31381)
[13:15:01.791]     at /vercel/path0/node_modules/next/dist/build/webpack/plugins/copy-file-plugin.js:41:51
[13:15:01.791] 
[13:15:01.791] 
[13:15:01.791] > Build failed because of webpack errors
[13:15:01.867] error Command failed with exit code 1.
[13:15:01.867] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[13:15:01.884] Error: Command "yarn run build" exited with 1

[wahyunandanovan]

i tried to deploy on netlify and the problem is solved

[abdelrahman-essawy]

Here is how I solved it : link to my comment

[Jaked222]

I'm seeing this issue as well. The link for how @abdelrahman-essawy is also not working for me.

[roemvaar]

Did anyone deploy it to Vercel successfully? I'm facing the same problem and steps on how to solve it would be highly appreciate it. Thanks in advance.

[PLtier]

@issaafalkattan

[rahvis]

Please use the command below to fix the build fail (on Mac):

base) rahul@dhcp-39-11-203 react-landing-page-template-2021 % export NODE_OPTIONS=--openssl-legacy-provider
(base) rahul@dhcp-39-11-203 react-landing-page-template-2021 % yarn build
yarn run v1.22.22
$ next build
info  - Checking validity of types  
warn  - The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config
warn  - Disabled SWC because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
info  - Using external babel configuration from /Users/rahul/Documents/GitHub/react-landing-page-template-2021/.babelrc
[styled-jsx] Loading plugin from path: /Users/rahul/Documents/GitHub/react-landing-page-template-2021/node_modules/styled-jsx-plugin-postcss/index.js
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
info  - Generating static pages (3/3)
info  - Finalizing page optimization  

Page                                       Size     First Load JS
┌ ○ /                                      56 kB           127 kB
├   /_app                                  0 B            70.6 kB
└ ○ /404                                   3.06 kB        73.6 kB
+ First Load JS shared by all              70.6 kB
  ├ chunks/framework-0f8b31729833af61.js   42.4 kB
  ├ chunks/main-01dd2ea356b96b11.js        26.1 kB
  ├ chunks/pages/_app-b0b96b4e81a5ef8d.js  578 B
  ├ chunks/webpack-2f8c19cc1e0963ea.js     1.5 kB
  └ css/f2c0ba4aac291e6a.css               4.04 kB

○  (Static)  automatically rendered as static HTML (uses no initial props)

✨  Done in 7.91s.

Reference: https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported