Cannot Store Data Unexpected token '-'
Variable names can't contain '-', so this syntax is invalid:
Read full answer below ↓Question
Please Help Me, I Want To Store gjs data to mysql but i cannot get any data from front end to back end here my code: `const editor = grapesjs.init({ container: "#editor", storageManager: { type: 'remote', params: {}, // For custom values on requests // your SERVER endpoints urlStore: 'http://example.com/store-webpage', urlLoad: 'http://example.com/load-webpage', contentTypeJson: true, setStepsBeforeSave: 1, },
blockManager: {
appendTo: "#blocks",
},
styleManager: {
appendTo: "#styles-container",
sectors: [
{
name: "Dimension",
open: false,
buildProps: ["width", "min-height", "padding"],
properties: [
{
type: "integer",
name: "The width",
property: "width",
units: ["px", "%"],
defaults: "auto",
min: 0,
},
],
},
],
},
layerManager: {
appendTo: "#layers-container",
},
traitManager: {
appendTo: "#trait-container",
},
selectorManager: {
appendTo: "#styles-container",
},
panels: {
defaults: [
{
id: "basic-actions",
el: ".panel__basic-actions",
buttons: [
{
id: "visibility",
active: true, // active by default
className: "btn-toggle-borders",
label: '<i class="fa fa-clone"></i>',
command: "sw-visibility", // Built-in command
},
],
},
{
id: "store-data",
el: ".panel__save-data",
buttons: [
{
id: 'save-db',
className: 'fa fa-flopy icon-flopy',
label: '<i class="far fa-save"></i>',
command: 'save-db',
attributes: { title: 'Save DB' }
},
],
},
{
id: "panel-devices",
el: ".panel__devices",
buttons: [
{
id: "device-desktop",
label: '<i class="fa fa-television"></i>',
command: "set-device-desktop",
active: true,
togglable: false,
},
{
id: "device-mobile",
label: '<i class="fa fa-mobile"></i>',
command: "set-device-mobile",
togglable: false,
},
],
},
],
},
deviceManager: {
devices: [
{
name: "Desktop",
width: "",
},
{
name: "Mobile",
width: "320px",
widthMedia: "480px",
},
],
},
plugins: ["gjs-blocks-basic"],
pluginsOpts: {
"gjs-blocks-basic": {},
},
});
// Commands
editor.Commands.add('save-db', {
run: function (editor, sender) {
sender && sender.set('active', 0); // turn off the button
editor.store();
}
});
editor.on('storage:load', function(e) { console.log('Loaded ', e);});
editor.on('storage:store', function(e) { console.log('Stored ', e);});
editor.Commands.add("set-device-desktop", {
run: (editor) => editor.setDevice("Desktop"),
});
editor.Commands.add("set-device-mobile", {
run: (editor) => editor.setDevice("Mobile"),
});
`
backend store-webpage
`exports.storeWebpage = async (req, res)=>{
const { gjs-assets, gjs-components, gjs-css, gjs-html, gjs-styles } = req.body;
if (user){
var gjs_content = new GjsModels({
assets:assets,
components:components,
css:css,
html:html,
styles:styles
})
await gjs_content.save()
.then(response=>{
console.log(`Saved Successful with ${response}`)
res.redirect('/admin/story-maker');
}).catch(err =>{
console.log(`Saved Error ${err.message}`)
res.redirect('/admin/story-maker');
})
}
}`Answers (4)
Variable names can't contain '-', so this syntax is invalid:
const { gjs-assets, gjs-components, gjs-css, gjs-html, gjs-styles } = req.body;
please help i want to store my the template to mysql how i to do it?
Unfortunately this may be beyond the scope of grapesjs but some things to note
// this is invalid
const { gjs-assets, gjs-components, gjs-css, gjs-html, gjs-styles } = req.body;
// you can try assigning each value individually
const { body } = req;
const assets = body['gjs-assets'];
const components = body['gjs-components'];
//...
Also since it looks like you're removing the gjs- prefix during storage, you must also add it back during loading. A similar approach is used here https://github.com/Ju99ernaut/gjs-api but for python and postgres.
Thanks for reporting this, @Spectrevuln-sketch.
The issue with Cannot Store Data Unexpected token '-' appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating an inconsistent state.
What to try:
- Add a setTimeout wrapper to ensure the DOM has settled:
setTimeout(() => {
// your operation here
}, 0);
-
Check initialization order — make sure components are fully loaded before you interact with them
-
Use the editor's event system — listen to completion events:
editor.on('component:mount', (component) => {
// safe to interact with component here
});
Recommended next steps:
- Test with the latest GrapesJS version if you haven't
- Provide a minimal reproducible example (CodeSandbox) — this helps the team identify the root cause faster
- Include GrapesJS version, browser, and console errors in your report
Related Questions and Answers
Continue research with similar issue discussions.
Issue #4191
We are trying to store the data from grapesJS editor in Angular 10 application, getting CORS error, image attached below
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 99.0.4844.5 Reproducible demo link...
Issue #3347
How can I get Uncompressed JS code for me to edit?
Hi, thank you for reviewing my problem. I want to use my own JSEditor to edit html、css and js. 1、First, I use getHtml, getCss, getJs to dis...
Issue #3137
When I select an particular element I'm not getting its styles. This issue happens only with some elements.
Not getting styles of the selected element Here is my code, const model = editor.StyleManager.getModelToStyle(component); let styleObject =...
Issue #5000
Localization works weird
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 111 Reproducible demo link https://...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.