gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.26k stars 10.32k forks source link

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

Closed james0r closed 2 years ago

james0r commented 2 years ago

Preliminary Checks

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:

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@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 (https://github.com/gatsbyjs/gatsby/pull/3515). I tried just now and it works as expected.