I am trying to integrate GrapesJS Feature with my React APP.

I get an error while implementing like `Uncaught TypeError: Cannot read property 'forEach' of undefined grapesjs react`

I would like to have a feature like in this URL

.html



npm i grapesjs-react

import React, {Component} from 'react';
import GEditor from 'grapesjs-react';

class GEditorExample extends Component {
 render() {
   return (
         <GEditor/>
     );
   }
}

export default GEditorExample;

• How can I get this feature for my react app to build HTML Web Builder.

Any help would be great. Thank You.*

I am trying to integrate GrapesJS Feature with my React APP.

I get an error while implementing like `Uncaught TypeError: Cannot read property 'forEach' of undefined grapesjs react`

I would like to have a feature like in this URL

https://grapesjs./demo.html



npm i grapesjs-react

import React, {Component} from 'react';
import GEditor from 'grapesjs-react';

class GEditorExample extends Component {
 render() {
   return (
         <GEditor/>
     );
   }
}

export default GEditorExample;

• How can I get this feature for my react app to build HTML Web Builder.

Any help would be great. Thank You.*

• javascript
• reactjs
• grapesjs

• Try re-running after npm install grapesjs – UtkarshPramodGupta Commented Aug 20, 2019 at 5:14

4 Answers 4

You've to specify the blocks prop to , this block will be added to the editor by blockmanager.add method of grapes-js. If there is no need for a block, try giving an empty array, like:

<GEditor id="gjs" blocks={[]} />

if You pass blocks to GEditor, It will work.

See the sample code below

import React, {Component} from 'react';
import GEditor from 'grapesjs-react';

class GEditorExample extends Component {
 render() {
   return (
          <GEditor id="geditor"  blocks={[]}/>
     );
   }
}

export default GEditorExample;

Which version of grapesjs-react are you using? I configured the default value for blocks props:

GEditor.defaultProps = {
  blockManager: {},
  blocks: [],
  ponents: [],
  newsletter: false,
  plugins: [],
  storageManager: {},
  styleManager: {},
  webpage: false,
};

Try to update the package to the newest version if you still got this error.

I have been looking for a good integrator for a while. Currently, my solution is to use <iframe> to load GrapeJS from an external file server. For example: using an iframe inside a React ponent like this:

<iframe height="100%" src={`http://127.0.0.1:8081/templateId=${templateId} title="Build your own template" width="100%" />

I know it's not a good solution, but currently its the only method I found to be workable with my problem.