search

Pitayan / gatsby-theme-pitayan

A minimal blog theme plugin for Gatsby
https://pitayan.github.io/gatsby-theme-pitayan/
MIT License
30 stars 11 forks source link

Gatsby-plugin-sharp wasn't setup correctly in gatsby-config.js #38

Closed remiks closed 1 year ago

remiks commented 1 year ago

Hi, I did a fork and try to to a build locally:

  1. npm install --save-dev gatsby @pitayan/gatsby-theme-pitayan react@17 react-dom@17
  2. npm -w packages/www run develop
➜  gatsby-theme-pitayan git:(master) ✗ npm -w packages/www run develop

> www@0.1.0 develop
> gatsby develop --host 0.0.0.0

success compile gatsby files - 0.302s
success load gatsby config - 0.044s
warn Warning: there are unknown plugin options for "@pitayan/gatsby-theme-pitayan": tableOfContentsLevels
Please open an issue at https://ghub.io/@pitayan/gatsby-theme-pitayan if you believe this option is valid.
warn Plugin gatsby-plugin-image is not compatible with your gatsby version 5.4.1 - It requires
gatsby@^4.0.0-next
warn Plugin gatsby-plugin-sharp is not compatible with your gatsby version 5.4.1 - It requires
gatsby@^4.0.0-next
warn Plugin gatsby-transformer-sharp is not compatible with your gatsby version 5.4.1 - It requires
gatsby@^4.0.0-next
warn Plugin gatsby-plugin-postcss is not compatible with your gatsby version 5.4.1 - It requires
gatsby@^4.0.0-next
warn Plugin gatsby-plugin-react-helmet is not compatible with your gatsby version 5.4.1 - It requires
gatsby@^4.0.0-next
warn Plugin gatsby-remark-images is not compatible with your gatsby version 5.4.1 - It requires
gatsby@^4.0.0-next
warn Plugin gatsby-plugin-catch-links is not compatible with your gatsby version 5.4.1 - It requires
gatsby@^4.0.0-next
warn Plugin gatsby-transformer-yaml is not compatible with your gatsby version 5.4.1 - It requires
gatsby@^4.0.0-next
warn Plugin gatsby-source-filesystem is not compatible with your gatsby version 5.4.1 - It requires
gatsby@^4.0.0-next
warn Plugin gatsby-source-filesystem is not compatible with your gatsby version 5.4.1 - It requires
gatsby@^4.0.0-next
warn Plugin gatsby-source-filesystem is not compatible with your gatsby version 5.4.1 - It requires
gatsby@^4.0.0-next
warn Plugin gatsby-source-filesystem is not compatible with your gatsby version 5.4.1 - It requires
gatsby@^4.0.0-next
warn Plugin gatsby-remark-smartypants is not compatible with your gatsby version 5.4.1 - It requires
gatsby@^4.0.0-next
warn Plugin gatsby-remark-copy-linked-files is not compatible with your gatsby version 5.4.1 - It requires
gatsby@^4.0.0-next
warn Plugin gatsby-remark-prismjs is not compatible with your gatsby version 5.4.1 - It requires
gatsby@^4.0.0-next
warn Plugin gatsby-remark-images is not compatible with your gatsby version 5.4.1 - It requires
gatsby@^4.0.0-next
warn Plugin gatsby-remark-autolink-headers is not compatible with your gatsby version 5.4.1 - It requires
gatsby@^4.0.0-next
warn Plugin gatsby-plugin-mdx is not compatible with your gatsby version 5.4.1 - It requires
gatsby@^4.0.0-next

 ERROR #11329  API.NODE.VALIDATION

Your plugins must export known APIs from their gatsby-node.

See https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/ for the list of Gatsby node APIs.

- The plugin gatsby-transformer-sharp@4.25.0 is using the API "unstable_shouldOnCreateNode" which is not a
known API.
- The plugin gatsby-transformer-yaml@4.25.0 is using the API "unstable_shouldOnCreateNode" which is not a
known API.
- The plugin gatsby-plugin-mdx@3.20.0 is using the API "unstable_shouldOnCreateNode" which is not a known
API.

Some of the following may help fix the error(s):

- Rename "unstable_shouldOnCreateNode" -> "shouldOnCreateNode"
- Rename "unstable_shouldOnCreateNode" -> "shouldOnCreateNode"
- Rename "unstable_shouldOnCreateNode" -> "shouldOnCreateNode"

success load plugins - 1.722s
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.005s
success initialize cache - 0.104s
success copy gatsby files - 0.137s
success Compiling Gatsby Functions - 0.184s
info gatsby-remark-oembed: No providers in cache
info gatsby-remark-oembed: Fetching providers from oembed.com
success onPreBootstrap - 0.303s

 ERROR #11321  API.NODE.EXECUTION

"gatsby-transformer-sharp" threw an error while running the createSchemaCustomization lifecycle:

Class constructor GraphQLList cannot be invoked without 'new'

  TypeError: Class constructor GraphQLList cannot be invoked without 'new'

  - customize-schema.js:453 fluidNodeType
    [www]/[gatsby-theme-pitayan]/[gatsby-transformer-sharp]/customize-schema.js:453:15

  - customize-schema.js:652 createFields
    [www]/[gatsby-theme-pitayan]/[gatsby-transformer-sharp]/customize-schema.js:652:21

  - customize-schema.js:864 Object.module.exports [as createSchemaCustomization]
    [www]/[gatsby-theme-pitayan]/[gatsby-transformer-sharp]/customize-schema.js:864:13

  - api-runner-node.js:487 runAPI
    [gatsby-theme-pitayan]/[gatsby]/src/utils/api-runner-node.js:487:37

success createSchemaCustomization - 0.067s
info gatsby-remark-oembed: No providers in cache
info gatsby-remark-oembed: Fetching providers from oembed.com
info gatsby-remark-oembed: No providers in cache
info gatsby-remark-oembed: Fetching providers from oembed.com
info gatsby-remark-oembed: No providers in cache
info gatsby-remark-oembed: Fetching providers from oembed.com
info gatsby-remark-oembed: No providers in cache
info gatsby-remark-oembed: Fetching providers from oembed.com
info gatsby-remark-oembed: No providers in cache
info gatsby-remark-oembed: Fetching providers from oembed.com
info gatsby-remark-oembed: No providers in cache
info gatsby-remark-oembed: Fetching providers from oembed.com
info gatsby-remark-oembed: No providers in cache
info gatsby-remark-oembed: Fetching providers from oembed.com
info gatsby-remark-oembed: No providers in cache
info gatsby-remark-oembed: Fetching providers from oembed.com
info gatsby-remark-oembed: No providers in cache
info gatsby-remark-oembed: Fetching providers from oembed.com
info gatsby-remark-oembed: No providers in cache
info gatsby-remark-oembed: Fetching providers from oembed.com
info gatsby-remark-oembed: No providers in cache
info gatsby-remark-oembed: Fetching providers from oembed.com
info gatsby-remark-oembed: No providers in cache
info gatsby-remark-oembed: Fetching providers from oembed.com
info gatsby-remark-oembed: No providers in cache
info gatsby-remark-oembed: Fetching providers from oembed.com

 ERROR  UNKNOWN

Gatsby-plugin-sharp wasn't setup correctly in gatsby-config.js. Make sure you add it to the plugins array.

not finished source and transform nodes - 1.186s

npm ERR! Lifecycle script `develop` failed with error: 
npm ERR! Error: command failed 
npm ERR!   in workspace: www@0.1.0 
npm ERR!   at location: /Users/remi/Documents/Git/github/forks/gatsby-theme-pitayan/packages/www

Might be me noobing on something.. :/

daiyanze commented 1 year ago

Oh... Sorry, I think I didn't update the README.md well...

It's not the issue of gatsby-plugin-sharp. It seems the dependencies are not installed. Could you try remove the package-lock.json and .cache in your project root folder? And then re-install the packages

(You need react 18 instead.)

npm install --save-dev gatsby @pitayan/gatsby-theme-pitayan react@18 react-dom@18
remiks commented 1 year ago

Tried it and got this:

  1. npm install --save-dev gatsby @pitayan/gatsby-theme-pitayan react@18 react-dom@18
  2. npm -w packages/www run develop 
    
➜  gatsby-theme-pitayan git:(master) ✗ npm -w packages/www run develop

www@0.1.0 develop gatsby develop --host 0.0.0.0

success compile gatsby files - 0.475s success load gatsby config - 0.034s warn Warning: there are unknown plugin options for "@pitayan/gatsby-theme-pitayan": tableOfContentsLevels Please open an issue at https://ghub.io/@pitayan/gatsby-theme-pitayan if you believe this option is valid. warn Plugin gatsby-plugin-image is not compatible with your gatsby version 5.4.1 - It requires gatsby@^4.0.0-next warn Plugin gatsby-plugin-sharp is not compatible with your gatsby version 5.4.1 - It requires gatsby@^4.0.0-next warn Plugin gatsby-transformer-sharp is not compatible with your gatsby version 5.4.1 - It requires gatsby@^4.0.0-next warn Plugin gatsby-plugin-postcss is not compatible with your gatsby version 5.4.1 - It requires gatsby@^4.0.0-next warn Plugin gatsby-plugin-react-helmet is not compatible with your gatsby version 5.4.1 - It requires gatsby@^4.0.0-next warn Plugin gatsby-remark-images is not compatible with your gatsby version 5.4.1 - It requires gatsby@^4.0.0-next warn Plugin gatsby-plugin-catch-links is not compatible with your gatsby version 5.4.1 - It requires gatsby@^4.0.0-next warn Plugin gatsby-transformer-yaml is not compatible with your gatsby version 5.4.1 - It requires gatsby@^4.0.0-next warn Plugin gatsby-source-filesystem is not compatible with your gatsby version 5.4.1 - It requires gatsby@^4.0.0-next warn Plugin gatsby-source-filesystem is not compatible with your gatsby version 5.4.1 - It requires gatsby@^4.0.0-next warn Plugin gatsby-source-filesystem is not compatible with your gatsby version 5.4.1 - It requires gatsby@^4.0.0-next warn Plugin gatsby-source-filesystem is not compatible with your gatsby version 5.4.1 - It requires gatsby@^4.0.0-next warn Plugin gatsby-remark-smartypants is not compatible with your gatsby version 5.4.1 - It requires gatsby@^4.0.0-next warn Plugin gatsby-remark-copy-linked-files is not compatible with your gatsby version 5.4.1 - It requires gatsby@^4.0.0-next warn Plugin gatsby-remark-prismjs is not compatible with your gatsby version 5.4.1 - It requires gatsby@^4.0.0-next warn Plugin gatsby-remark-images is not compatible with your gatsby version 5.4.1 - It requires gatsby@^4.0.0-next warn Plugin gatsby-remark-autolink-headers is not compatible with your gatsby version 5.4.1 - It requires gatsby@^4.0.0-next warn Plugin gatsby-plugin-mdx is not compatible with your gatsby version 5.4.1 - It requires gatsby@^4.0.0-next

ERROR #11329 API.NODE.VALIDATION

Your plugins must export known APIs from their gatsby-node.

See https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/ for the list of Gatsby node APIs.

Some of the following may help fix the error(s):

success load plugins - 1.472s 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.004s success initialize cache - 0.106s success copy gatsby files - 0.123s success Compiling Gatsby Functions - 0.181s info gatsby-remark-oembed: No providers in cache info gatsby-remark-oembed: Fetching providers from oembed.com success onPreBootstrap - 0.309s

ERROR #11321 API.NODE.EXECUTION

"gatsby-transformer-sharp" threw an error while running the createSchemaCustomization lifecycle:

Class constructor GraphQLList cannot be invoked without 'new'

TypeError: Class constructor GraphQLList cannot be invoked without 'new'

success createSchemaCustomization - 0.047s info gatsby-remark-oembed: No providers in cache info gatsby-remark-oembed: Fetching providers from oembed.com info gatsby-remark-oembed: No providers in cache info gatsby-remark-oembed: Fetching providers from oembed.com info gatsby-remark-oembed: No providers in cache info gatsby-remark-oembed: Fetching providers from oembed.com info gatsby-remark-oembed: No providers in cache info gatsby-remark-oembed: Fetching providers from oembed.com info gatsby-remark-oembed: No providers in cache info gatsby-remark-oembed: Fetching providers from oembed.com info gatsby-remark-oembed: No providers in cache info gatsby-remark-oembed: Fetching providers from oembed.com info gatsby-remark-oembed: No providers in cache info gatsby-remark-oembed: Fetching providers from oembed.com info gatsby-remark-oembed: No providers in cache info gatsby-remark-oembed: Fetching providers from oembed.com info gatsby-remark-oembed: No providers in cache info gatsby-remark-oembed: Fetching providers from oembed.com info gatsby-remark-oembed: No providers in cache info gatsby-remark-oembed: Fetching providers from oembed.com info gatsby-remark-oembed: No providers in cache info gatsby-remark-oembed: Fetching providers from oembed.com info gatsby-remark-oembed: No providers in cache info gatsby-remark-oembed: Fetching providers from oembed.com

ERROR UNKNOWN

Gatsby-plugin-sharp wasn't setup correctly in gatsby-config.js. Make sure you add it to the plugins array.

not finished source and transform nodes - 1.121s

npm ERR! Lifecycle script develop failed with error: npm ERR! Error: command failed npm ERR! in workspace: www@0.1.0 npm ERR! at location: /Users/remi/Documents/Git/github/forks/gatsby-theme-pitayan/packages/www ➜ gatsby-theme-pitayan git:(master) ✗ 


`3. npm outdated`

➜ gatsby-theme-pitayan git:(master) ✗ npm outdated npm outdated Package Current Wanted Latest Location Depended by @pitayan/gatsby-theme-pitayan 0.4.3 0.4.3 0.5.0 packages/www/node_modules/@pitayan/gatsby-theme-pitayan www@0.1.0 @raae/gatsby-remark-oembed 0.3.2 0.3.3 0.3.3 node_modules/@raae/gatsby-remark-oembed www@0.1.0 @types/react-dom 18.0.9 18.0.10 18.0.10 node_modules/@types/react-dom gatsby-theme-pitayan@npm:@pitayan/gatsby-theme-pitayan@0.5.0 @typescript-eslint/eslint-plugin 4.33.0 4.33.0 5.48.1 node_modules/@typescript-eslint/eslint-plugin gatsby-theme-pitayan @typescript-eslint/parser 4.33.0 4.33.0 5.48.1 node_modules/@typescript-eslint/parser gatsby-theme-pitayan eslint 7.32.0 7.32.0 8.32.0 node_modules/eslint gatsby-theme-pitayan eslint-config-prettier 8.5.0 8.6.0 8.6.0 node_modules/eslint-config-prettier gatsby-theme-pitayan eslint-import-resolver-typescript 2.7.1 2.7.1 3.5.3 node_modules/eslint-import-resolver-typescript gatsby-theme-pitayan eslint-plugin-import 2.26.0 2.27.4 2.27.4 node_modules/eslint-plugin-import gatsby-theme-pitayan eslint-plugin-jsx-a11y 6.6.1 6.7.1 6.7.1 node_modules/eslint-plugin-jsx-a11y gatsby-theme-pitayan eslint-plugin-react 7.31.11 7.32.0 7.32.0 node_modules/eslint-plugin-react gatsby-theme-pitayan gatsby-plugin-catch-links 5.3.0 5.4.0 5.4.0 node_modules/gatsby-plugin-catch-links gatsby-theme-pitayan@npm:@pitayan/gatsby-theme-pitayan@0.5.0 gatsby-plugin-feed 5.3.1 5.4.0 5.4.0 node_modules/gatsby-plugin-feed www@0.1.0 gatsby-plugin-image 3.3.2 3.4.0 3.4.0 node_modules/gatsby-plugin-image gatsby-theme-pitayan@npm:@pitayan/gatsby-theme-pitayan@0.5.0 gatsby-plugin-mdx 5.3.1 5.4.0 5.4.0 node_modules/gatsby-plugin-mdx gatsby-theme-pitayan@npm:@pitayan/gatsby-theme-pitayan@0.5.0 gatsby-plugin-postcss 6.3.0 6.4.0 6.4.0 node_modules/gatsby-plugin-postcss gatsby-theme-pitayan@npm:@pitayan/gatsby-theme-pitayan@0.5.0 gatsby-plugin-react-helmet 6.3.0 6.4.0 6.4.0 node_modules/gatsby-plugin-react-helmet gatsby-theme-pitayan@npm:@pitayan/gatsby-theme-pitayan@0.5.0 gatsby-plugin-sharp 5.3.2 5.4.0 5.4.0 node_modules/gatsby-plugin-sharp gatsby-theme-pitayan@npm:@pitayan/gatsby-theme-pitayan@0.5.0 gatsby-plugin-sitemap 6.3.1 6.4.0 6.4.0 node_modules/gatsby-plugin-sitemap www@0.1.0 gatsby-remark-autolink-headers 6.3.1 6.4.0 6.4.0 node_modules/gatsby-remark-autolink-headers gatsby-theme-pitayan@npm:@pitayan/gatsby-theme-pitayan@0.5.0 gatsby-remark-copy-linked-files 6.3.0 6.4.0 6.4.0 node_modules/gatsby-remark-copy-linked-files gatsby-theme-pitayan@npm:@pitayan/gatsby-theme-pitayan@0.5.0 gatsby-remark-images 7.3.1 7.4.0 7.4.0 node_modules/gatsby-remark-images gatsby-theme-pitayan@npm:@pitayan/gatsby-theme-pitayan@0.5.0 gatsby-remark-prismjs 7.3.0 7.4.0 7.4.0 node_modules/gatsby-remark-prismjs gatsby-theme-pitayan@npm:@pitayan/gatsby-theme-pitayan@0.5.0 gatsby-remark-responsive-iframe 6.3.0 6.4.0 6.4.0 node_modules/gatsby-remark-responsive-iframe www@0.1.0 gatsby-remark-smartypants 6.3.0 6.4.0 6.4.0 node_modules/gatsby-remark-smartypants gatsby-theme-pitayan@npm:@pitayan/gatsby-theme-pitayan@0.5.0 gatsby-source-filesystem 5.3.1 5.4.0 5.4.0 node_modules/gatsby-source-filesystem gatsby-theme-pitayan@npm:@pitayan/gatsby-theme-pitayan@0.5.0 gatsby-transformer-sharp 5.3.1 5.4.0 5.4.0 node_modules/gatsby-transformer-sharp gatsby-theme-pitayan@npm:@pitayan/gatsby-theme-pitayan@0.5.0 gatsby-transformer-yaml 5.3.0 5.4.0 5.4.0 node_modules/gatsby-transformer-yaml gatsby-theme-pitayan@npm:@pitayan/gatsby-theme-pitayan@0.5.0 postcss 8.4.20 8.4.21 8.4.21 node_modules/postcss www@0.1.0 postcss 8.4.20 8.4.21 8.4.21 node_modules/postcss gatsby-theme-pitayan@npm:@pitayan/gatsby-theme-pitayan@0.5.0 prettier 2.2.1 2.2.1 2.8.3 node_modules/prettier gatsby-theme-pitayan


`4. npm upgrade`

➜ gatsby-theme-pitayan git:(master) ✗ npm upgrade npm WARN ERESOLVE overriding peer dependency npm WARN While resolving: react-server-dom-webpack@0.0.0-experimental-c8b778b7f-20220825 npm WARN Found: react@18.2.0 npm WARN node_modules/react npm WARN dev react@"^18.2.0" from the root project npm WARN 11 more (gatsby, @pitayan/gatsby-theme-pitayan, react-dom, www, ...) 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/react-server-dom-webpack npm WARN react-server-dom-webpack@"0.0.0-experimental-c8b778b7f-20220825" from gatsby@5.4.1 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/react-server-dom-webpack npm WARN react-server-dom-webpack@"0.0.0-experimental-c8b778b7f-20220825" from gatsby@5.4.1 npm WARN node_modules/gatsby npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained

added 170 packages, removed 228 packages, changed 137 packages, and audited 1938 packages in 1m

431 packages are looking for funding run npm fund for details

13 high severity vulnerabilities

To address issues that do not require attention, run: npm audit fix

Some issues need review, and may require choosing a different dependency.

Run npm audit for details. ➜ gatsby-theme-pitayan git:(master) ✗ 


`5. npm -w packages/www run develop -> Same error as step 2.`
daiyanze commented 1 year ago

@remiks Thank you so much for the details! Really helped on where it went wrong.

Alright. I see the problem now. The version of gatsby-theme-pitayan for www package wasn't updated to 0.5.0. This is why you're experiencing the dependency issue. Apologies for that. I didn't notice this during local test. I should have removed the node_modules together with package-lock.json for testing it.

The fix would be to update the package.json of www package to the latest version.

"gatsby-theme-pitayan": "^0.5.0"

Btw, do you experience the same issue on your own repo?

daiyanze commented 1 year ago

Hi @remiks. I've updated the master branch. www package now should have been able to run local server without such issue. If it's still not fixed for you, please reopen the issue.