Comments (13)
timmy224
commented on June 30, 2024
2
I had the same issue and tried aforementioned troubleshooting steps to no avail. What did work for me was instead of using gatsby-remark-relative-images-v2 plugin, I used this instead: https://www.npmjs.com/package/gatsby-plugin-netlify-cms-paths to get it working locally.
See gatsbyjs/gatsby#5990 (comment).
from gatsby-starter-decap-cms.
maxcell
commented on June 30, 2024
Thanks for this report @ZBlocker655! We will investigate from there, what happens when you run npm run start or did you only use gatsby develop?
I think I might have a suspicion that this is a remnant of an issue that was long opened #770.
from gatsby-starter-decap-cms.
ZBlocker655
commented on June 30, 2024
More context: the first time I did this I followed recommendations and deployed to Netlify first and verified that site and CMS were up and running fine. It was only when I cloned locally for local development that it fell over as I described above. And I believe at that time I did run npm run build because I was following instructions in the readme.
from gatsby-starter-decap-cms.
ZBlocker655
commented on June 30, 2024
I did not try to edit anything from the CMS on Netlify. I have since taken down the Netlify site so I can focus on getting it running locally.
from gatsby-starter-decap-cms.
intelcoder
commented on June 30, 2024
I just clone it with use this template button and when I just run yarn develop. It shows error message like the image
from gatsby-starter-decap-cms.
maxcell
commented on June 30, 2024
@intelcoder Howdy can you give the system stats for what you're running? Operating system, node version and package manager version?
I'm trying to recreate this error but I can't seem to reproduce it on three different systems from a fresh install, using the same node versions and everything. Locally this error never occurs for me. Could someone provide their repository for me so I can investigate it from there? Maybe there was a missing update in between installs?
from gatsby-starter-decap-cms.
ZBlocker655
commented on June 30, 2024
Ran it again, with the following:
- Brand-new clone of this repository.
- Windows info:
- Edition: Windows 10 Pro
- Version: 21H2
- Installed on: 3/21/2021
- OS build: 19044.2130
- Experience: Windows Feature Experience Pack 120.2212.4180.0
- NVM 1.1.9
- Node 18.10.0
- NPM 8.19.2
- Gatsby CLI 4.24.0
Results of npm install:
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/uuid
npm WARN uuid@"^8.0.0" from the root project
npm WARN 1 more (gatsby)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer uuid@"^3.3.2" from [email protected]
npm WARN node_modules/netlify-cms-backend-test
npm WARN netlify-cms-backend-test@"^2.11.3" from [email protected]
npm WARN node_modules/netlify-cms-app
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/uuid
npm WARN peer uuid@"^3.3.2" from [email protected]
npm WARN node_modules/netlify-cms-backend-test
npm WARN netlify-cms-backend-test@"^2.11.3" from [email protected]
npm WARN node_modules/netlify-cms-app
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/uuid
npm WARN uuid@"^8.0.0" from the root project
npm WARN 1 more (gatsby)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer uuid@"^3.3.2" from [email protected]
npm WARN node_modules/netlify-cms-lib-auth
npm WARN netlify-cms-lib-auth@"^2.4.2" from [email protected]
npm WARN node_modules/netlify-cms-app
npm WARN 6 more (netlify-cms-backend-azure, ...)
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/uuid
npm WARN peer uuid@"^3.3.2" from [email protected]
npm WARN node_modules/netlify-cms-lib-auth
npm WARN netlify-cms-lib-auth@"^2.4.2" from [email protected]
npm WARN node_modules/netlify-cms-app
npm WARN 6 more (netlify-cms-backend-azure, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/uuid
npm WARN uuid@"^8.0.0" from the root project
npm WARN 1 more (gatsby)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer uuid@"^3.3.2" from [email protected]
npm WARN node_modules/netlify-cms-widget-file
npm WARN peer netlify-cms-widget-file@"^2.9.2" from [email protected]
npm WARN node_modules/netlify-cms-widget-image
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/uuid
npm WARN peer uuid@"^3.3.2" from [email protected]
npm WARN node_modules/netlify-cms-widget-file
npm WARN peer netlify-cms-widget-file@"^2.9.2" from [email protected]
npm WARN node_modules/netlify-cms-widget-image
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN react@"^17.0.0" from the root project
npm WARN 72 more (@emotion/core, @emotion/react, @emotion/styled, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@">=15.5 <=16.x" from [email protected]
npm WARN node_modules/react-codemirror2
npm WARN react-codemirror2@"^7.0.0" from [email protected]
npm WARN node_modules/netlify-cms-widget-code
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN peer react@">=15.5 <=16.x" from [email protected]
npm WARN node_modules/react-codemirror2
npm WARN react-codemirror2@"^7.0.0" from [email protected]
npm WARN node_modules/netlify-cms-widget-code
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN react@"^17.0.0" from the root project
npm WARN 72 more (@emotion/core, @emotion/react, @emotion/styled, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"0.0.0-experimental-c8b778b7f-20220825" from [email protected]
npm WARN node_modules/gatsby/node_modules/react-server-dom-webpack
npm WARN react-server-dom-webpack@"0.0.0-experimental-c8b778b7f-20220825" from [email protected]
npm WARN node_modules/gatsby
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN peer react@"0.0.0-experimental-c8b778b7f-20220825" from [email protected]
npm WARN node_modules/gatsby/node_modules/react-server-dom-webpack
npm WARN react-server-dom-webpack@"0.0.0-experimental-c8b778b7f-20220825" from [email protected]
npm WARN node_modules/gatsby
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/netlify-cms-core/node_modules/ajv
npm WARN ajv@"8.1.0" from [email protected]
npm WARN node_modules/netlify-cms-core
npm WARN netlify-cms-core@"^2.55.2" from [email protected]
npm WARN 1 more (ajv-errors)
npm WARN Could not resolve dependency:
npm WARN node_modules/netlify-cms-core/node_modules/ajv-keywords
npm WARN ajv-keywords@"^5.0.0" from [email protected]
npm WARN node_modules/netlify-cms-core
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/ajv
npm WARN peer ajv@"^8.8.2" from [email protected]
npm WARN node_modules/netlify-cms-core/node_modules/ajv-keywords
npm WARN ajv-keywords@"^5.0.0" from [email protected]
npm WARN node_modules/netlify-cms-core
npm WARN deprecated @types/[email protected]: This is a stub types definition. vfile-message provides its own type definitions, so you do not need this installed.
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
added 1962 packages, and audited 1963 packages in 1m
333 packages are looking for funding
run `npm fund` for details
44 vulnerabilities (23 moderate, 21 high)
To address issues that do not require attention, run:
npm audit fix
To address all issues possible (including breaking changes), run:
npm audit fix --force
Some issues need review, and may require choosing
a different dependency.
Run `npm audit` for details.
Results of npm run build:
> [email protected] build
> npm run clean && gatsby build
> [email protected] clean
> gatsby clean
info Deleting .cache, public, C:\Users\Zach\Projects\gatsby-starter-netlify-cms\node_modules\.cache\babel-loader,
C:\Users\Zach\Projects\gatsby-starter-netlify-cms\node_modules\.cache\terser-webpack-plugin
info Successfully deleted directories
success compile gatsby files - 1.636s
success load gatsby config - 0.103s
success load plugins - 8.798s
warn gatsby-plugin-react-helmet: Gatsby now has built-in support for modifying the document head. Learn more at
https://gatsby.dev/gatsby-head
success onPreInit - 0.014s
success initialize cache - 0.185s
success copy gatsby files - 1.161s
success Compiling Gatsby Functions - 1.851s
success onPreBootstrap - 1.924s
success createSchemaCustomization - 0.011s
success Checking for changed pages - 0.001s
success source and transform nodes - 0.322s
info Writing GraphQL type definitions to C:/Users/Zach/Projects/gatsby-starter-netlify-cms/.cache/schema.gql
success building schema - 0.431s
success createPages - 0.100s
success createPagesStatefully - 0.132s
info Total nodes: 135, SitePage nodes: 20 (use --verbose for breakdown)
success Checking for changed pages - 0.001s
success onPreExtractQueries - 0.001s
ERROR #85922 GRAPHQL
There was an error in your GraphQL query:
Field "featuredimage" must not have a selection since type "String" has no subfields.
This can happen if you e.g. accidentally added { } to the field "featuredimage". If you didn't expect
"featuredimage" to be of type "String" make sure that your input source and/or plugin is correct.
However, if you expect "value" to exist, the field might be accessible in another subfield. Please try your query
in GraphiQL.
It is recommended to explicitly type your GraphQL schema if you want to use optional fields.
File: src\components\BlogRoll.js:96:33
See our docs page for more info on this error: https://gatsby.dev/creating-type-definitions
ERROR #85922 GRAPHQL
There was an error in your GraphQL query:
Field "image" must not have a selection since type "String" has no subfields.
This can happen if you e.g. accidentally added { } to the field "image". If you didn't expect "image" to be of
type "String" make sure that your input source and/or plugin is correct.
However, if you expect "value" to exist, the field might be accessible in another subfield. Please try your query
in GraphiQL.
It is recommended to explicitly type your GraphQL schema if you want to use optional fields.
File: src\templates\index-page.js:122:15
See our docs page for more info on this error: https://gatsby.dev/creating-type-definitions
ERROR #85922 GRAPHQL
There was an error in your GraphQL query:
Field "image" must not have a selection since type "String" has no subfields.
This can happen if you e.g. accidentally added { } to the field "image". If you didn't expect "image" to be of
type "String" make sure that your input source and/or plugin is correct.
However, if you expect "value" to exist, the field might be accessible in another subfield. Please try your query
in GraphiQL.
It is recommended to explicitly type your GraphQL schema if you want to use optional fields.
File: src\templates\index-page.js:136:19
See our docs page for more info on this error: https://gatsby.dev/creating-type-definitions
ERROR #85922 GRAPHQL
There was an error in your GraphQL query:
Field "image" must not have a selection since type "String" has no subfields.
This can happen if you e.g. accidentally added { } to the field "image". If you didn't expect "image" to be of
type "String" make sure that your input source and/or plugin is correct.
However, if you expect "value" to exist, the field might be accessible in another subfield. Please try your query
in GraphiQL.
It is recommended to explicitly type your GraphQL schema if you want to use optional fields.
File: src\templates\product-page.js:158:15
See our docs page for more info on this error: https://gatsby.dev/creating-type-definitions
ERROR #85922 GRAPHQL
There was an error in your GraphQL query:
Field "image" must not have a selection since type "String" has no subfields.
This can happen if you e.g. accidentally added { } to the field "image". If you didn't expect "image" to be of
type "String" make sure that your input source and/or plugin is correct.
However, if you expect "value" to exist, the field might be accessible in another subfield. Please try your query
in GraphiQL.
It is recommended to explicitly type your GraphQL schema if you want to use optional fields.
File: src\templates\product-page.js:167:19
See our docs page for more info on this error: https://gatsby.dev/creating-type-definitions
ERROR #85922 GRAPHQL
There was an error in your GraphQL query:
Field "image" must not have a selection since type "String" has no subfields.
This can happen if you e.g. accidentally added { } to the field "image". If you didn't expect "image" to be of
type "String" make sure that your input source and/or plugin is correct.
However, if you expect "value" to exist, the field might be accessible in another subfield. Please try your query
in GraphiQL.
It is recommended to explicitly type your GraphQL schema if you want to use optional fields.
File: src\templates\product-page.js:182:19
See our docs page for more info on this error: https://gatsby.dev/creating-type-definitions
ERROR #85922 GRAPHQL
There was an error in your GraphQL query:
Field "image" must not have a selection since type "String" has no subfields.
This can happen if you e.g. accidentally added { } to the field "image". If you didn't expect "image" to be of
type "String" make sure that your input source and/or plugin is correct.
However, if you expect "value" to exist, the field might be accessible in another subfield. Please try your query
in GraphiQL.
It is recommended to explicitly type your GraphQL schema if you want to use optional fields.
File: src\templates\product-page.js:190:19
See our docs page for more info on this error: https://gatsby.dev/creating-type-definitions
ERROR #85922 GRAPHQL
There was an error in your GraphQL query:
Field "image" must not have a selection since type "String" has no subfields.
This can happen if you e.g. accidentally added { } to the field "image". If you didn't expect "image" to be of
type "String" make sure that your input source and/or plugin is correct.
However, if you expect "value" to exist, the field might be accessible in another subfield. Please try your query
in GraphiQL.
It is recommended to explicitly type your GraphQL schema if you want to use optional fields.
File: src\templates\product-page.js:198:19
See our docs page for more info on this error: https://gatsby.dev/creating-type-definitions
ERROR #85922 GRAPHQL
There was an error in your GraphQL query:
Field "full_image" must not have a selection since type "String" has no subfields.
This can happen if you e.g. accidentally added { } to the field "full_image". If you didn't expect "full_image" to
be of type "String" make sure that your input source and/or plugin is correct.
However, if you expect "value" to exist, the field might be accessible in another subfield. Please try your query
in GraphiQL.
It is recommended to explicitly type your GraphQL schema if you want to use optional fields.
File: src\templates\product-page.js:210:20
See our docs page for more info on this error: https://gatsby.dev/creating-type-definitions
failed extract queries from components - 2.043s
from gatsby-starter-decap-cms.
matheusdamiao
commented on June 30, 2024
@intelcoder Howdy can you give the system stats for what you're running? Operating system, node version and package manager version?
I'm trying to recreate this error but I can't seem to reproduce it on three different systems from a fresh install, using the same node versions and everything. Locally this error never occurs for me. Could someone provide their repository for me so I can investigate it from there? Maybe there was a missing update in between installs?
I'm getting the same error as @ZBlocker655 described above, when trying to develop locally either by npm run start or gatsby develop.
@maxcell This is my cloned repo https://github.com/matheusdamiao/blog-netlify-cms-default. You can totally use it.
@ZBlocker655 the warning messages from npm install I guess you can fix by passing a --legacy-peer-deps flag when runing a npm install command.
from gatsby-starter-decap-cms.
saladynsan
commented on June 30, 2024
I have the same problem, did you solve it?
from gatsby-starter-decap-cms.
D6NDesigns
commented on June 30, 2024
I have the same problem, did you solve it?
Me also, was this ever solved?
from gatsby-starter-decap-cms.
ZBlocker655
commented on June 30, 2024
I solved the warning messages as @matheusdamiao indicated but I never did solve the underlying issue. I am no longer actively working on this and I decided to go with first a different Gatsby template and later a different static site generator altogether (not because of this.)
from gatsby-starter-decap-cms.
regalius
commented on June 30, 2024
Bumping gatsby-remark-relative-images to "^0.3.0" and adding these changes to gatsby-node.js worked for me
from gatsby-starter-decap-cms.
ljpernic
commented on June 30, 2024
I am struggling with the same problem. I tried the suggestion that regalius suggested, but I couldn't get it to work. Has anybody figured out a solution?
I had it working for a while in December (I think maybe I had rolled back my Gatsby version? Or tried an older version of the starter?). I set up a fresh version today with the one-click set-up and that worked great, but when I created a local instance, it didn't work with develop or build. If anybody has any suggestions, I'd be grateful!
Edit: From what I can tell, the images are appearing correctly in the blog but not anywhere else. The difference is that in the blog, the image fragment doesn't have any subfields--instead those subfields are being implemented inside of PreviewCompatibleImage using imageInfo.
When I console log the frontmatter, it returns everything, including paths for images like: "image":"..\..\static\img\project_two.png". So, I wonder if things could be being done out of order? Whatever is supposed to be modifying the image field with subfields is happening after its image nodes are supposed to be created?
Also, EventRoll on index-page seems to break the whole thing. Removing it still gives the string errors, but with it it won't even load the page. Says it can't find image data for an image that doesn't exist. But when I go into EventRoll and console.log(post.frontmatter.featuredimage), it returns "......\static\img\chemex.jpg". So it knows the path of the image--it just isn't recognizing it as an image.
It uses PreviewCompatibleImage to try to show the image. Console logging the image in PreviewCompatibleImage gives "....\static\img\project_four.png" and the other three project images as well. So the string is making it all the way through. Should it be converted to an object here but isn't? Or is it that the path is wrong?
The error for EventRoll remains that it can't read properties of undefined (reading 'gatsbyImageData') inside the PreviewCompatibleImage in EventRoll. So I think they aren't talking to each other right. The other images still have the problem of being considered strings, but they might be able to be fixed by using code from the blog-post templates, since that seems to work.
Right now, I am thinking it is something to do with the prop or string functionality using .shape. I think the purpose of it is so that it works right with the netlify CMS stuff (which is why Netlify builds it correctly). When it is a string, the Netlify CMS must convert it correctly when it builds it, but when you build it locally, that Netlify CMS functionality isn't there, so it only sees it as a string.
What do y'all think?
from gatsby-starter-decap-cms.
Related Issues (20)
- Testing edition of a page on netlify cms, automatic deploy on Netlify fails HOT 10
- Update Navbar to use more accessible practices
- Convert components into using functions and hooks
- Make Footer stay to the bottom of the given window HOT 1
- Unable to install dependencies for a freshly created project HOT 6
- Hero image does not scroll HOT 1
- switch from master to main HOT 1
- No MDX Compatibility HOT 1
- Hidden templateKey fields not saving to .md file HOT 1
- BlogRoll not using "count" property HOT 1
- Upgrade gatsby-plugin-netlify to ^5.0.0 due to incompatibility with gatsby v4 HOT 12
- Git Gateway Error on quick start HOT 3
- Replace React Helment with Gatsby Head HOT 1
- Add Cypress tests to validate site operating as expected
- null
- [text-color] providing the text color as the template color
- error "gatsby-plugin-decap-cms"
- Uncaught TypeError: i.createRoot is not a function HOT 5
- *long hot reload times*: Critical dependency: the request of a dependency is an expression, [webpack-dev-middleware] wait until bundle finished: HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gatsby-starter-decap-cms.