For a while I've been building assets with Vite locally and committing before deploying. I know this is not the best method and since starting to use Reverb, it doesn't pull in my staging or production environment variables, so they fail to work properly.
I updated one of the deployment hooks on Envoyer and included:
npm ci && npm run build
This takes a few minutes to run but the actual build drops out with: fatal error reached heap limit allocation failed javascript heap out of memory...
Possibly due to the creation of node_modules taking a few minutes.
Has anybody seen this before, or have any advise on a better solution?
Thanks, Marc
Hey Marc, it's pretty rare to get a heap limit error when building so I suspect it's something to do with a dependancy you're using, possibly a bug with one of them.
Could you list your package.json
file dependancies so I can take a closer look?
Thanks Alex!:
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"@alpinejs/focus": "^3.12.0",
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/forms": "^0.5.2",
"@tailwindcss/typography": "^0.5.0",
"@wotz/livewire-sortablejs": "^1.0.0",
"autoprefixer": "^10.4.7",
"axios": "^0.27",
"laravel-echo": "^1.16.1",
"laravel-vite-plugin": "^0.6.0",
"lodash": "^4.17.19",
"postcss": "^8.4.14",
"pusher-js": "^8.3.0",
"rollup-plugin-copy": "^3.5.0",
"tailwindcss": "^3.1.0",
"tailwindcss-unsplash": "^1.1.1",
"vite": "^3.0.0",
"vite-plugin-copy": "^0.1.6"
},
"dependencies": {
"alpinejs": "^3.12.0",
"puppeteer": "^21.3.5",
"split.js": "^1.6.5"
}
}
Thanks, I'll take a look and see if there are any issues around these. Sorry, could you also:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
> build
> vite build
vite v3.2.11 building for production...
transforming...
Killed
Thanks.
Super annoying. Next step would be to use vite-bundle-visualizer locally to see if anything looks suspiciously large.
Could you install this locally and inspect the output?
2 eyes are better :)
I've tried 2 outputs, guess in the default, it's the largest area covered, in which case: lodash.js and pusher.js, the latter I can probably drop now as I'm using Reverb?
╰─ cat /var/folders/3h/l1fs_0ss5n5fr379vn7r5qgw0000gn/T/tmp-6106-8EMm41aOH6yw/stats.yml ─╯
assets/app.6d828734.js:
/node_modules/@wotz/livewire-sortablejs/dist/livewire-sortable.js:
rendered: 38598
gzip: 13334
brotli: 12075
/node_modules/axios/index.js:
rendered: 141
gzip: 126
brotli: 101
/node_modules/axios/index.js?commonjs-module:
rendered: 28
gzip: 48
brotli: 32
/node_modules/axios/lib/adapters/xhr.js:
rendered: 7500
gzip: 2309
brotli: 1970
/node_modules/axios/lib/axios.js:
rendered: 1637
gzip: 620
brotli: 532
/node_modules/axios/lib/axios.js?commonjs-module:
rendered: 28
gzip: 48
brotli: 32
/node_modules/axios/lib/cancel/CanceledError.js:
rendered: 719
gzip: 361
brotli: 315
/node_modules/axios/lib/cancel/CancelToken.js:
rendered: 2760
gzip: 892
brotli: 771
/node_modules/axios/lib/cancel/isCancel.js:
rendered: 251
gzip: 157
brotli: 146
/node_modules/axios/lib/core/Axios.js:
rendered: 4495
gzip: 1404
brotli: 1245
/node_modules/axios/lib/core/AxiosError.js:
rendered: 2248
gzip: 890
brotli: 729
/node_modules/axios/lib/core/buildFullPath.js:
rendered: 644
gzip: 308
brotli: 248
/node_modules/axios/lib/core/dispatchRequest.js:
rendered: 2080
gzip: 702
brotli: 602
/node_modules/axios/lib/core/InterceptorManager.js:
rendered: 1357
gzip: 572
brotli: 493
/node_modules/axios/lib/core/mergeConfig.js:
rendered: 3238
gzip: 845
brotli: 719
/node_modules/axios/lib/core/settle.js:
rendered: 932
gzip: 406
brotli: 341
/node_modules/axios/lib/core/transformData.js:
rendered: 608
gzip: 332
brotli: 279
/node_modules/axios/lib/defaults/index.js:
rendered: 3987
gzip: 1401
brotli: 1210
/node_modules/axios/lib/defaults/transitional.js:
rendered: 106
gzip: 107
brotli: 73
/node_modules/axios/lib/env/data.js:
rendered: 167
gzip: 130
brotli: 113
/node_modules/axios/lib/helpers/bind.js:
rendered: 236
gzip: 170
brotli: 141
/node_modules/axios/lib/helpers/buildURL.js:
rendered: 1628
gzip: 708
brotli: 599
/node_modules/axios/lib/helpers/combineURLs.js:
rendered: 367
gzip: 214
brotli: 166
/node_modules/axios/lib/helpers/cookies.js:
rendered: 1592
gzip: 585
brotli: 470
/node_modules/axios/lib/helpers/isAbsoluteURL.js:
rendered: 550
gzip: 367
brotli: 263
/node_modules/axios/lib/helpers/isAxiosError.js:
rendered: 539
gzip: 275
brotli: 228
/node_modules/axios/lib/helpers/isURLSameOrigin.js:
rendered: 2542
gzip: 912
brotli: 744
/node_modules/axios/lib/helpers/normalizeHeaderName.js:
rendered: 344
gzip: 193
brotli: 163
/node_modules/axios/lib/helpers/null.js:
rendered: 188
gzip: 133
brotli: 115
/node_modules/axios/lib/helpers/parseHeaders.js:
rendered: 1594
gzip: 744
brotli: 623
/node_modules/axios/lib/helpers/parseProtocol.js:
rendered: 334
gzip: 191
brotli: 161
/node_modules/axios/lib/helpers/spread.js:
rendered: 711
gzip: 358
brotli: 289
/node_modules/axios/lib/helpers/toFormData.js:
rendered: 1786
gzip: 717
brotli: 641
/node_modules/axios/lib/helpers/validator.js:
rendered: 2522
gzip: 959
brotli: 830
/node_modules/axios/lib/utils.js:
rendered: 11957
gzip: 3199
brotli: 2782
/node_modules/laravel-echo/dist/echo.js:
rendered: 38963
gzip: 5969
brotli: 5219
/node_modules/lodash/lodash.js:
rendered: 560127
gzip: 97019
brotli: 74692
/node_modules/lodash/lodash.js?commonjs-module:
rendered: 27
gzip: 47
brotli: 31
/node_modules/pusher-js/dist/web/pusher.js:
rendered: 151810
gzip: 29047
brotli: 24788
/node_modules/pusher-js/dist/web/pusher.js?commonjs-module:
rendered: 27
gzip: 47
brotli: 31
/node_modules/split.js/dist/split.es.js:
rendered: 1091
gzip: 631
brotli: 475
/resources/js/app.js:
rendered: 0
gzip: 0
brotli: 0
/resources/js/bootstrap.js:
rendered: 101
gzip: 103
brotli: 84
/resources/js/echo.js:
rendered: 266
gzip: 210
brotli: 186
/vendor/wire-elements/pro/resources/js/overlay-component.js:
rendered: 9500
gzip: 1720
brotli: 1510
/vendor/wire-elements/pro/resources/js/spotlight-component.js:
rendered: 5068
gzip: 1029
brotli: 893
commonjsHelpers.js:
rendered: 334
gzip: 218
brotli: 161
You won't be able to drop Pusher if you're using Echo.
Try running npm
through Node with a larger --max-old-space-size
(in MB). Bump it as high as you can until it works.
node --max-old-space-size=8000 /usr/bin/npm run build // or whatever location npm is
Not a great long-term solution but may actually build.
Thanks Alex, very strange one this. Locally, it builds in 20-30s. If I run it on the server, it sits for a while then gives me the heap error. I've even upped the old-space to 16Gb!!
I think I might spin up a new server and see if the same thing happens.
Yeah from the look of the output of your build it shouldn't be an issue. Hope the new server helps, but pop back if not and we'll figure this out!