Npx frontity dev - Aborted (core dumped) - JavaScript heap out of memory

🙋Get Help
1

If i run npx frontity dev, and working on my site, than after around 20 minutes, i get an error message like this:

webpack building...

<--- Last few GCs --->

[4708:0x2ab9e90]  1378829 ms: Mark-sweep 1356.7 (1387.0) -> 1356.6 (1387.0) MB, 177.2 / 0.0 ms  (average mu = 0.900, current mu = 0.001) last resort GC in old space requested
[4708:0x2ab9e90]  1379001 ms: Mark-sweep 1356.6 (1387.0) -> 1356.6 (1387.0) MB, 171.6 / 0.0 ms  (average mu = 0.816, current mu = 0.000) last resort GC in old space requested


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x2bfb32078a1]
Security context: 0x2f964841e6e9 <JSObject>
    1: byteLength(aka byteLength) [0x17d28b2796c1] [buffer.js:~509] [pc=0x2bfb4b279d0](this=0x30ac61e826f1 <undefined>,string=0x371575562c61 <Very long string[14699526]>,encoding=0x2f964843dda9 <String[4]: utf8>)
    2: arguments adaptor frame: 3->2
    3: fromString(aka fromString) [0x2be72a0932e9] [buffer.js:~334] [pc=0x2bfb4b49af0](this=0x30ac61e826f1 <und...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: 0x8fa090 node::Abort() [node]
 2: 0x8fa0dc  [node]
 3: 0xb0052e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
 4: 0xb00764 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
 5: 0xef4c72  [node]
 6: 0xf0448f v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [node]
 7: 0xed403b v8::internal::Factory::NewRawTwoByteString(int, v8::internal::PretenureFlag) [node]
 8: 0x101d8c3 v8::internal::String::SlowFlatten(v8::internal::Handle<v8::internal::ConsString>, v8::internal::PretenureFlag) [node]
 9: 0xafded4 v8::internal::String::Flatten(v8::internal::Handle<v8::internal::String>, v8::internal::PretenureFlag) [node]
10: 0xb0b8a0 v8::String::Utf8Length() const [node]
11: 0x913629  [node]
12: 0x2bfb32078a1
Aborted (core dumped)

I customize the chakra theme. Do I have memory leak somewhere? How shall I debug it? Will it affect my production site?
Thanks for any help…

3

Yes, it seems like a memory leak to me. I’ve tested it with the default chakra theme and I’m not able to reproduce, so maybe it’s something in your custom code.

I guess it would be good to try to debug and solve it before going to production.

4

And can you pls give me suggestion how to debug it? What tools to use? I never debugged JS before… :S

5

I have one error if I run npx frontity dev:

{ ServerError: Bad Request
    at Object.then.response (webpack-internal:///./node_modules/@frontity/wp-source/src/libraries/api.ts:12:174)
    at process._tickCallback (internal/process/next_tick.js:68:7) name: 'ServerError', status: 400, statusText: 'Bad Request' }

And at Now.sh in the functions I see this:

[GET] /undefined
16:21:14:98
2020-03-04T15:21:17.501Z	b3489aba-74be-4af0-912d-9b09a1cf7351	ERROR	Ma [ServerError]: Bad Request    at /var/task/index.js:217:236045    at processTicksAndRejections (internal/process/task_queues.js:94:5)    at async Object.func (/var/task/index.js:217:228788)    at async /var/task/index.js:217:233186 {  name: 'ServerError',  status: 400,  statusText: 'Bad Request'}

But I’m a bit lost… I dont know what to do with it.

6

Could you run npx frontity info and share with us the results so we have a better picture please?

Apart from that, if you share with us the frontity.settings.js of your project could be useful as well.

7

npx frontity info:

System:

  • OS: Linux 5.3 Linux Mint 19.3 (Tricia)
  • CPU: (8) x64 Intel® Coreâ„¢ i7-4810MQ CPU @ 2.80GHz
  • Memory: 11.64 GB / 15.54 GB
  • Shell: 4.4.20 - /bin/bash

Binaries:

  • Node: 10.19.0 - /usr/bin/node
  • npm: 6.14.2 - ~/.npm_modules/bin/npm

Browsers:

  • Chrome: 80.0.3987.122
  • Firefox: 73.0.1

npmPackages:

  • @frontity/core: ^1.5.0 => 1.5.0
  • @frontity/head-tags: ^1.0.1 => 1.0.1
  • @frontity/html2react: ^1.3.0 => 1.3.0
  • @frontity/tiny-router: ^1.1.0 => 1.1.0
  • @frontity/wp-source: ^1.6.0 => 1.6.0
  • frontity: ^1.5.2 => 1.5.2
  • frontity-chakra-theme: ./packages/frontity-chakra-theme => 0.0.2
  • react-facebook: ^8.1.4 => 8.1.4
  • react-swipeable: ^5.5.1 => 5.5.1

npmGlobalPackages:

  • frontity: Not Found
  • npx: Not Found

frontity.setting.js:

const settings = {
  name: "szinhaz.online",
  state: {
    frontity: {
      url: "https://szinhaz.online/",
      title: "Színház Online",
      description: "A színházi világ hírei"
    }
  },
  packages: [
    {
      name: "frontity-chakra-theme",
      state: {
        theme: {
          // The logo can be a text or an image url
          // show background pattern
          showBackgroundPattern: true,
          // show social links
          showSocialLinks: true,
          // the top-level navigation labels and links
          menu: [["Home", "/"]],
          // the social links
          socialLinks: [
            ["facebook", "https://facebook.com/szinhazonline/"],
            ["instagram", "https://instagram.com/szinhaz.online/"]
          ],
          // color shades to use in the blog
          colors: {
            primary: {
              "50": "#f2f2f2",
              "100": "#d9d9d9",
              "200": "#bfbfbf",
              "300": "#a6a6a6",
              "400": "#8c8c8c",
              "500": "#737373",
              "600": "#595959",
              "700": "#404040",
              "800": "#262626",
              "900": "#0d0d0d"
            },
            accent: {
              "50": "#fff3dc",
              "100": "#ffddb1",
              "200": "#fac882",
              "300": "#f7b253",
              "400": "#F4A91C",
              "500": "#dc820a",
              "600": "#ab6505",
              "700": "#7b4802",
              "800": "#4b2a00",
              "900": "#1d0c00"
            }
          }
        }
      }
    },
    {
      name: "@frontity/wp-source",
      state: {
        source: {
          api: "https://wp.szinhaz.online/wp-json",
          params: {
            orderby: "menu_order",
            order: "asc"
          },
          homepage: "/kezdooldal",
          postsPage: "/hirek",
          postTypes: [
            {
              type: "idezet",
              endpoint: "idezet",
              archive: "/idezet"
            },
            {
              type: "galeria",
              endpoint: "galeria",
              archive: "/galeria"
            }
          ],
          taxonomies: [
            {
              taxonomy: "folder",
              endpoint: "folder"
            }
          ]
        }
      }
    },
    "@frontity/tiny-router",
    "@frontity/html2react",
    "@frontity/head-tags"
  ]
};

export default settings;

I’m also happy to share the hole source code:


(I hope it’s not unsafe… :P)
The site is already live at: https://szinhaz.online/
But it’s not finished at all… I’m still working on it a lot, but my customer pushed me to make it live, because of a tender deadline. I want to refactor a lot of things, but I needed to finish it in a rush. So it’s a bit messy yet, but after I cleaned it I plan

8

Thanks for the info! The site looks great so far :blush:

I’ve cloned your repo and try to reproduce the problem but I wasn’t able, it’s working properly on my laptop. Maybe it’s because its master branch doesn’t seem to be the last version (the live site is slightly different).

Anyway, the problem could come while updating Frontity. We discovered last week that updating Frontity could cause some problems if you don’t delete node_modules and package-lock.json. This is the issue, although we have already solved that for future updates.

You could try to update Frontity again, making sure you update the dependencies of your local packages as well, following this guide.

Once you have followed that guide, you should delete node_modules folder, delete the package-lock.json and run npm install again.

Could you check if doing this the problem is solved?

9

Thanks @SantosGuillamot! I followed your guide, and also deleted the /packages/my-theme/node_modules, than run npm install twice (because of this issue).
Since that, my npx frontity dev command only terminated twice, when I made some changes, saved the file, and then made some changes again quickly, and saved again, before it finished building (maybe also refreshed the browser window manually meanwhile).

You are right, my latest works was in a branch, I changed the repo URL in my original post, now the master branch contains the latest changes.
I would be happy, if you would take a deeper look into my project, specially the Home Page, maybe give advice’s how to improve performance.

10

6 posts were split to a new topic: How to improve the performance of https://szinhaz.online/

11

I think you already solved this, but in case you or anyone else find it again it seems to be related to this this webpack problem: https://github.com/frontity/frontity/issues/100.

13

You should use this https://www.npmjs.com/package/increase-memory-limit, increase your project memory.