Open ZBlocker655 opened 2 years ago
maxcell
commented
2 years ago 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.
ZBlocker655
commented
2 years ago 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.
ZBlocker655
commented
2 years ago 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.
intelcoder
commented
2 years ago I just clone it with use this template button and when I just run yarn develop. It shows error message like the image
maxcell
commented
2 years ago @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?
ZBlocker655
commented
2 years ago Ran it again, with the following:
Results of npm install:
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: netlify-cms-backend-test@2.11.3
npm WARN Found: uuid@8.3.2
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 netlify-cms-backend-test@2.11.3
npm WARN node_modules/netlify-cms-backend-test
npm WARN netlify-cms-backend-test@"^2.11.3" from netlify-cms-app@2.15.72
npm WARN node_modules/netlify-cms-app
npm WARN
npm WARN Conflicting peer dependency: uuid@3.4.0
npm WARN node_modules/uuid
npm WARN peer uuid@"^3.3.2" from netlify-cms-backend-test@2.11.3
npm WARN node_modules/netlify-cms-backend-test
npm WARN netlify-cms-backend-test@"^2.11.3" from netlify-cms-app@2.15.72
npm WARN node_modules/netlify-cms-app
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: netlify-cms-lib-auth@2.4.2
npm WARN Found: uuid@8.3.2
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 netlify-cms-lib-auth@2.4.2
npm WARN node_modules/netlify-cms-lib-auth
npm WARN netlify-cms-lib-auth@"^2.4.2" from netlify-cms-app@2.15.72
npm WARN node_modules/netlify-cms-app
npm WARN 6 more (netlify-cms-backend-azure, ...)
npm WARN
npm WARN Conflicting peer dependency: uuid@3.4.0
npm WARN node_modules/uuid
npm WARN peer uuid@"^3.3.2" from netlify-cms-lib-auth@2.4.2
npm WARN node_modules/netlify-cms-lib-auth
npm WARN netlify-cms-lib-auth@"^2.4.2" from netlify-cms-app@2.15.72
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: netlify-cms-widget-file@2.11.1
npm WARN Found: uuid@8.3.2
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 netlify-cms-widget-file@2.11.1
npm WARN node_modules/netlify-cms-widget-file
npm WARN peer netlify-cms-widget-file@"^2.9.2" from netlify-cms-widget-image@2.8.1
npm WARN node_modules/netlify-cms-widget-image
npm WARN
npm WARN Conflicting peer dependency: uuid@3.4.0
npm WARN node_modules/uuid
npm WARN peer uuid@"^3.3.2" from netlify-cms-widget-file@2.11.1
npm WARN node_modules/netlify-cms-widget-file
npm WARN peer netlify-cms-widget-file@"^2.9.2" from netlify-cms-widget-image@2.8.1
npm WARN node_modules/netlify-cms-widget-image
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-codemirror2@7.2.1
npm WARN Found: react@17.0.2
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 react-codemirror2@7.2.1
npm WARN node_modules/react-codemirror2
npm WARN react-codemirror2@"^7.0.0" from netlify-cms-widget-code@1.3.4
npm WARN node_modules/netlify-cms-widget-code
npm WARN
npm WARN Conflicting peer dependency: react@16.14.0
npm WARN node_modules/react
npm WARN peer react@">=15.5 <=16.x" from react-codemirror2@7.2.1
npm WARN node_modules/react-codemirror2
npm WARN react-codemirror2@"^7.0.0" from netlify-cms-widget-code@1.3.4
npm WARN node_modules/netlify-cms-widget-code
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-server-dom-webpack@0.0.0-experimental-c8b778b7f-20220825
npm WARN Found: react@17.0.2
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 react-server-dom-webpack@0.0.0-experimental-c8b778b7f-20220825
npm WARN node_modules/gatsby/node_modules/react-server-dom-webpack
npm WARN react-server-dom-webpack@"0.0.0-experimental-c8b778b7f-20220825" from gatsby@4.24.4
npm WARN node_modules/gatsby
npm WARN
npm WARN Conflicting peer dependency: react@0.0.0-experimental-c8b778b7f-20220825
npm WARN node_modules/react
npm WARN peer react@"0.0.0-experimental-c8b778b7f-20220825" from react-server-dom-webpack@0.0.0-experimental-c8b778b7f-20220825
npm WARN node_modules/gatsby/node_modules/react-server-dom-webpack
npm WARN react-server-dom-webpack@"0.0.0-experimental-c8b778b7f-20220825" from gatsby@4.24.4
npm WARN node_modules/gatsby
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: ajv-keywords@5.1.0
npm WARN Found: ajv@8.1.0
npm WARN node_modules/netlify-cms-core/node_modules/ajv
npm WARN ajv@"8.1.0" from netlify-cms-core@2.55.2
npm WARN node_modules/netlify-cms-core
npm WARN netlify-cms-core@"^2.55.2" from netlify-cms-app@2.15.72
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 netlify-cms-core@2.55.2
npm WARN node_modules/netlify-cms-core
npm WARN
npm WARN Conflicting peer dependency: ajv@8.11.0
npm WARN node_modules/ajv
npm WARN peer ajv@"^8.8.2" from ajv-keywords@5.1.0
npm WARN node_modules/netlify-cms-core/node_modules/ajv-keywords
npm WARN ajv-keywords@"^5.0.0" from netlify-cms-core@2.55.2
npm WARN node_modules/netlify-cms-core
npm WARN deprecated @types/vfile-message@2.0.0: This is a stub types definition. vfile-message provides its own type definitions, so you do not need this installed.
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated uuid@3.4.0: 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:
> gatsby-starter-netlify-cms@1.1.3 build
> npm run clean && gatsby build
> gatsby-starter-netlify-cms@1.1.3 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
matheusdamiao
commented
2 years ago @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.
saladynsan
commented
2 years ago I have the same problem, did you solve it?
D6NDesigns
commented
2 years ago I have the same problem, did you solve it?
Me also, was this ever solved?
ZBlocker655
commented
2 years ago 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.)
regalius
commented
1 year ago Bumping gatsby-remark-relative-images to "^0.3.0" and adding these changes to gatsby-node.js worked for me
ljpernic
commented
1 year ago 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?
timmy224
commented
1 year ago 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 https://github.com/gatsbyjs/gatsby/issues/5990#issuecomment-1266701511.
Bug report
What is the current behavior?
On a clean clone, ran
npm installandgatsby develop. Receiving multiple GraphQL errors of which the following is a sample:If the current behavior is a bug, please provide the steps to reproduce.
npm installgatsby developWhat is the expected behavior?
Development site starts correctly and can be served from localhost.
Other relevant information:
Node.js version: 18.10.0 NPM/Yarn version: 8.19.2 Operating System: Windows 10 Additional tools: Gatsby CLI 4.24 (installed via choco)