I need help in initializing a remoteStorage on grapesjs

[AndreeaCoaja]

Hi! I get an error message when I am trying to use a route to loading the editor with a local json file:
(shim.js:1 SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON)
This is how my json looks like:
{ "assets": [], "styles": [], "pages": [ { "component": "<div>Initial content</div>" } ] }
And I have also tries with a json with this structure:
{ "gjs-html": "<div class=\"test\">Initial content</div>", "gjs-css": ".test { color: red }", "gjs-components": [ { "tagName": "div", "content": "<div class=\"test\">Initial content</div>", "attributes": { "class": "test" } } ], "gjs-styles": [ { "selectors": [ ".test" ], "style": { "color": "red" } } ] }

My problem is that i cannot even see the route being called in Network tab, but when I am using Postman, it returns the json correctly. Moreover, if I use fetch, the route is also being triggered. What am I doing wrong?
Here i have the code for initializing grapesjs editor:

let editor = grapesjs.init({

    container : '#gjs',
    plugins: [
        'gjs-blocks-basic',
        'grapesjs-plugin-forms',
        'grapesjs-component-countdown',
        'grapesjs-plugin-export',
        'grapesjs-tabs',
        'grapesjs-custom-code',
        'grapesjs-touch',
        'grapesjs-parser-postcss',
        'grapesjs-tooltip',
        'grapesjs-tui-image-editor',
        'grapesjs-typed',
        'grapesjs-style-bg',
        'grapesjs-preset-webpage',
    ],
    pluginsOpts: {
        'gjs-blocks-basic': { flexGrid: true },
        'grapesjs-tui-image-editor': {
            script: [
                // 'https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js',
                'https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js',
                'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.js',
                'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.js'
            ],
            style: [
                'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.css',
                'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.css',
            ],
        },
        'grapesjs-tabs': {
            tabsBlock: { category: 'Extra' }
        },
        'grapesjs-typed': {
            block: {
                category: 'Extra',
                content: {
                    type: 'typed',
                    'type-speed': 40,
                    strings: [
                        'Text row one',
                        'Text row two',
                        'Text row three',
                    ],
                }
            }
        },
       
    },
    storageManager: {
        type: 'remote',
        fetchOptions: opts => (opts.method === 'POST' ?  { method: 'PATCH' } : {}),
        
        urlStore: "{{route('updateContentBuilderData')}}",
        urlLoad: 'http://127.0.0.1/core/content-builder-data',
        onLoad: (response) => {
            try {
                return response;
            } catch (error) {
                console.error('Error parsing JSON:', error);
                // Handle the error gracefully, return an empty object or show an error message to the user
                return {};
            }
        },
        onError: (error) => {
            console.error('Storage error:', error);
            // Handle the storage error, show an error message to the user
        },
    },
});

// And if I use this, then the call to the route is done:
editor.on('load', function(e) {
    fetch("{{ route('contentBuilderData') }}")
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error('Error fetching data:', error));
});

[artf]

See the error shim.js:1, it doesn't look to be from the editor, try to debug that file.

[AndreeaCoaja]

this error pops up:

grapes.min.js:

shim.js:

And if I console log o in that function from grapes.min.js, it returns that urlLoad is empty:

Moreover, i have added multiple console logs as in ss:

And it prints that the get is not done at the urlLoad that I have assigned and it returns my main.blade.php file:

[AndreeaCoaja]

it looks like it's not getting initialized because if I set urlLoad in grapes.min.js file, then the get call works as expected:

[artf]

I didn't notice your wrong configuration, please check always the latest documentation.