JavaScript

Deploying with Envoyer and building assets

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

marc68013 Member
marc68013
0
11
72
alex Member
alex
Moderator

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?

marc68013 Member
marc68013

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"
    }
}
alex Member
alex
Moderator

Thanks, I'll take a look and see if there are any issues around these. Sorry, could you also:

  1. Post your postcss config here
  2. Check if npm i instead of npm ci makes any difference?
marc68013 Member
marc68013
module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};
  1. No, seems to have the same error:
> build
> vite build

vite v3.2.11 building for production...
transforming...
Killed

Thanks.

alex Member
alex
Moderator

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?

marc68013 Member
marc68013

Sure, will give that a go and let you know. Thanks

marc68013 Member
marc68013

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
alex Member
alex
Moderator

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.

marc68013 Member
marc68013

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.

alex Member
alex
Moderator

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!

marc68013 Member
marc68013

Appreciate the help Alex. Will let you know how I get on.