Ckeditor5-react: Getting Heap Size error after installing

[NeerajThapliyal]

Compiling...

<--- Last few GCs --->

[15272:0000013ACAA1BF90] 31946180 ms: Scavenge 1375.0 (1423.7) -> 1374.2 (1424.2) MB, 7.6 / 0.0 ms (average mu = 0.142, current mu = 0.070)
allocation failure
[15272:0000013ACAA1BF90] 31946190 ms: Scavenge 1375.1 (1424.2) -> 1374.3 (1424.7) MB, 7.9 / 0.0 ms (average mu = 0.142, current mu = 0.070)
allocation failure
[15272:0000013ACAA1BF90] 31946200 ms: Scavenge 1375.2 (1424.7) -> 1374.4 (1425.2) MB, 9.1 / 0.0 ms (average mu = 0.142, current mu = 0.070)
allocation failure

<--- JS stacktrace --->

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

0: ExitFrame [pc: 0000007C0B15C5C1]

Security context: 0x01fc4e11e6e9
1: SourceMapConsumer_allGeneratedPositionsFor [000000C693CA80A1] [E:\Node JS project\react\rootlearn\rootlearn-admin\node_modules\@babel\core\node_modules\source-map\lib\source-map-consumer.js:~178] pc=0000007C0BB91C07
2: /* a...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 00007FF67C7AC6AA v8::internal::GCIdleTimeHandler::GCIdleTimeHandler+4506
2: 00007FF67C787416 node::MakeCallback+4534
3: 00007FF67C787D90 node_module_register+2032
4: 00007FF67CAA189E v8::internal::FatalProcessOutOfMemory+846
5: 00007FF67CAA17CF v8::internal::FatalProcessOutOfMemory+639
6: 00007FF67CC87F94 v8::internal::Heap::MaxHeapGrowingFactor+9620
7: 00007FF67CC7EF76 v8::internal::ScavengeJob::operator=+24550
8: 00007FF67CC7D5CC v8::internal::ScavengeJob::operator=+17980
9: 00007FF67CC86317 v8::internal::Heap::MaxHeapGrowingFactor+2327
10: 00007FF67CC86396 v8::internal::Heap::MaxHeapGrowingFactor+2454
11: 00007FF67CDB0637 v8::internal::Factory::NewFillerObject+55
12: 00007FF67CE2D826 v8::internal::operator<<+73494
13: 0000007C0B15C5C1
npm ERR! code ELIFECYCLE
npm ERR! errno 134
npm ERR! [email protected] start: react-scripts start
npm ERR! Exit status 134

[Mgsy]

Hi, did you follow our React integration guide? Could you please provide steps to reproduce your issue?

[Manimall]

faced the same problem

[ma2ciek]

@Manimall, could you share more details?

[ekfn]

+1 here

import Editor from '@ckeditor/ckeditor5-react';
import BalloonEditor from '@ckeditor/ckeditor5-build-balloon';

const EditorComponent = () => (
    <Editor
      editor={BalloonEditor} // without this line build works just fine
      ...
    />
);

upgrading to latest react-scripts and adding --max_old_space_size=2048 fiixed my problem

[Denny966]

Got the same issue, more details:

• create a new react app
• install "@ckeditor/ckeditor5-build-classic": "^16.0.0" and "@ckeditor/ckeditor5-react": "^2.1.0"
• try to build it
• error

[ma2ciek]

Thanks @Denny966 for details.

Could you also tell what's your OS and package manager (and their versions)?

cc @pomek

[Manimall]

@Manimall, could you share more details?

install editor and create new app with react-create app
laugn app

then trying to build it - but it gives an error - the error is like @NeerajThapliyal shown above

i tried both with the classic editor and inline editor - doesn't matter - I've got errors while trynna build a project(

[ma2ciek]

Could you also tell what's your OS, package manager and Node.js versions?

[Denny966]

Thanks @Denny966 for details.

Could you also tell what's your OS and package manager (and their versions)?

cc @pomek

Windows 10
Npm v6.4.1
Node v.8.16.0

[ma2ciek]

Looking at the stack trace I guess that the problem occurs because babel has a lot of files to index, parse, transpile and generate source maps for them. Currently I'd just advice to add --max_old_space_size=4096 until we find a better solution.

[Manimall]

Could you also tell what's your OS, package manager and Node.js versions?

windows 10, yarn

[samsiu2014]

Looking at the stack trace I guess that the problem occurs because babel has a lot of files to index, parse, transpile and generate source maps for them. Currently I'd just advice to add --max_old_space_size=4096 until we find a better solution.

Hi @ma2ciek , I tried to use --max_old_space_size=8192, but it shows me the same error, JavaScript heap out of memory.

[senkovicova1]

Looking at the stack trace I guess that the problem occurs because babel has a lot of files to index, parse, transpile and generate source maps for them. Currently I'd just advice to add --max_old_space_size=4096 until we find a better solution.

Sadly, this does not seem to work with my app as well, even with enlarging the size.
OS: Win10
Npm v6.13.4
Node v12.14.1

[nchristopherteague]

Windows: 10
npm: 6.13.2
node: 12.14.1
react scripts: 3.4.1

The steps I took is explained in https://github.com/ckeditor/ckeditor5/issues/7522

I get the javascript heap message when I copy the package from the online builder, run npm install "local folder" and then try to reference it in my component.

I have tried the --max_old_space_size=4096 but still doesn't work.

1: Am I doing this correctly or do I need to use the package differently?
2: Any other suggestions on what I can do to get it to work?

[darshanG10]

Got same Issue

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
when try to build project with ckeditor5 build from online builder in reactjs

[mgandley]

Also getting this error. Possibly related to https://github.com/facebook/create-react-app/issues/8096. Disabling source maps per that issue worked, but not an ideal solution.

Not sure why this is happening with a custom build from the online builder but _not_ from the standard builds.

[mgandley]

See https://github.com/ckeditor/ckeditor5/issues/6770. Pretty sure the custom builds are using the pre-monorepo-builds and are behind a few versions. Building from source using the instructions in https://github.com/ckeditor/ckeditor5/issues/7645 allowed me to make a build that did not cause any memory errors in my react application.

[jayjaydluffy]

I can't also get rid of the error. I tried doing a custom build following the instructions here but to no avail. --max_old_space_size=8192 also has no chance.

OS: Ubuntu 18.04
Node: v12.13.0
npm: 6.12.0
react-scripts: 3.3.0

@mgandley can you please share to us your build? did you base the steps laid out here?

[jayjaydluffy]

Today I was able to overcome the Heap Size Error by a combination of things:

1. Created a custom build (a balloon block type) using the online builder and then using the instructions [here].(https://github.com/ckeditor/ckeditor5/blob/72a64b941da2933d2e90ec3b1fab04d06500d3c7/docs/builds/guides/integration/advanced-setup.md), but I still got the error. I settled though with the latter version.
2. I updated react and react-scripts to latest (16.13.1 and 3.4.1, respectively). My node version is at 12.13.0.
3. Deleted node_modules and yarn.lock then ran yarn install to reinstall all dependencies.

I was surprised I've no longer got the error.

[pulkit1joshi]

Same issue. Any fixes?

1. Used online builder
2. npm add file:./ckeditor5
3. Works on dev but npm run build gives heap error

Removing the ckeditor gives no error

[vinayak25]

If you are react-app-rewired, simply increase the memory to --max-old-space-size=2048 build, it should work

[pulkit1joshi]

If you are react-app-rewired, simply increase the memory to --max-old-space-size=2048 build, it should work

This didn't solve my issue. Are the steps that I used correct?

[vinayak25]

can you provide some extra details like node, react version and os details

[vinayak25]

Any update on this?

[muftisamiullah]

having same issue --max-old-space-size=8192 build, this doesnt also work, kindly provide some advise