Closed reinoldus closed 3 years ago
danielroe
commented
3 years ago @reinoldus Initially I think you likely have far too many dependencies. Make sure any buildModules or dependencies needed only for your webpack build are listed in your devDependencies instead.
You could also try installing those ws dependencies separately, not just relying on the package resolution algorithm.
Finally, would you be able to provide a minimal reproduction? :pray:
reinoldus
commented
3 years ago I removed as much components and modules until it finally came to this error:
Error: The Serverless Function "index" is 117.28mb which exceeds the maximum size limit of 50mb. Learn More: https://vercel.link/serverless-function-size
So I assume I just have to many dependencies to deploy on vercel, but vue-instantsearch alone is huge, so I assume I just can't deploy on vercel?
Is there hope for nitro for me?
reinoldus
commented
3 years ago Okay, apparently you can just put everything in dev-dependencies if you are using webpack: https://jsramblings.com/do-dependencies-devdependencies-matter-when-using-webpack/
makes sense, but wasn't aware of that.
Out of curiosity: What would I want to put in dependencies if I am using webpack?
Still have to get rid of some dependencies, but should be doable.
danielroe
commented
3 years ago @reinoldus In a server context, the dependencies are just what is needed to run nuxt start. So nuxt + any dependencies used outside the webpack context (perhaps imported by your nuxt.config or serverMiddleware).
reinoldus
commented
3 years ago I found some odd behavior by the standalone build which bloats up the lambda size unnecessarily:
If you add some icon library (probably any other as well) the standalone build pulls in all the other icons into the server files, for example in this index.js: https://www.pastefile.com/rn6stp
All I imported was the "avatar" component from bootstrap vue, which uses one icon, but all the others icons are present as well.
The actual component imports it in a tree-shakeable was so that can't be the issue: https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/components/avatar/avatar.js
The build process seems to be aware of those exports not being used:
// UNUSED EXPORTS: BIconAlarm, BIconAlarmFill, BIconAlignBottom,
BIconAlignCenteBut still adds every icon like this for every page/component that uses icons:
const BIconBlank=/*#__PURE__*/makeIcon('Blank','');// --- Bootstrap Icons ---
// eslint-disable-next-line
const BIconAlarm=/*#__PURE__*/makeIcon('Alarm','<path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/><path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"/>');// eslint-disable-next-line
const BIconAlarmFill=/*#__PURE__*/makeIcon('AlarmFill','<path d="M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zm2.5 5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527z"/>');// eslint-disable-next-line
I had the same issue with font awesome
Repo to reproduce: https://github.com/reinoldus/icon-stuff
Also another question: Are all of these server functions minified and comments removed by vercel or somewhere else in the process?
reinoldus
commented
3 years ago I believe that I fixed it:
in [nuxt.config.js].build.extend:
if (isServer) {
const TerserPlugin = require('terser-webpack-plugin')
config.optimization.minimize = true
config.optimization.minimizer = [new TerserPlugin()]
}lambdasize (without icons) 43mb -> 27mb
any reason why this isn't enabled by default?
danielroe
commented
3 years ago @reinoldus Nuxt does use terser-webpack-plugin by default. See the docs. If you don't think it is, then please do raise an issue at https://github.com/nuxt/nuxt.js/issues and I'll definitely investigate.
reinoldus
commented
3 years ago I do not have the time right now to write a proper issue, but running the standalone build and looking at the files should show the problem.
I think how I came to the conclusion that something might be wrong in nuxt was by looking at this line: https://github.com/nuxt/nuxt.js/blob/2ec62617ced873fef97c73a6d7aa1271911ccfd5/packages/webpack/src/config/server.js#L63
The variable "_minifyServer" doesn't seem to exist so I assumed this: minimizer: _minifyServer ? this.minimizer() : [] always evaluates to [].
I am of course not very familiar with the nuxt internals but I hope it helps
danielroe
commented
3 years ago You're quite right, we don't normally minify the server as the space savings isn't normally worth it on server-side code. If you're encountering this issue, feel free to use build._minifyServer: true though note that this is not a supported API.
I keep getting this error:
"11:46:58.286 FATAL ERROR: invalid array length Allocation failed - JavaScript heap out of memory"
There is an extensive discussion about a similar error here: https://github.com/vercel/next.js/issues/7929
But not sure if it is related
vercel.json:
package.json:
Vercel log:
If I run
vercel dev, I am running into this error:If I add "bufferutil" and "utf-8-validate" to the package.json I keep getting the cannot find module error.