Tag: javascript

Fixing “WebAssembly.Instance(): Out of memory” Error in cPanel for Next.js/React.js Builds

If you’re building a Next.js or React.js application using the cPanel terminal and see the error “RangeError: WebAssembly.Instance(): Out of memory: Cannot allocate Wasm memory for new instance,” it means the build process needs more memory than cPanel is currently allowing.

Here’s how to fix this if you have WHM (WebHost Manager) access.

What Causes This Error?

Modern JavaScript applications, like those built with Next.js or React.js, can use a lot of memory during their build process. Sometimes, the tools they use (which might include WebAssembly for speed) try to use more memory than the limit set for a single process in your cPanel settings. When this happens, the build stops and shows the “Out of memory” error.

How to Fix It: Increase cPanel Process Memory Limit

You can solve this by increasing the maximum amount of memory a cPanel process can use. You’ll do this in WHM’s Tweak Settings.

  1. Log into WHM: Open your WHM panel. You usually do this by going to yourdomain.com/whm or yourserverip:2087 and logging in.
  2. Go to Tweak Settings: In WHM, look for “Tweak Settings.” You can often find it by typing “Tweak Settings” into the search bar.
  3. Find “Max cPanel process memory”: On the Tweak Settings page, you need to find the setting called “Max cPanel process memory.” You might see a note that the minimum is 4,096 MB.
  4. Increase the memory limit: You’ll need to increase the number in this field. The default or current setting might be too low for your application’s build process.
    • Try increasing it. For instance, if your server has enough resources, you could try 8,192 MB (8GB).
    • The exact amount you need can vary. If you still get the error, you might need to try a slightly higher value.
    • Be careful: Don’t set this value too high, as it could affect your server’s overall performance if other services don’t have enough memory. Keep an eye on your server’s total RAM usage.
  5. Save your changes: After changing the value, scroll down and click the “Save” button.

After you save the new setting, go back to the cPanel terminal and try building your Next.js or React.js application again. This should usually fix the “WebAssembly.Instance(): Out of memory” error.

In Short

This memory error happens when your application build needs more resources. Increasing the “Max cPanel process memory” through WHM Tweak Settings generally resolves the issue by giving the build process the memory it requires.

How to Concat/Merge/Join Two Array in Javascript ES6

Let’s say, we have two arrays:

let arr1 = [1, 2, 3]
let arr2 = [5, 6, 7]

Now, you want to have a third array that merges the two arrays:

let arr3 = [1, 2, 3, 4, 5, 6]

To achieve that, you can simply destructure the two arrays and use the result to create another array like following:

let arr3 = [...arr1, ...arr2]
console.log(arr3)
[1, 2, 3, 4, 5, 6]

Why does Your New Site Take Ages to Load?

I was trying to track down a couple of website slow down reports lately. There is an interesting change of slow down behaviour these days in web application. From a conventional standpoint, people firmly believes that their static contents are not going to affect the performance of their websites other than images being heavy.
 
In reality, they are ignoring the fact that they are using jQuery plugins of many kinds from multiple developers. Hence cumulative number & sizes of JS files are pretty large these days comparing with all the plugins were coming from a single developer. Once the number of static file increases and goes beyond 100 per page, a cookie domain can hit some serious performance penalty. Geolocation for these small files and accessing them from single source can also increase the time geometrically. There is undoubtedly a large market of CDN due to the nature of development in web application.
 
I have seen, people these days are more aware about handling large data wisely than before. If you are using a Cloud from any provider, you are possibly using an E5 core or multiple (Mellowhost uses only E5 nodes right at this moment), that usually comes with access to a 16/24/32MB cache. Your static handling going to be more important in performance on these type of resources than your database, as threading is more of a concern than a single process handling in these virtualised resources.