💬 Answered: Not able to use plugin: grapesjs-custom-…

Question

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

代码片段TEXT

- 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, 2019

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, 2019

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.

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

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

Custom trait input not working

How to export JS code from angular components?

Paid Plugins That Match This Issue

Browse Plugin Categories