Getting a 404 on mixins.js
I think it's coming from cssIcons, seems like I forgot to check the value somewhere
Read full answer below ↓Question
First of all, thank you for this great tool.
- I'm using the latest version.
- The bug happens with a local copy of GrapesJS.
- MacOS - latest Chrome browser
- The bug is not present on the demo
- Expected behavior: have the editor loading without any errors
- What happens instead: I get a 404 error when the editor is appending styles
I'm getting the following error on the console after the editor is started:
mixins.js:27 GET http://example.com/editor/null net::ERR_ABORTED 404 (Not Found)
I replaced the real domain with "example.com", the rest of the URL is real.
On mixins.js, line 27, the instruction is head.insertBefore(link, head.firstChild);, it's part of the function that append styles to the editor. The problem is I'm passing an array of valid URLs, all of them resolve correctly as I see each style applied to the editor's html.
Here's how I'm creating the editor:
var editorSettings = {
fromElement: true,
height: '900px',
width: '600px',
cssIcons: null,
storageManager: { type: null },
noticeOnUnload: false,
panels: { defaults: [] },
canvas: {
styles: [
'https://fonts.googleapis.com/css?family=Libre+Franklin:400,600,700&display=swap',
'https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css',
'/wp-content/plugins/votersguide/public/css/pageTemplate.css?version=1.0.26'
]
},
assetManager: {
storageType : '',
storeOnChange : true,
storeAfterUpload : true,
assets : [],
uploadFile: function(e) {
var postHash = getUrlVars()['g'];
var nonce = $('#wpNonce').val();
var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
var formData = new FormData();
for(var i in files){
formData.append('file-'+i, files[i]) //containing all the selected images from local
}
formData.append('action', 'votersguide_editor');
formData.append('g', postHash);
formData.append('nonce', nonce);
$.ajax({
url: myAjax.ajaxurl,
type: 'POST',
data: formData,
contentType: false,
crossDomain: true,
dataType: 'json',
mimeType: "multipart/form-data",
processData:false,
success: function(result){
var myJSON = [];
$.each( result['data'], function( key, value ) {
myJSON[key] = value;
});
var images = myJSON;
editor.AssetManager.add(images); //adding images to asset manager of GrapesJS
}
});
},
},
};
editorSettings.container = '#'+selectedPage.attr('id');
var editor = grapesjs.init(editorSettings);
Answers (2)
I think it's coming from cssIcons, seems like I forgot to check the value somewhere
Amazing, looking forward for the next release! Thanks!
Related Questions and Answers
Continue research with similar issue discussions.
Issue #4000
Pasting a component in root body layer throws TypeError
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v89 Reproducible demo link https://...
Issue #6172
Need dark theme support in editor
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link --- Describe...
Issue #5708
Ability to change all margin, padding etc properties together
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? chrome latest Reproducible demo link we ar...
Issue #5199
Changes in component's attributes being reproduced in all the instances instead of just one
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v114 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 →Related tutorials
In-depth guides on the same topic.
Tutorial
Super Tooltip for GrapesJS — Version 0.1.5 Released 🎉
We’re excited to announce the v 0.1.5 update of Super Tooltip, our floating‑menu and tooltip plugin for GrapesJS
Tutorial
GrapesJS in 2026: The Complete Guide to the Open-Source Web Builder Framework
Master GrapesJS in 2026. Architecture, code examples, React integration, plugin development, Studio SDK, and how it compares to other projects
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.