Issue #1180Opened June 7, 2018by roboman-sil3 reactions

[Question] React with GrapeJS

Question

Code SnippetTEXT
Greetings, I did searches and could not particularly find a solution to my problem. Currently, I am trying to integrate my React App with GrapeJS. 
`import React, { Component } from 'react';
import './GrapesSrc/grapes.min.js';
import GrapesIndex from 'grapejs';


class GrapesEditor extends Component {
    constructor(props){
        super(props);
        
    }
    shouldComponentUpdate(){
        return false
    }

    componentDidMount(){
        
        const editor = grapesjs.init({
            container : '#gjs',
            components: '<div class="txt-red">Hello world!</div>',
            style: '.txt-red{color: red}',
        });
    }

  render() {


    return (
      <div id ='gjs'>    

      </div>
    );
  }
}

export default GrapesEditor;
`

I have tried using the CDN, including it into my index.html file but all of that still had the error of grapesjs being undefined.
I tried to import './GrapesSrc/grapes.min.js' directly. Creating a new folder with the codes in the CDN but it still did not work.

I am not sure if this is a valid question or not since there was one issue that seemed similar to this that was rejected.

Answers (3)

artfFebruary 22, 20192 reactions

@sakshigarg9 add grapesjs via npm, then in your code just use import grapesjs from 'grapesjs' It will work, without any need to update the webpack configuration

thanhpd56October 18, 20181 reactions

@Silavin Have you succeed with integrating grape and react?

cjpollardJune 7, 20180 reactions

If you're using webpack to build your React app, you can include it as a plugin. It'll pull it from node_modules. plugins: [ new webpack.ProvidePlugin({ grapesjs: "grapesjs" }) ], This worked for me.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.