Stuck on "loading" (spinner loader)

I recommend that you check the log report and also check the browser console log.

Then you need to look into the browser console, as Marco asked for above. Copy/paste the error message you might find there.

Strange. We're not able to recreate this issue.

Try to debug down to what kind of conflict that are happening.
Make sure you have a long read text field on the content type.
Have you tested it on a simple content type on the same site? Basic page or similar?
Are you using the "Seven" admin theme? If not, try that.
Not sure if the frontend theme could provide conflicts also, as it is displayed in the editor.

The same happens on https://drupalgutenberg.org/demo with Edge.

Nothing else on the screen but the "Loading" text and spinner.

There are several errors on the console:

SCRIPT1028: SCRIPT1028: Expected identifier, string or number js_YA5fNxXcVjwZQEwLh8DQHh9naralHfOTIc_YK0yqsMI.js (3644,591815)
SCRIPT5007: SCRIPT5007: Unable to get property 'element' of undefined or null reference index.js (1,53777)
SCRIPT5007: SCRIPT5007: Unable to get property 'i18n' of undefined or null reference index.js (1,1580)
SCRIPT5007: SCRIPT5007: Unable to get property 'element' of undefined or null reference index.js (1,1525)
SCRIPT5009: SCRIPT5009: 'wp' is not defined index.js (1,10199)
2SCRIPT5007: SCRIPT5007: Unable to get property 'element' of undefined or null reference index.js (1,1400)
SCRIPT5009: SCRIPT5009: 'jQuery' is not defined js_MWqh4hl4qtaz-16cZ9lKCO7GjA7PZdNsm0oHjcLX7xE.js (8,2)

softone: you are so right. Been a while since we've tested with Edge in Windows. Can you confirm everything is working fine with other browsers in Windows?

This should be an easy fix then. We'll look into it. Thanks for the input!

This is related to Gutenberg-JS. I opened an issue:
https://github.com/front/gutenberg-js/issues/26

Hi guys,

I had the same issue but it was related to missing body field.

How to recreate:
1. Take a content type
2. Remove a body field
3. Make sure Gutenberg is enabled on this content type
4. Create new content for this content type

For now, I have found a reason, not the solution ;)
Will look into that.

PS. The solution might be adding a Body field (if not present) ;)

@jakubmroz having a text field is kind of mandatory (doesn't need to call it body). Drupal Gutenberg is in its core a text editor plugin and it can only be used if a text field on the node/entity exists.

I've committed a Gutenberg-JS patched build to dev (8.x-1.x) branch. It fixes Edge issues. After the G-JS team accepts my PR and drops a new version, I'll update it again. Anyway, for now, is good to go 😉

I had to revert the Gutenberg JS build because it added some issues with Redux lib. I'll be working with Gutenberg JS team to solve this ASAP.

MS Edge issues fixed with https://www.drupal.org/project/gutenberg/issues/3051739

Came here as same problem. "Loading..." at top of create content (node) with circular spinny/spinner.

Analysis so far / Tried / checked the following:
- No errors seen in Networking (in browser dev tools)
- Console empty
- Switched on Gutenberg in edit content type for Basic Page which already had a body field (summary + body, formatted text)
- Added another field "main" as long text formatted
- Deleted field "main" and tried with non-formatted long text
- Cleared cache
- Ran drush updb
- Checked dblogs/watchdog, nothing related it would appear there
- created a new content type, text page, with long text formatted field

Running locally using ddev local docker-based environment on Ubuntu 18.04 LTS 64bit, 32Gb RAM, Intel i7 quad-core. Browser is Chrome.

UBlock extension installed - disabled it for the page, just in case.

Installed gutenberg as follows:

composer require drupal/gutenberg

No separate JS libraries to download also, right? Assuming above line does it all - Drupal module + js. Assume so - no statement about this on project page for module. Looks like it's OK, no warnings in admin/reports/status about missing libraries - nothing mentioned there.

Drupal Lightning, Drupal core version 8.7.10 (yes I'm aware of 8.8 and will be upgrading soon, but that can't be the issue surely?), Gutenberg version 8.x-1.10

I tested with the latest Lightning distro installed with quickstart script and enabled Gutenberg on both Landing and Basic page content types. Both worked with no issues.
It's really weird that there isn't any error on the browser console. Could try with another browser like Firefox?
Maybe you could also try with a clean Drupal install.
By the way, Gutenberg works fine with Drupal 8.7 and 8.8.

Thank you for you help so far @marcofernandes

I think I'll take up your suggestion to try with a clean Drupal install -and if that works then migrate my custom code (themes and modules), config and content into it.

I'd also like to know what is happening at "Loading..." - is the Gutenberg code waiting for something, like a JavaScript event? Can you enlighten me, please. That might help me/others/yourself to debug the issue. I'd certainly like to help.

Well, a lot is going on when the page loads. It loads all the Gutenberg core scripts and its dependencies like React. Drupal does an excellent job by managing all script dependencies so I don't think the problems is there. If nothing else it would definitely throw some errors if something went wrong with dependencies.
After all scripts loaded, and at Drupal's attach function, some Drupal specific blocks and categories are registered and also some events attached. Only after that the Gutenberg editor is initialized.
Again, it's really weird that no error is thrown. I would like to help you more on this but as you might guess without replicating the issue it's more of guessing game :)
Maybe you could add directly on the gutenberg.js file (at the /js folder) some console.log(), especially on the _initGutenberg function and near the editPost.initializeEditor() call. I would check if the vars aren't null or something like that.
Or use Chrome's debugging capabilities and do a step-by-step execution:

(Don't forget to disable js aggregation)

In my case, gutenberg.js is not being loaded in the first place. I found this by searching for "gutenberg" in the source of the page that is stuck on "Loading..." . so I cannot browse to that line of code in gutenberg.js to set the break point.

So the focus of the troubleshooting and debugging should be what is stopping the gutenberg module from loading gutenberg.js, not gutenberg.js itself.

See screenshot which shows the Sources view of Chrome Developer Tools. Unlike your screenshot, because gutenberg.js is not loaded, the code for it is not displayed in Sources for me to set a js breakpoint that you are advising.

Thank you for your input on it so far - your screenshot prompted me to check mine to then set a breakpoint as you advise.

But as my analysis above shows, my focus now will be what is stopping the gutenberg module loading gutenberg.js.

I'm now looking into if the js in my installed version of the Colorbox contrib module is related to this issue.

My findings in the previous post did not have aggregation turned off. I now do have it turned off as you advised. However gutenberg.js is not being loaded, looking at the Sources window. However, with aggregation turned off I can see more things showing up in that Sources display in the Chrome Developer Tools. One of them is Colorbox. The question now is: Could the version of the js in the installed Colorbox module on my site have a bug which interferes with gutenberg.js loading? Two options, disable the Colorbox module, or update it if it needs updating. Also look at other code shown in the Sources to see if that has js. I will note that there is no appearance of gutenberg, not the module nor the js, so that is something to bear in mind for the approach of if something else is causing it to not run.

Further thoughts: I think it's something generally that is stopping Gutenberg contrib module loading the gutenberg.js rather than a js library from a specific module blocking it.

I say this because on another setup, I saw that fontyourface contrib module had appeared in Sources, instead of Colorbox in the other situation.

I haven't yet checked removing Colorbox from my setup, nor fontyourface, both need changes to my site content in order for them to be uninstalled.

Please can you consider how Gutenberg contrib module "launches" the gutenberg.js for the create content/edit content page.

I've created a new issue for understanding how Gutenberg module loads its js, here: https://www.drupal.org/project/gutenberg/issues/3101478 so that it is an open ticket as this discussion has slightly shifted away from the original ticket but nonetheless is still related.

Resolved it by uninstalling and re-enabling gutenberg module:

1) For each Content Type I had Gutenberg enabled I unchecked/unticked Gutenberg Experience checkbox/tickbox so that it is deactivated for that Content Type. Doing this is required before attempting to uninstall the module (step 2)

2) uninstall the Drupal Gutenberg contrib module and re-enable it:

$ ddev drush pm-uninstall gutenberg
The following extensions will be uninstalled: gutenberg, gutenberg_cloud

 Do you want to continue? (yes/no) [yes]:
 > yes

 [success] Successfully uninstalled: gutenberg, gutenberg_cloud
$ ddev drush en gutenberg
 [success] Successfully enabled: gutenberg
$ ddev drush updb
 [success] No pending updates.
$ 

This ought to be investigated perhaps if there is something that is causing the install to silently fail and then the module doesn't work.

I had this problem and the way i solved it is :
I wanted to add gutenberg to an existing content type with many fields.
so after a lot of struggling found out that i need to remove all the fields.
then clear the cache.
- create a body field which is nessacary
- enable gutenberg
- then you are able to add other fields as well.
it should work as expected after all
hope this help!

Also found out that in the body field this format should be enabled : Gutenberg Blocks text format

admin/structure/types/manage/article/fields/node.article.field_body

For me it was working for user 1 but not my editors.

Adding the permission "Administer Gutenberg" for my editors fixed this. However, I don't want editors to administer Gutenberg settings on node types. In my case this is mitigated since I don't allow editors to edit node types.

It does feel like there should be a "Use gutenberg editor" permission instead, or it should use the input filters permissions.

+1 on the remark of @loze. I have the same issue. It's stuck on loading for editors. When I enable the Administer Gutenberg permission this is solved. There should be a seperate permission IMHO

This happens for me too, even for user 1.