create-gatsby with Wordpress CMS chosen missing dep gatsby-plugin-image

[james0r]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Just followed exact instructions to init a project and npm run develop fails.

λ  ~/Projects/Gatsby  npm init gatsby
Need to install the following packages:
  create-gatsby
Ok to proceed? (y) y
create-gatsby version 2.9.0



                                         Welcome to Gatsby!



This command will generate a new Gatsby site for you in /Users/jamesauble/Projects/Gatsby with the
setup you select. Let's answer some questions:


What would you like to call your site?
✔ · my-gatsby-wordpress
What would you like to name the folder where your site will be created?
✔ Gatsby/ my-gatsby-wordpress
✔ Will you be using JavaScript or TypeScript?
· JavaScript
✔ Will you be using a CMS?
· WordPress
✔ Would you like to install a styling system?
· Sass
✔ Would you like to install additional features with other plugins?
· Add page meta tags with React Helmet
· Add an automatic sitemap

Great! A few of the selections you made need to be configured. Please fill in the options for each plugin now:

✔ Configure the WordPress plugin.
See the plugin docs for help.


Thanks! Here's what we'll now do:

    🛠  Create a new Gatsby site in the folder my-gatsby-wordpress
    📚 Install and configure the plugin for WordPress
    🎨 Get you set up to use Sass for styling your site
    🔌 Install gatsby-plugin-react-helmet, gatsby-plugin-sitemap

✔ Shall we do this? (Y/n) · Yes
✔ Created site from template
✔ Installed Gatsby
✔ Installed plugins
✔ Created site in my-gatsby-wordpress
🔌 Setting-up plugins...
info Adding gatsby-source-wordpress
info Adding gatsby-plugin-sass
info Adding gatsby-plugin-react-helmet
info Adding gatsby-plugin-sitemap
info Installed gatsby-source-wordpress in gatsby-config.js
success Adding gatsby-source-wordpress to gatsby-config - 0.067s
info Installed gatsby-plugin-sass in gatsby-config.js
success Adding gatsby-plugin-sass to gatsby-config - 0.063s
info Installed gatsby-plugin-react-helmet in gatsby-config.js
success Adding gatsby-plugin-react-helmet to gatsby-config - 0.064s
info Installed gatsby-plugin-sitemap in gatsby-config.js
success Adding gatsby-plugin-sitemap to gatsby-config - 0.064s
🎉  Your new Gatsby site  has been successfully created
at /Users/jamesauble/Projects/Gatsby/my-gatsby-wordpress.
Start by going to the directory with

  cd my-gatsby-wordpress

Start the local development server with

  npm run develop

See all commands at

  https://www.gatsbyjs.com/docs/gatsby-cli/


λ  ~/Projects/Gatsby  cd my-gatsby-wordpress
λ  my-gatsby-wordpress main ✓ npm run develop

> my-gatsby-wordpress@1.0.0 develop
> gatsby develop

success compile gatsby files - 0.361s

 ERROR #10226  CONFIG

Couldn't find the "gatsby-plugin-image" plugin declared in "/Users/jamesauble/Projects/Gatsby/my-gat
sby-wordpress/node_modules/gatsby-source-wordpress/gatsby-config.js".

Tried looking for an installed package in the following paths:
 - /Users/jamesauble/Projects/Gatsby/my-gatsby-wordpress/node_modules/gatsby/dist/bootstrap/load-the
mes/node_modules/gatsby-plugin-image
 - /Users/jamesauble/Projects/Gatsby/my-gatsby-wordpress/node_modules/gatsby/dist/bootstrap/node_mod
ules/gatsby-plugin-image
 - /Users/jamesauble/Projects/Gatsby/my-gatsby-wordpress/node_modules/gatsby/dist/node_modules/gatsb
y-plugin-image
 - /Users/jamesauble/Projects/Gatsby/my-gatsby-wordpress/node_modules/gatsby/node_modules/gatsby-plu
gin-image
 - /Users/jamesauble/Projects/Gatsby/my-gatsby-wordpress/node_modules/gatsby-plugin-image
 - /Users/jamesauble/Projects/Gatsby/node_modules/gatsby-plugin-image
 - /Users/jamesauble/Projects/node_modules/gatsby-plugin-image
 - /Users/jamesauble/node_modules/gatsby-plugin-image
 - /Users/node_modules/gatsby-plugin-image
 - /node_modules/gatsby-plugin-image

not finished load gatsby config - 0.016s

λ  my-gatsby-wordpress main ✓ npm install gatsby-plugin-image gatsby-plugin-sharp
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.
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.

added 101 packages, changed 2 packages, and audited 1672 packages in 4s

220 packages are looking for funding
  run `npm fund` for details

31 vulnerabilities (9 moderate, 20 high, 2 critical)

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

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
λ  my-gatsby-wordpress main ✗ npm run develop

> my-gatsby-wordpress@1.0.0 develop
> gatsby develop

success compile gatsby files - 0.306s
success load gatsby config - 0.016s

 ERROR

Error in "/Users/jamesauble/Projects/Gatsby/my-gatsby-wordpress/node_modules/gatsby-source-wordpress
/gatsby-node.js": Cannot find module 'gatsby-transformer-sharp/supported-extensions'
Require stack:

Reproduction Link

https://dev/env/

Steps to Reproduce

npm init gatsby
choose wordpress for CMS
npm run develop

Expected Result

development env url to appear

Actual Result

λ ~/Projects/Gatsby npm init gatsby
Need to install the following packages:
create-gatsby
Ok to proceed? (y) y
create-gatsby version 2.9.0

                                     Welcome to Gatsby!

This command will generate a new Gatsby site for you in /Users/jamesauble/Projects/Gatsby with the
setup you select. Let's answer some questions:

What would you like to call your site?
✔ · my-gatsby-wordpress
What would you like to name the folder where your site will be created?
✔ Gatsby/ my-gatsby-wordpress
✔ Will you be using JavaScript or TypeScript?
· JavaScript
✔ Will you be using a CMS?
· WordPress
✔ Would you like to install a styling system?
· Sass
✔ Would you like to install additional features with other plugins?
· Add page meta tags with React Helmet
· Add an automatic sitemap

Great! A few of the selections you made need to be configured. Please fill in the options for each plugin now:

✔ Configure the WordPress plugin.
See the plugin docs for help.

Thanks! Here's what we'll now do:

🛠  Create a new Gatsby site in the folder my-gatsby-wordpress
📚 Install and configure the plugin for WordPress
🎨 Get you set up to use Sass for styling your site
🔌 Install gatsby-plugin-react-helmet, gatsby-plugin-sitemap

✔ Shall we do this? (Y/n) · Yes
✔ Created site from template
✔ Installed Gatsby
✔ Installed plugins
✔ Created site in my-gatsby-wordpress
🔌 Setting-up plugins...
info Adding gatsby-source-wordpress
info Adding gatsby-plugin-sass
info Adding gatsby-plugin-react-helmet
info Adding gatsby-plugin-sitemap
info Installed gatsby-source-wordpress in gatsby-config.js
success Adding gatsby-source-wordpress to gatsby-config - 0.067s
info Installed gatsby-plugin-sass in gatsby-config.js
success Adding gatsby-plugin-sass to gatsby-config - 0.063s
info Installed gatsby-plugin-react-helmet in gatsby-config.js
success Adding gatsby-plugin-react-helmet to gatsby-config - 0.064s
info Installed gatsby-plugin-sitemap in gatsby-config.js
success Adding gatsby-plugin-sitemap to gatsby-config - 0.064s
🎉 Your new Gatsby site has been successfully created
at /Users/jamesauble/Projects/Gatsby/my-gatsby-wordpress.
Start by going to the directory with

cd my-gatsby-wordpress

Start the local development server with

npm run develop

See all commands at

https://www.gatsbyjs.com/docs/gatsby-cli/

λ ~/Projects/Gatsby cd my-gatsby-wordpress
λ my-gatsby-wordpress main ✓ npm run develop

my-gatsby-wordpress@1.0.0 develop
gatsby develop

success compile gatsby files - 0.361s

ERROR #10226 CONFIG

Couldn't find the "gatsby-plugin-image" plugin declared in "/Users/jamesauble/Projects/Gatsby/my-gat
sby-wordpress/node_modules/gatsby-source-wordpress/gatsby-config.js".

Tried looking for an installed package in the following paths:

• /Users/jamesauble/Projects/Gatsby/my-gatsby-wordpress/node_modules/gatsby/dist/bootstrap/load-the
  mes/node_modules/gatsby-plugin-image
• /Users/jamesauble/Projects/Gatsby/my-gatsby-wordpress/node_modules/gatsby/dist/bootstrap/node_mod
  ules/gatsby-plugin-image
• /Users/jamesauble/Projects/Gatsby/my-gatsby-wordpress/node_modules/gatsby/dist/node_modules/gatsb
  y-plugin-image
• /Users/jamesauble/Projects/Gatsby/my-gatsby-wordpress/node_modules/gatsby/node_modules/gatsby-plu
  gin-image
• /Users/jamesauble/Projects/Gatsby/my-gatsby-wordpress/node_modules/gatsby-plugin-image
• /Users/jamesauble/Projects/Gatsby/node_modules/gatsby-plugin-image
• /Users/jamesauble/Projects/node_modules/gatsby-plugin-image
• /Users/jamesauble/node_modules/gatsby-plugin-image
• /Users/node_modules/gatsby-plugin-image
• /node_modules/gatsby-plugin-image

not finished load gatsby config - 0.016s

λ my-gatsby-wordpress main ✓ npm install gatsby-plugin-image gatsby-plugin-sharp
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.
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.

added 101 packages, changed 2 packages, and audited 1672 packages in 4s

220 packages are looking for funding
run npm fund for details

31 vulnerabilities (9 moderate, 20 high, 2 critical)

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

To address all issues (including breaking changes), run:
npm audit fix --force

Run npm audit for details.
λ my-gatsby-wordpress main ✗ npm run develop

my-gatsby-wordpress@1.0.0 develop
gatsby develop

success compile gatsby files - 0.306s
success load gatsby config - 0.016s

ERROR

Error in "/Users/jamesauble/Projects/Gatsby/my-gatsby-wordpress/node_modules/gatsby-source-wordpress
/gatsby-node.js": Cannot find module 'gatsby-transformer-sharp/supported-extensions'
Require stack:

Environment

MacOS: 12.2
Node: 16.14.0

Config Flags

No response

[tyhopp]

Hi @james0r, thanks for this report!

This is fixed and should work as expected in the next minor release. In case you are stuck at this point you can install gatsby-transformer-sharp and the build should complete successfully.

[Krus-Leung]

I met the same problem but not yet fixed this.
@tyhopp can you send the solution step by step here please?

I would be greatly appreciated to you if you can help.

[tyhopp]

@Krus-Leung you may have encountered this if you tried this after the release of 4.10 yesterday but before the starter dependencies were updated today (#3515). I tried just now and it works as expected.