Vercel and webp images

🙋Get Help
1

One thing I encountered was the maxAssetSize in production mode. Vercel wont let me deploy.

“WARNING in asset size limit: The following asset(s) exceed the recommended size limit (293 KiB).”

So I changed this:
//maxEntrypointSize: 300000,
//maxAssetSize: 300000,
maxEntrypointSize: 500000,
maxAssetSize: 500000,

In:
\node_modules@frontity\core\dist\src\config\webpack\performance.js

Seems like I still cant build in Vercel though. Will dig a bit deeper. But it removed the warning for “npx frontity dev --production”.

Vercel gives me this:
Error: Something went wrong with the build. Please run npx frontity dev --production locally to find out.

2

@bjerling The performance settings cannot be cause of the deploy problem because they don’t stop the build, they simply inform about the size. Did you find out what it was?

By the way, I’m going to relax those settings a bit anyway, to 500Kbs for client files and 5Mb for the server: https://github.com/frontity/frontity/pull/547

3

I havent found the cause yet. I can create a production build in my local environment. But it fails for Vercel and says that I should try to do a local build to get the proper error message.

This is what I get from Vercel:

14:36:51.387  	Retrieving list of deployment files...
14:36:52.706  	Downloading 69 deployment files...
14:36:53.143  	Analyzing source code...
14:36:53.166  	Warning: Due to `builds` existing in your configuration file, the Build and Development Settings defined in your Project Settings will not apply. Learn More: https://vercel.link/unused-build-settings
14:36:53.685  	Installing build runtime...
14:36:55.571  	Build runtime installed: 1886.360ms
14:36:55.944  	Looking up build cache...
14:36:56.003  	Build cache not found
14:36:56.377  	Downloading user files...
14:37:07.761  	> core-js@2.6.11 postinstall /vercel/3e0dec0d/node_modules/babel-polyfill/node_modules/core-js
14:37:07.761  	> node -e "try{require('./postinstall')}catch(e){}"
14:37:07.818  	e[96mThank you for using core-js (e[94m https://github.com/zloirock/core-js e[96m) for polyfilling JavaScript standard library!e[0m
14:37:07.818  	e[96mThe project needs your help! Please consider supporting of core-js on Open Collective or Patreon: e[0m
14:37:07.818  	e[96m>e[94m https://opencollective.com/core-js e[0m
14:37:07.818  	e[96m>e[94m https://www.patreon.com/zloirock e[0m
14:37:07.818  	e[96mAlso, the author of core-js (e[94m https://github.com/zloirock e[96m) is looking for a good job -)e[0m
14:37:07.823  	> core-js@2.6.11 postinstall /vercel/3e0dec0d/node_modules/babel-runtime/node_modules/core-js
14:37:07.823  	> node -e "try{require('./postinstall')}catch(e){}"
14:37:07.882  	> core-js@3.6.5 postinstall /vercel/3e0dec0d/node_modules/core-js
14:37:07.882  	> node -e "try{require('./postinstall')}catch(e){}"
14:37:07.937  	> ejs@2.7.4 postinstall /vercel/3e0dec0d/node_modules/ejs
14:37:07.937  	> node ./postinstall.js
14:37:07.987  	Thank you for installing e[35mEJSe[0m: built with the e[32mJakee[0m JavaScript build tool (e[32mhttps://jakejs.com/e[0m)
14:37:08.481  	npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents):
14:37:08.481  	npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
14:37:08.481  	npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules/fsevents):
14:37:08.481  	npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
14:37:08.484  	added 838 packages from 550 contributors in 11.237s
14:37:08.827  	24 packages are looking for funding
14:37:08.827  	  run `npm fund` for details
14:37:08.867  	Running "build" script in "package.json"
14:37:08.868  	Running "npm run build"
14:37:09.056  	> mossbjerling-frontity@1.0.0 build /vercel/3e0dec0d
14:37:09.056  	> frontity build
14:37:09.806  	mode: production
14:37:09.896  	Building es5 bundle
14:37:24.441  	Building module bundle
14:37:32.460  	Building server bundle
14:37:43.185  	Error: Something went wrong with the build. Please run `npx frontity dev --production` locally to find out.
14:37:43.185  	    at Object.build (/vercel/616ce530ab5f4630/.build-utils/.builder/node_modules/@frontity/now/dist/index.js:84:19)
14:37:43.185  	    at async buildStep (/var/task/sandbox-worker.js:21117:20)
14:37:43.185  	    at async mainSub (/var/task/sandbox-worker.js:20848:9)
14:37:43.186  	    at async main (/var/task/sandbox-worker.js:20711:5)
14:37:45.134  	Done with "package.json"
4

Solved the issue with Vercel.

I had made some changes to support lazy loaded webp images in the
@frontity/components/Image.tsx

<source type="image/webp" media="" />

And I suppose Vercel uses a frontity CDN version when compiling. Therefore the mismatch with my local build and Vercel. A little bit confusing as Vercel told me to do a production build locally to get the proper error message… :slight_smile:

3 Likes