React-styleguidist: main.bundle.js is not loading in watch mode

[danrot]

I am experiencing some issues with the development server. When starting the server with styleguidist server I wait until the message Compiled successfully appears, and open localhost:6060 in my browser as I am told to. But then the browser loads the main.bundle.js file forever, until it fails without further notice:

(It is not visible, but when I am closing the right handside with the status information Status of the line in the chrome dev tools simply says (failed))

I am using webpack version 3.10 and react-styleguidist 6.10. I've also tried to reproduce with your Demo Project but it seems to be working there. I have no idea for what I should look now.

My current operating system is ArchLinux (but it also happened on my previous mac osx installation) and this is happening in both chromium and firefox. The styleguide config I am using is in the sulu/sulu repository.

I really have no idea what I should be looking for, so I appreciate any kind of help.

[sapegin]

I can only suggest to simplify the config: try to load only the most simple component and see if it still failing.

[danrot]

Hm, I hoped you might have an idea... However, while playing around with it, I am asking myself if it is possible that there is somehow a limit on how long reading the sections may take?

I am asking because if I make this and this line return less values (by simply put an In and A in front of the asterisk) it works, although I am retrieving less elements of course.

[danrot]

@sapegin Do you have any idea why this is happening?

[sapegin]

Nope, you need to find a component that breaks and and then we could debug it to understand what's wrong.

[danrot]

Hey, I couldn't figure a single component making problems, but we've updated recently to 6.2.2, and now I get the following error instead:

daniel@daniel-macbook ~/D/s/s/v/s/sulu> npm run styleguide

> @ styleguide /home/daniel/Development/sulu/sulu-minimal/vendor/sulu/sulu
> styleguidist server

You can now view your style guide in the browser:

  Local:            http://localhost:6060/
  On your network:  http://192.168.1.17:6060/

 DONE  Compiled successfully!

<--- Last few GCs --->

[24684:0x5605e92dbd20]   378602 ms: Mark-sweep 1450.8 (1679.2) -> 1450.7 (1679.2) MB, 2068.7 / 1.1 ms  allocation failure GC in old space requested
[24684:0x5605e92dbd20]   380972 ms: Mark-sweep 1450.7 (1679.2) -> 1450.7 (1639.7) MB, 2370.2 / 1.8 ms  last resort GC in old space requested
[24684:0x5605e92dbd20]   383217 ms: Mark-sweep 1450.7 (1639.7) -> 1450.7 (1634.2) MB, 2244.1 / 1.5 ms  last resort GC in old space requested


<--- JS stacktrace --->

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

Security context: 0x223fafaa54d9 <JSObject>
    1: /* anonymous */ [/home/daniel/Development/sulu/sulu-minimal/vendor/sulu/sulu/node_modules/watchpack/lib/DirectoryWatcher.js:~280] [pc=0x256abbfef2a5](this=0x1d0fccc8e961 <DirectoryWatcher map = 0x206c2f13e5e1>,err2=0x28fe20782201 <null>,stat=0x1430ed19ec39 <Stats map = 0x1cc559da9349>)
    2: /* anonymous */ [/home/daniel/Development/sulu/sulu-minimal/vendor/sulu/sulu/node_modules/gracefu...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: node::Abort() [node]
 2: 0x5605e6ccbbbf [node]
 3: v8::Utils::ReportOOMFailure(char const*, bool) [node]
 4: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [node]
 5: v8::internal::Factory::NewFixedArray(int, v8::internal::PretenureFlag) [node]
 6: v8::internal::HashTable<v8::internal::StringTable, v8::internal::StringTableShape>::NewInternal(v8::internal::Isolate*, int, v8::internal::PretenureFlag) [node]
 7: v8::internal::HashTable<v8::internal::StringTable, v8::internal::StringTableShape>::EnsureCapacity(v8::internal::Handle<v8::internal::StringTable>, int, v8::internal::PretenureFlag) [node]
 8: v8::internal::StringTable::LookupKey(v8::internal::Isolate*, v8::internal::StringTableKey*) [node]
 9: v8::internal::StringTable::LookupString(v8::internal::Isolate*, v8::internal::Handle<v8::internal::String>) [node]
10: 0x5605e7403581 [node]
11: v8::internal::Runtime_KeyedGetProperty(int, v8::internal::Object**, v8::internal::Isolate*) [node]
12: 0x256abb7842fd

That the process is running out of memory might be an indicator that too many components are around, isn't it? Does this message help in anyway?

[vuongc]

@danrot I've got the same error with 43 components to display.

[vuongc]

I don't know if this will help you but I am using lerna to manage the components version, in order to fix this issue I used the --hoist option which is basically the same as npm link.

[danrot]

Well, I don't want to start implementing lerna here if there is no other additional value for me :confused:

[danrot]

Also found out that I can extend the heap size using the following command:

node --max-old-space-size=32768 /usr/bin/npm run styleguide

However, if doing that it only takes longer until the heap is filled up :confused:

[trickreich]

same problem here..
it's just not loading..

[danrot]

I have tried to improve the situation in https://github.com/sulu/sulu/pull/3845. We realized that when we delete the vendor (the node_modules of PHP) then the watch task works. As soon as you install these dependencies again, the watch task is not working anymore. So I guess it is somehow related to the glob, therefore I tried to execute it only once at the beginning of the styleguide.config.js and replace the glob package with fast-glob (see https://github.com/danrot/sulu/blob/enhancement/styleguide-performance/styleguide.config.js#L35).

Now it takes only even longer until the heap seems to run out of memory. For this reason I am wondering if the line with the glob in our config is executed more than once. The strange thing is that the glob seems to execute quite fast, but the bigger directory structure with the vendor folder still makes problems :confused:

[n1313]

Does it work if you delete all components from your source folder except for one simplest component?
Does it work if you manually list your components in config instead of using a glob pattern?
Does it work if you run styleguide:build? What is inside the built bundle?

[danrot]

@n1313 I think I have already written that it works as soon as I delete our vendor folder, which is actually completely unrelated to JavaScript or Styleguidist. It seem like it is already broken when there is a big directory structure, although most of the directory structure is not relevant for the output.

That should also answer your second question, it works even with the glob (if I remove the vendor folder), so I assume it is working if I would list all components directly.

styleguid:build works as expected, the problem only affects the watch task.

[sapegin]

I’m going to close it for now: I don’t see anything we can do, but feel free to send a pull request if you see possible improvements.

[danrot]

@sapegin I would be happy if you could at least answer my question above:

For this reason I am wondering if the line with the glob in our config is executed more than once.

Otherwise it is hard to further investigate my issue.

[sapegin]

You can check that yourself and have a correct answer instead of asking someone else to guess.

[jaruesink]

@danrot I felt like that was a fair question, I'm having this problem also or some kind of problem.

<--- Last few GCs --->

[32979:0x104002400]    30542 ms: Mark-sweep 1392.6 (1439.5) -> 1390.5 (1431.5) MB, 900.7 / 0.0 ms  (+ 0.1 ms in 128 steps since start of marking, biggest step 0.0 ms, walltime since start of marking 936 ms) (average mu = 0.161, current mu = 0.061) allocat[32979:0x104002400]    32287 ms: Mark-sweep 1394.3 (1431.5) -> 1393.2 (1436.5) MB, 1727.0 / 0.0 ms  (+ 0.0 ms in 61 steps since start of marking, biggest step 0.0 ms, walltime since start of marking 1745 ms) (average mu = 0.074, current mu = 0.010) alloca

<--- JS stacktrace --->

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

    0: ExitFrame [pc: 0x3771cf1841bd]
    1: StubFrame [pc: 0x3771cf1cdecb]
Security context: 0x24f44f41e589 <JSObject>
    2: replace [0x24f44f410bd1](this=0x24f4389a2431 <String[62]: !./src/components/common/Inputs/InputCheckbox/InputCheckbox.js>,0x24f426c3fdf1 <JSRegExp <String[43]: (^|!)\/Users\/jruesink\/Documents\/projects>>,0x24f4be060fd9 <String[3]: !..>)
    3: formatError(aka formatError) [0x24f426c3ffa1] [/Users/jruesink/Docume...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: node::Abort() [/usr/local/Cellar/node/10.4.1/bin/node]
 2: node::OnFatalError(char const*, char const*) [/usr/local/Cellar/node/10.4.1/bin/node]
 3: v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/Cellar/node/10.4.1/bin/node]
 4: v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/Cellar/node/10.4.1/bin/node]
 5: v8::internal::Heap::UpdateSurvivalStatistics(int) [/usr/local/Cellar/node/10.4.1/bin/node]
 6: v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [/usr/local/Cellar/node/10.4.1/bin/node]
 7: v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/Cellar/node/10.4.1/bin/node]
 8: v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/Cellar/node/10.4.1/bin/node]
 9: v8::internal::Heap::HandleGCRequest() [/usr/local/Cellar/node/10.4.1/bin/node]
10: v8::internal::StackGuard::HandleInterrupts() [/usr/local/Cellar/node/10.4.1/bin/node]
11: v8::internal::NativeRegExpMacroAssembler::CheckStackGuardState(v8::internal::Isolate*, int, bool, unsigned char**, v8::internal::Code*, v8::internal::String**, unsigned char const**, unsigned char const**) [/usr/local/Cellar/node/10.4.1/bin/node]
12: v8::internal::RegExpMacroAssemblerX64::CheckStackGuardState(unsigned char**, v8::internal::Code*, unsigned char*) [/usr/local/Cellar/node/10.4.1/bin/node]
13: 0x3771cfbf4236
14: v8::internal::NativeRegExpMacroAssembler::Execute(v8::internal::Code*, v8::internal::String*, int, unsigned char const*, unsigned char const*, int*, int, v8::internal::Isolate*) [/usr/local/Cellar/node/10.4.1/bin/node]
15: v8::internal::NativeRegExpMacroAssembler::Match(v8::internal::Handle<v8::internal::Code>, v8::internal::Handle<v8::internal::String>, int*, int, int, v8::internal::Isolate*) [/usr/local/Cellar/node/10.4.1/bin/node]
16: v8::internal::RegExpImpl::IrregexpExecRaw(v8::internal::Handle<v8::internal::JSRegExp>, v8::internal::Handle<v8::internal::String>, int, int*, int) [/usr/local/Cellar/node/10.4.1/bin/node]
17: v8::internal::RegExpImpl::IrregexpExec(v8::internal::Handle<v8::internal::JSRegExp>, v8::internal::Handle<v8::internal::String>, int, v8::internal::Handle<v8::internal::RegExpMatchInfo>) [/usr/local/Cellar/node/10.4.1/bin/node]
18: v8::internal::Runtime_RegExpExec(int, v8::internal::Object**, v8::internal::Isolate*) [/usr/local/Cellar/node/10.4.1/bin/node]
19: 0x3771cf1841bd
20: 0x3771cf1cdecb
21: 0x3771cfa9a15a
22: 0x3771cf9ae82d
23: 0x3771cf18c223
24: 0x3771cfaa907b
25: 0x3771cf193429
error Command failed with signal "SIGABRT".

[danrot]

@jaruesink I also feel so. Tried to build a console.log right before/after our glob calls, and they seem to be called only once on startup. However, for that reason it doesn't really make sense to me why I am getting this error. I'd say it should be practically the same after getting the filenames, if there is a lot of other folder structure being used or not.

[vysinsky]

Hi, did you solve the problem? I have similar problem when running styleguide inside docker (via docker-compose).

It loads main.bundle.js for about 50 seconds. When I reload the page it looks like it transpiles it again.

Without docker it is loaded in half a second.

What is weird that after some time (few minutes) it loads quickly also in Docker image. I don't understand it...