Grapesjs: [Question] React with GrapeJS

[Silavin]

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.

[cjpollard]

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.

[Silavin]

Alright. I've never done this before so here goes.

I'm really new to this so I don't really know what I'm doing so in case there is some kind of issue with my steps, I'll write it down.

1. npm run eject (since create-react-app does not allow me to directly change the the configurations)
2. added new webpack.ProvidePlugin({ grapesjs: "grapesjs" }) into files:
   webpack.config.dev and webpack.config.prod
   under object:
   module.exports={module:{ plugins:[... ] }}
3. in component, import grapesjs from 'grapesjs';

_test:
Module not found: Can't resolve 'cluster' in 'C:\Users\Sebastian\Desktop\Git\GrapeJSPage\grape\node_modules\grapejs\lib\core'_

1. went in to find that that grapesjs: "grapesjs" <- the node_module is grapejs so I changed this sentence to grapejs: "grapejs"

2. went back to GrapeEditor component to change the grapesjs to grapejs.

_Module not found: Can't resolve 'cluster' in 'C:\Users\Sebastian\Desktop\Git\GrapeJSPage\grape\node_modules\grapejs\lib\core'_

[cjpollard]

"grapejs" is a different npm module to "grapesjs". You should npm install grapesjs. Step 3 shouldn't be necessary.

[Silavin]

Oh! I did not realise that there are two different npm packages. Yes. I've installed grapesjs now.

However, I do not understand. why is it not necessary to import grapesjs from 'grapesjs'?

[cjpollard]

ProvidePlugin automatically loads grapesjs so it's available anywhere in the code, making importing it again redundant.

[Silavin]

Alright. Thank you for your help. The problem has been solved.

[thanhpd56]

@Silavin Have you succeed with integrating grape and react?

[sakshigarg9]

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.

Hi, I added this plugin under plugins:[..] in the webpack.config.js file and it still won't work

[artf]

@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

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.