Failed Deploying to Vercel

🐛 bug report

Preflight Checklist

• I have read the [Contributing Guidelines][contributing] for this project.
• I agree to follow the [Code of Conduct][code_of_conduct] that this project
  adheres to.
• I have searched the issue tracker for an issue that matches the one I want
  to file, without success.

Description of the problem

Deploying React Three Fiber project to Vercel incorrectly renders webpage. The React production build fails while development works.

How has this issue affected you? What are you trying to accomplish?

I'm trying out React Three Fiber. Playing around with this example, I wanted to see if I could deploy it using Vercel. When it finishes deploying, I view the website and it is all black. The console gives some errors and finally a THREE.WebGLRenderer: Context Lost. error which I believes makes the webpage black.

This is the Vercel build console log (non-important parts cut):

[22:27:20.166] Running "vercel build"
[22:27:20.655] Vercel CLI 28.4.2
[22:27:20.872] Installing dependencies...
[22:27:21.208] yarn install v1.22.17
[22:27:21.219] warning package.json: No license field
[22:27:21.226] info No lockfile found.
[22:27:21.229] warning csb-po1jcy@1.0.0: No license field
[22:27:21.230] [1/4] Resolving packages...
[22:27:32.162] warning react-scripts > @svgr/webpack > @svgr/plugin-svgo > svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
[22:27:34.322] warning react-scripts > @svgr/webpack > @svgr/plugin-svgo > svgo > stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
[22:27:35.224] warning react-scripts > css-minimizer-webpack-plugin > cssnano > cssnano-preset-default > postcss-svgo > svgo > stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
[22:27:36.911] [2/4] Fetching packages...
[22:27:50.531] [3/4] Linking dependencies...
[22:27:50.535] warning "lamina > three-custom-shader-material@3.5.3" has incorrect peer dependency "three@>=0.140
[22:27:50.539] warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-syntax-flow@^7.14.5".
[22:27:50.539] warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-transform-react-jsx@^7.14.9".
[22:27:50.541] warning "react-scripts > react-dev-utils > fork-ts-checker-webpack-plugin@6.5.2" has unmet peer dependency "typescript@>= 2.7".
[22:27:50.545] warning "react-scripts > eslint-config-react-app > @typescript-eslint/eslint-plugin > tsutils@3.21.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[22:28:03.900] [4/4] Building fresh packages...
[22:28:04.855] Running "yarn run build"
[22:28:05.027] yarn run v1.22.17
[22:28:05.039] warning package.json: No license field
[22:28:05.049] $ react-scripts build
[22:28:06.183] Creating an optimized production build...
[22:28:38.633] Compiled successfully.
[22:28:38.764] Done in 33.74s.
[22:28:38.801] Build Completed in /vercel/output [1m]
[22:28:39.546] Deployed outputs in 1s

To Reproduce

1. Fork this project
2. Deploy to it Vercel
3. Open the the deployed website

Link to Build

https://csb-po1jcy.vercel.app/

Your Environment

Start with the linked CodeSandbox example and its Vercel deployment, reproducing the production-only black page while comparing the successful build log with the browser console errors. Done means the deployed React Three Fiber page renders correctly without the reported WebGL context loss.