Netlify CMS address printed in console redirects to gatsby development 404 page

[giraffesyo]

Description

Navigating to http://localhost:8000/admin/ displays the gatsby 404 development page even though a page exists at http://localhost:9000/admin/index.html. We discussed this in gitter here: https://gitter.im/netlify/NetlifyCMS?at=5b565bd1c86c4f0b472cb5a9

Note: This does seem to be windows specific, because on my Mac it does not happen (both in Chrome)

(tagging @erquhart)

Steps to reproduce

1. Execute gatsby new my-default-project https://github.com/gatsbyjs/gatsby-starter-default#v2
2. Execute yarn add netlify-cms@^1.9.3 gatsby-plugin-netlify-cms@next
3. Add gatsby-plugin-netlify-cms to your gatsby-config.js plugins array.
4. Run gatsby develop
5. Attempt to navigate to http://localhost:8000/admin/

or

1. Clone this repo https://github.com/giraffesyo/bug-gatsby-plugin-netlify-cms
2. Run gatsby develop
3. Attempt to navigate to http://localhost:8000/admin/

Expected result

The Netlify CMS index page should be displayed.

Note: Without making a config file for the cms you should receive an error that says the following, it is irrelevant since we're not interested in actually setting it up for demonstrating the issue here:

Error loading the CMS configuration
The config.yml file could not be loaded or failed to parse properly.

Error message: Error: Failed to load config.yml (404)

Check your console for details.

Actual result

The Gatsby development 404 page is displayed instead.

Workaround

Navigate to http://localhost:8000/admin/index.html and you will be able to access the content manager. Note that this issue also does not happen on production versions of the site e.g. if you run gatsby build then gatsby serve you will not experience this issue when navigation to http://localhost:9000/admin/

Environment

System:
OS: Windows 10
CPU: x64 Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz
Binaries:
Yarn: 1.7.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 5.6.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 41.16299.547.0
npmPackages:
gatsby: next => 2.0.0-beta.55
gatsby-plugin-netlify-cms: ^2.0.0-beta.7 => 2.0.0-beta.7
gatsby-plugin-react-helmet: next => 3.0.0-beta.4

[kennedyrose]

I'm having the same issue, except the workaround doesn't work either. It was working for a bit but now it isn't. Might be related to cache/offline stuff.

[giraffesyo]

@kennedyrose Does your console show anything different after you could no longer access it from the index.html url? The only time I have trouble accessing it that way is if there was a compile issue with netlify CMS.

[qhoekman]

@giraffesyo Hi, for me the solution was installing [email protected]. The ˆ2.0 releases doesn't seem to be compatible with the gatsby-plugin-netlify-cms@next plugin yet. Also I've found out if you access a static folder like admin with index.htm instead of index.html, it show the error in the console.

[giraffesyo]

@qhoekman 1.9.3 is the version I tested this on, the 2.0 release of Netlify CMS came out later. The sample repo I have maintains that but I changed the @latest tag in the original post so that it is more clear what this issue is about.

That being said, you can access the admin panel by accessing http://localhost:8000/admin/? Are you on Windows?

[vtenfys]

This is fixed in #7355, it was caused by a bug introduced in #7268

Edit: to clarify why this was happening, #7268 made it so that the 404 page was loaded if a page couldn't be found by Gatsby - however, this meant that 404 pages would be displayed for all static pages. Once #7355 is merged, the new behaviour should be that if a page can't be found, instead of showing a 404, an attempt will be made to load it directly first.

However, I'm a bit confused as to why this is happening considering you haven't got any service workers on the site - @giraffesyo please could you try cloning from https://github.com/davidbailey00/gatsby/tree/fix-offline-issues and developing with gatsby-dev, and let me know the results?

[alastairkitchen]

I'm still getting the gatsby 404 page when trying to visit http://localhost:8000/admin/ after running gatsby develop. I'm using the latest versions of gatsby and netlify cms ("gatsby": "^2.1.27", "netlify-cms": "^2.6.0").

I can get to the admin page using the second part of workaround described by iraffesyo

"Note that this issue also does not happen on production versions of the site e.g. if you run gatsby build then gatsby serve you will not experience this issue when navigation to http://localhost:9000/admin/"

However I can't get to the admin page using http://localhost:8000/admin/index.html

My environment -
OS: MacOS Mojave 10.14.2
CPU: 2.7 GHz Intel Core i5
Browser: Chrome 2.0.3626.121 64bit

"gatsby": "^2.1.27",
"gatsby-plugin-netlify": "^2.0.0",
"gatsby-plugin-netlify-cms": "^3.0.12",
"gatsby-plugin-react-helmet": "^3.0.0",
"gatsby-plugin-sass": "^2.0.1",
"gatsby-plugin-sharp": "^2.0.5",
"gatsby-remark-images": "^2.0.1",
"gatsby-source-filesystem": "^2.0.1",
"gatsby-transformer-remark": "^2.1.1",
"gatsby-transformer-sharp": "^2.1.1",
"netlify-cms": "^2.6.0",

I'm using the gatsby-plugin-netlify-cms in gatsby-config.js

[vtenfys]

@alastairkitchen It sounds like you're trying to navigate to the admin page via a <Link> component - this won't work, since Link is designed for navigating to Gatsby pages.

If my assumption is wrong, then please can you open dev tools -> Application -> Clear storage and check if there are any service workers present? Maybe you've ended up with an old version of gatsby-plugin-offline on your local dev environment. If so, pressing "Clear site data" should fix the issue.

[oskareriksson]

@davidbailey00 I'm having the same problem as @alastairkitchen . Running gatsby build, gatsby serve and then going to localhost:9000/admin/# works, where as running gatsby develop and going to localhost:8000/admin/# returns the Gatsby develop 404 page. I've tried clearing the storage in the browser but that didn't solve it.

I tried cloning the example repo https://github.com/erquhart/gatsby-netlify-cms-example as listed in https://www.gatsbyjs.org/docs/sourcing-from-netlify-cms/ which works, but it's running older versions of both Gatbsy and NetlifyCMS. Maybe this is unrelated to the original issue, but since the discussion is ongoing here I figured I'd post here.

[alastairkitchen]

@davidbailey00 thanks for the speedy reply 👍 I tried clearing site data in dev tools > application and i'm still having issues getting the /admin (still showing the gatsby 404 page)

there is a netlify service worker running which had an error symbol beside the source file, i clicked on the source file which brings up the following console errors

[jasonblalock]

I also am having a similar problem after updating gatsbyjs to latest. However the workaround of using http://localhost:8000/admin/index.html does work with yarn develop. However using only /admin I get the 404 page.

This is reproducible by cloning https://github.com/netlify-templates/gatsby-starter-netlify-cms and doing a yarn upgrade gatsby. Gatsby version goes from 2.1.18 to 2.1.27. Still happens after clearing application site data.

Nothing super exciting in the console for that page:

My environment info:
System:
OS: Linux 4.20 Fedora 28 (Workstation Edition) 28 (Workstation Edition)
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Shell: 5.5.1 - /usr/bin/zsh
Binaries:
Node: 10.15.3 - /tmp/yarn--1552149371671-0.9514972558759038/node
Yarn: 1.13.0 - /tmp/yarn--1552149371671-0.9514972558759038/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
Languages:
Python: 2.7.15 - /usr/bin/python
Browsers:
Chrome: 72.0.3626.121
Firefox: 65.0
npmPackages:
gatsby: ^2.0.66 => 2.1.27
gatsby-image: ^2.0.23 => 2.0.30
gatsby-plugin-netlify: ^2.0.6 => 2.0.11
gatsby-plugin-netlify-cms: ^3.0.9 => 3.0.12
gatsby-plugin-purgecss: ^3.1.0 => 3.1.0
gatsby-plugin-react-helmet: ^3.0.4 => 3.0.7
gatsby-plugin-sass: ^2.0.7 => 2.0.10
gatsby-plugin-sharp: ^2.0.15 => 2.0.22
gatsby-remark-copy-linked-files: ^2.0.7 => 2.0.9
gatsby-remark-images: ^3.0.1 => 3.0.5
gatsby-remark-relative-images: ^0.2.1 => 0.2.1
gatsby-source-filesystem: ^2.0.12 => 2.0.23
gatsby-transformer-remark: ^2.1.15 => 2.2.6
gatsby-transformer-sharp: ^2.1.9 => 2.1.14

[jasonblalock]

@davidbailey00 I believe the issue started on v2.1.23. When I pin gatsby to 2.1.22, it works. Git bisect surfaced 9835f56 as the culprit. It seems to make sense considering considering http://localhost:8000/admin/index.html works. Everything is still working correctly in production. Would you like me to open a new issue?

Edit: Confirmed changing 9835f56#diff-346c3005d97c1ca0b5efb170af1b43f6R151 back to app.use(express.static(public)) has everything working in 2.1.27

[jasonblalock]

Closing the loop on this in case somebody comes here again. This was fixed by #12474