Issue #3713Opened August 18, 2021by shkhalid1 reactions

Stored components with script can not be rendered properly

Question

I am facing some problem when try to save some components which includes some scripts and reload the page the components are not rendered properly. It's showing empty boxes. Example: When i try to save a chart component from jvas28/grapesjs-echarts and reload the page i am getting this <img width="1438" alt="Screen Shot 2021-08-18 at 4 20 43 PM" src="https://user-images.githubusercontent.com/8138036/129891078-2191094d-d735-4178-9859-588f774120b6.png">

Here is the example app https://codesandbox.io/s/cranky-wescoff-93pxd?file=/src/App.js

storageManager: {
      autoSave: 1,
      autoload: 1,
      type: "local"
    }

I also tried to setup remote storage. But I get the same result. Here is the api output. <img width="1291" alt="Screen Shot 2021-08-18 at 4 35 53 PM" src="https://user-images.githubusercontent.com/8138036/129891362-534bab14-f1c6-4c58-b061-a895df35921c.png">

I think this is related to https://github.com/artf/grapesjs/issues/1487 https://github.com/artf/grapesjs/issues/2069 https://github.com/artf/grapesjs/issues/3535 https://github.com/artf/grapesjs/issues/3141

Answers (2)

shkhalid• September 28, 20211 reactions

Thanks @artf! Finally i was able to figure it out The problems was in tagVarStart and tagVarEnd. After commenting it out it starts working

return grapesjs.init({
   // tagVarStart: '{{ ',
   // tagVarEnd: ' }}',
   .
   .
   });
artf• August 29, 20210 reactions

Hey @shkhalid thanks for the report, but on this repository, you should open reproducible issues without external plugins as it might be an issue with the plugin itself. At least for what I can tell about the core, I see no issues in Components with JS (if correctly implemented by following this guide)

Related Questions and Answers

Continue research with similar issue discussions.

Issue #2690

[QUESTIONS] Custom Component disappear on Save (Vue.js)

Hi All, I'm trying to test adding some custom Vue.js components to the block manager, and at first appearance, all is well - it renders cor...

3 answersUpdated April 2, 2020

Issue #2388

[Question] - How to import styles from <link> to be rendered when dragging block to canvas

My situation: I'm slowly importing some of my custom made UI components in ReactJS to GrapesJS. Now, I am able to render the component prop...

3 answersUpdated April 23, 2022

Issue #1875

[QUESTION] ID changes when importing html or passing html in components prop in config.

Hi, I built a component and block that I can drag and drop in the canvas. My issue is that some styles rely on the ID. I know this might no...

3 answersUpdated May 6, 2020

Issue #1658

[BUG] Checkbox trait does not load as checked even when the trait value is true

Hi, I'm using Grapesjs version 0.14.33. I'm loading some components when the form loads and I have a component with a checkbox trait. When...

3 answersUpdated December 20, 2019

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.

PresetsPluginsComponentsBlocksAssetsCommandsI18nLayersStylesStoragesRTENewslettersWeb pagesSite builders