Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Netlify CMS via npm: modals for invitation, email change etc disappearing
See original GitHub issueDescribe the bug All Modals are disappearing, when opened before the CMS init happened… This includes the login modal, and any of the modals opened from an email template.
The NPM version results in a very big bundle size (even after webpack), so it takes literally 5-10 seconds for the scripts to load when visiting /admin/.
After the CMS script loaded and the log in screen becomes visible, there’s another delay of 1-3 seconds before the CMS init happens.
If the log in button is clicked before that, it is disabled and cannot be clicked again.
This results in various problems for normal users, and also when inviting users, sending password change email etc.
- Normal Users (writers and so forth) have to be told to wait 10+ seconds before clicking the login button
- Any of the modals opened from an email template, are opened immediately, before the CMS init happens. So these disappear immediately after opening, so it is virtually impossible to enter anything.
Screenshots Here’s a video of the issue: I pasted the link from my email invitation into the url bar and hit return after the recording starts. As you can see, it loads forever because the bundle is so huge, the modal appears and at the end when the CMS init happens, it closes on it’s own and there’s no way to get it back and the login button is also disabled.
Now in the video, there was some time, if you’re fast, to enter a new password. But this isn’t always the case and most of the time it closes really fast after it opened.
https://user-images.githubusercontent.com/3166991/127622607-909b2036-c692-438d-8448-73441492d3c6.mov
Applicable Versions: I’m running the following: netlify-cms-app 2.15.30 netlify-cms-core 2.46.0 Github provider Node v16.0.0 NPM@7 (legacy peer deps)
CMS configuration
import landingPages from "./collections/landing-pages";
import reviews from "./collections/reviews";
import articles from "./collections/articles";
import authors from "./collections/authors";
import pages from "./collections/pages";
import affiliateLinks from "./collections/affiliate-links";
import CMS from "netlify-cms-app";
import cloudinary from "netlify-cms-media-library-cloudinary";
CMS.registerPreviewStyle("/assets/css/main.css");
CMS.registerMediaLibrary(cloudinary);
// Initialize the CMS object
CMS.init({
config: {
load_config_file: false,
backend: {
name: window.CMS_BACKEND_NAME,
repo: window.CMS_REPOSITORY,
branch: window.CMS_BRANCH,
proxy_url: window.CMS_PROXY_URL ?? null,
local_backend: window.CMS_LOCAL_BACKEND ?? false,
},
locale: window.CMS_LOCALE,
site_url: window.CMS_SITE_URL,
display_url: window.CMS_DISPLAY_URL,
publish_mode: window.CMS_PUBLISH_MODE,
logo_url: window.CMS_LOGO,
media_library: {
name: "cloudinary",
config: {
cloud_name: "XXXXXXXXX",
api_key: "XXXXXXXXXXX",
default_transformations: [
[
{
quality: "auto",
fetch_format: "auto",
},
],
],
},
},
collections: [
...
],
},
});
index.html"
---
permalink: /admin/index.html
eleventyExcludeFromCollections: true
hide_from_sitemap: true
---
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{ site.name | title }} Content Manager</title>
<script>
// This global flag enables manual initialization.
window.CMS_MANUAL_INIT = true;
window.CMS_SITE_URL = "{{ site.url }}";
window.CMS_DISPLAY_URL = "{{ site.url }}";
window.CMS_PUBLISH_MODE = "{{ site.cms.publish_mode }}";
window.CMS_BRANCH = "{{ site.cms.branch }}";
window.CMS_LOGO = "{{ site.url }}{{ site.logo }}";
{% if helpers.environment === "development" %}
window.CMS_BACKEND_NAME = "proxy";
window.CMS_LOCAL_BACKEND = true;
window.CMS_PROXY_URL = "{{ helpers.netlify_proxy_url }}";
{% else %}
window.CMS_BACKEND_NAME = "git-gateway";
window.CMS_REPOSITORY = "{{ site.cms.repository }}";
{% endif %}
</script>
<!-- Include the Netlify Identity platform to authenticate CMS access -->
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>
<body>
<!-- Include the script that builds the page and powers Netlify CMS -->
<script src="/assets/js/cms.js" async></script>
</body>
</html>
Additional context Is there anything I am doing completely wrong here? Or is that really unexpected behavior?
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (1 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
Hey @erezrokah , thanks for the explanation.
Maybe I didn’t explain it clear enough. But the initial problem was because I was using
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>in my index file.And I was able to fix it by switching to the manual init method you are describing with the NPM version of netlify identity.
The problem was that I am using the NPM/React CMS app along with the script tag, the script tag initialized long before the CMS and caused the modals to close.
After I switched to the NPM version, and manually initialized the identity widget (AFTER the CMS), everything works as expected.
If the first method should have worked as well, then there must be a bug somewhere I suppose
Hi @madsem, thanks for the detailed issue and following up on it. I still not sure what’s exactly happening, but I’ll share some more information. When you use
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>the Identity widget implicitly callsinitfor you: https://github.com/netlify/netlify-identity-widget/blob/e0072e56f8ee94d46b8b1c74c26b62be7122f1d8/src/index.js#L11When you use
const netlifyIdentity = require("netlify-identity-widget");you need to initialize the widget manually: https://github.com/netlify/netlify-identity-widget/blob/e0072e56f8ee94d46b8b1c74c26b62be7122f1d8/package.json#L63 points to this file: https://github.com/netlify/netlify-identity-widget/blob/e0072e56f8ee94d46b8b1c74c26b62be7122f1d8/src/netlify-identity.js#L24Regardless the CMS expects the Identity widget to be fully loaded and initialized. We’ve seen multiple cases where users are using
const netlifyIdentity = require("netlify-identity-widget"), but not callinginitfor the widget, so the CMS has a safety check for that: https://github.com/netlify/netlify-cms/blob/edaf9804eb51c90bfedb666b1747caf33f12b048/packages/netlify-cms-backend-git-gateway/src/implementation.ts#L104In all cases it’s best to make sure the Widget is loaded and initialized before the CMS is imported.