[BUG] Not able to use plugin: grapesjs-custom-code

Question

I am trying to add "custom code plugin" but getting an error in console that "Plugin grapesjs-custom-code not found"

Code SnippetTEXT

- I have created an react app and this is part of a reach component.  Note that this is working fine when I add the plugin from a html page rather than react component.
- This issue is only with "grapesjs-custom-code".  "gjs-preset-webpage" is working fine

I may be doing something silly wrong in my react component or there may be a bug. I have been trying to figure this out for hours and need some help please.

**Following is my react component code**

import React, { Component } from 'react';
import 'grapesjs/dist/css/grapes.min.css';
import 'grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.css';
import grapesjs from 'grapesjs';
import 'grapesjs-custom-code';
import  'grapesjs-preset-webpage';

export default class grapesjsPresetWebpageWithCustomComponent extends Component {
    //Prevents ReactJS from working on the same DOM elements as grapesjs. This is
    //needed to include a non react library under react. See ref at
    // https://medium.com/@garrettmac/reactjs-how-to-safely-manipulate-the-dom-when-reactjs-cant-the-right-way-8a20928e8a6
    shouldComponentUpdate() {
        return false;
    }

    componentDidMount(){
        var editor = grapesjs.init({
            container : '#gjs',
            
            plugins: ['gjs-preset-webpage', 'grapesjs-custom-code'],
            pluginsOpts: {
              'grapesjs-custom-code': {
                // options
              },
              'gjs-preset-webpage': {
                // options
                },
            }
        
            
            
        });

        
    }

    render() {
        return (
            <div>
                Render Grapesjs here*********
                <div id="gjs"></div>
            </div>
        )
    }
}


**Following html code works fine:**

<HTML>
    <HEAD>
      <link rel='stylesheet' href='https://unpkg.com/formiojs@latest/dist/formio.full.min.css'>
      <link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
      <link href="../node_modules/grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.css" rel="stylesheet"/>
      <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
        

    </HEAD>

    <BODY BGCOLOR="FFFFFF">
        <script src="https://unpkg.com/grapesjs"></script>
        <script src="../node_modules/grapesjs-custom-code/dist/grapesjs-custom-code.min.js"></script>
        <script src="../node_modules/grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.js"></script>
        <script src='https://unpkg.com/formiojs@latest/dist/formio.full.min.js'></script>

        <div id="gjs"></div>

        <script type="text/javascript">
          
                   
          /***/

          /***/
          var editor = grapesjs.init({
              container : '#gjs',
              
              plugins: ['gjs-preset-webpage', 'grapesjs-custom-code'],
              pluginsOpts: {
                'grapesjs-custom-code': {
                  // options
                },
                'gjs-preset-webpage': {
                // options
                }
              }
          
              
              
          });

          /***/
        </script>
   
    </BODY>
    
    </HTML>

Answers (2)

artf• June 3, 20191 reactions

Hi @megarg actually new plugins (presets are not yet updated) use a new export format which makes this import import 'grapesjs-custom-code'; not usable. You can see the example of usage of new plugins here

megarg• May 31, 20190 reactions

Let me provide some more details: -----Configuration----- $ node -v v10.15.3

$ npx node-sass -v node-sass 4.12.0 (Wrapper) [JavaScript] libsass 3.5.4 (Sass Compiler) [C/C++]

OS is: Windows 10

Will really appreciate any pointers on why this plugin is giving this error.

[BUG] Not able to use plugin: grapesjs-custom-code

Question

Answers (2)

Related Questions and Answers

grapes.min.js:2 Uncaught TypeError: Cannot read property 'length' of undefined

BUG: CSS added via custom code persists after custom code component is removed

[BUG] component with textable:1 not working since version 0.16.12

BUG: Custom trait input not working

Paid Plugins That Match This Issue

Browse Plugin Categories