fix(gatsby-plugin-image): only log missing plugin error in development (

#32335) * fix(gatsby-plugin-image): only log missing plugin error in development * feat: change missing image plugin console error to warn Co-authored-by: Reda Bacha <mohamedredabacha@hollandandbarrett.com>
gatsbyjs · Aug 11, 2021 · 4483ff4 · 4483ff4
1 parent afd1558
commit 4483ff4
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx b/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.browser.tsx
@@ -74,18 +74,20 @@ describe(`GatsbyImage browser`, () => {
     jest.clearAllMocks()
     global.SERVER = undefined
     global.GATSBY___IMAGE = undefined
+    process.env.NODE_ENV = `test`
   })
 
   it(`shows a suggestion to switch to the new gatsby-image API when available`, async () => {
     global.GATSBY___IMAGE = undefined
+    process.env.NODE_ENV = `development`
 
     const { container } = render(
       <GatsbyImage image={image} alt="Alt content" />
     )
 
     await waitFor(() => container.querySelector(`[data-placeholder-image=""]`))
 
-    expect(console.error).toBeCalledWith(
+    expect(console.warn).toBeCalledWith(
       `[gatsby-plugin-image] You're missing out on some cool performance features. Please add "gatsby-plugin-image" to your gatsby-config.js`
     )
   })

diff --git a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx b/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx
@@ -276,8 +276,8 @@ export const GatsbyImage: FunctionComponent<GatsbyImageProps> =
       return null
     }
 
-    if (!gatsbyImageIsInstalled()) {
-      console.error(
+    if (!gatsbyImageIsInstalled() && process.env.NODE_ENV === `development`) {
+      console.warn(
         `[gatsby-plugin-image] You're missing out on some cool performance features. Please add "gatsby-plugin-image" to your gatsby-config.js`
       )
     }