search

gatsbyjs / gatsby

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

Error when using StaticImage componenet #31555

Closed jibin2706 closed 3 years ago

jibin2706 commented 3 years ago

Description

Got this error when using StaticImage


Failed to validate error [Error [ValidationError]: "error" must be of type object] {
  _original: {
    context: {
      sourceMessage: 'Error loading image https://placekitten.com/800/600 undefined'
    },
    error: 'failed to process https://placekitten.com/800/600\n' +
      'Failed to download https://placekitten.com/800/600 after 3 attempts',
    pluginName: 'gatsby-plugin-image',
    text: 'Error loading image https://placekitten.com/800/600 undefined',
    level: 'ERROR',
    stack: [],
    docsUrl: 'https://gatsby.dev/issue-how-to'
  },
  details: [
    {
      message: '"error" must be of type object',
      path: [Array],
      type: 'object.base',
      context: [Object]
    }
  ]
}

Steps to reproduce

I had upgrade the from v2 to v3 and stared using the gatsby-plugin-image

Expected result

Should proceed with no error

Actual result

Error when starting the dev server

Environment

Run gatsby info --clipboard in your project directory and paste the output here. Also name any flags you use inside gatsby-config.js.

module.exports = {
    /* Your site config here */
    plugins: [
      `gatsby-plugin-postcss`,
      `gatsby-plugin-sass`,
      `gatsby-plugin-image`,
      `gatsby-plugin-react-helmet`,
      `gatsby-plugin-typescript`,
      `gatsby-plugin-tsconfig-paths`,
      {
        resolve: `gatsby-source-filesystem`,
        options: {
          name: `assets`,
          path: `${__dirname}/static/assets`
        }
      },
      `gatsby-transformer-sharp`,
      `gatsby-plugin-sharp`,
      {
        resolve: `gatsby-plugin-manifest`,
        options: {
          icon: 'src/images/svgs/favicon.svg'
        }
      },
      {
        resolve: 'gatsby-plugin-react-svg',
        options: {
          rule: {
            include: /images/
          }
        }
      },
      {
        resolve: `gatsby-source-strapi`,
        options: {
          apiURL:
            process.env.GATSBY_STRAPI_API_URL,
          contentTypes: [],
          queryLimit: 1000, // Default to 100
          //If using single types place them in this array.
          singleTypes: []
        }
      },
      {
        resolve: 'gatsby-plugin-google-tagmanager',
        options: {
          id: 'xxx',

          // Include GTM in development.
          includeInDevelopment: true

          // data layer to be set before GTM is loaded
          // should be an object or a function that is executed in the browser
          //
          // Defaults to null

          // Name of the event that is triggered
          // on every Gatsby route change.
          //
          // Defaults to gatsby-route-change
        }
      },
      {
        resolve: 'gatsby-plugin-webpack-bundle-analyser-v2',
        options: {
          analyzerMode: 'static',
          defaultSizes: 'gzip',
          generateStatsFile: true
        }
      }
    ]
  }

Example Repo

  1. clone repo https://github.com/jibin2706/gatsby-example
  2. yarn install
  3. yarn start
LekoArts commented 3 years ago

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

jibin2706 commented 3 years ago

Hi @LekoArts Here's the repo https://github.com/jibin2706/gatsby-example

asg5704 commented 3 years ago

👋 hello,

TL/DR: You are seeing the above error because there is an error in your gatsby-config.js.

@jibin2706 in your repo you have an error specifically the gatsby-source-filesystem points to a directory that doesn't exist (static/assets). The gatsby-source-filesystem is required to use the component as referenced here https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image under the Getting Started note.

Simply change the path to something like path: ${__dirname}/images.

@LekoArts this can be closed.

jibin2706 commented 3 years ago

@AGarcia-Clarity i have updated the config still the error is present

asg5704 commented 3 years ago

@jibin2706 Oops sorry had a little typo in the path. path: ${__dirname}/src/images

jibin2706 commented 3 years ago

Still the error is not related the path @AGarcia-Clarity

asg5704 commented 3 years ago

@jibin2706 You are right. It was related to outdated dependencies from gatsby-plugin-image and gatsby-source-filesystem. Made a PR on your example. Note however there are still errors with the gatsby-plugin-tsconfig-paths

jibin2706 commented 3 years ago

@AGarcia-Clarity thanks for the fix

I tried to do the same our main repo but got these errors on the browser console. I had copied the package.json, yarn.lock & gatsby.config files to the main repo

static-image.server.tsx:52 Image not loaded https://loremflickr.com/640/360
eval @ static-image.server.tsx:52
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
beginWork$1 @ react-dom.development.js:23940
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
eval @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
eval @ app.js:174
setTimeout (async)
eval @ ready.js:37
eval @ app.js:169
Promise.then (async)
eval @ app.js:162
Promise.then (async)
eval @ app.js:52
./.cache/app.js @ commons.js:1563
options.factory @ commons.js:4019
__webpack_require__ @ commons.js:3391
(anonymous) @ commons.js:4729
__webpack_require__.O @ commons.js:3440
(anonymous) @ commons.js:4730
(anonymous) @ commons.js:4732
static-image.server.tsx:52 Please ensure that "gatsby-plugin-image" is included in the plugins array in gatsby-config.js, and that your version of gatsby is at least 2.24.78
eval @ static-image.server.tsx:52
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
beginWork$1 @ react-dom.development.js:23940
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
eval @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
eval @ app.js:174
setTimeout (async)
eval @ ready.js:37
eval @ app.js:169
Promise.then (async)
eval @ app.js:162
Promise.then (async)
eval @ app.js:52
./.cache/app.js @ commons.js:1563
options.factory @ commons.js:4019
__webpack_require__ @ commons.js:3391
(anonymous) @ commons.js:4729
__webpack_require__.O @ commons.js:3440
(anonymous) @ commons.js:4730
(anonymous) @ commons.js:4732
react_devtools_backend.js:2560 Image not loaded https://loremflickr.com/640/360 
    at eval (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-6ab2b891.js:868:15)
    at div
    at section
    at HomepageHero (webpack-internal:///./src/new/template/HomepageHero/HomepageHero.tsx:34:20)
    at main
    at GlobalStateProvider (webpack-internal:///./src/provider/GlobalStateProvider.tsx:38:23)
    at Layout (webpack-internal:///./src/new/template/Layout/Layout.tsx:35:20)
    at Homepage (webpack-internal:///./src/pages/index.tsx:144:19)
    at PageRenderer (webpack-internal:///./.cache/page-renderer.js:23:29)
    at PageQueryStore (webpack-internal:///./.cache/query-result-store.js:39:30)
    at RouteHandler
    at div
    at FocusHandlerImpl (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:359:5)
    at FocusHandler (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:330:19)
    at RouterImpl (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:235:5)
    at Location (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:23)
    at Router
    at ScrollHandler (webpack-internal:///./node_modules/gatsby-react-router-scroll/scroll-handler.js:36:35)
    at RouteUpdates (webpack-internal:///./.cache/navigation.js:282:32)
    at EnsureResources (webpack-internal:///./.cache/ensure-resources.js:22:30)
    at LocationHandler (webpack-internal:///./.cache/root.js:67:29)
    at LocationProvider (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:84:5)
    at Location (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:23)
    at Root
    at ne (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-6ab2b891.js:879:13)
    at StaticQueryStore (webpack-internal:///./.cache/query-result-store.js:127:32)
    at ErrorBoundary (webpack-internal:///./.cache/fast-refresh-overlay/components/error-boundary.js:24:35)
    at DevOverlay (webpack-internal:///./.cache/fast-refresh-overlay/index.js:114:23)
    at RootWrappedWithOverlayAndProvider
overrideMethod @ react_devtools_backend.js:2560
eval @ static-image.server.tsx:52
renderWithHooks @ react-dom.development.js:14985
updateFunctionComponent @ react-dom.development.js:17356
beginWork @ react-dom.development.js:19063
beginWork$1 @ react-dom.development.js:23940
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
eval @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
scheduleUpdateOnFiber @ react-dom.development.js:21893
dispatchAction @ react-dom.development.js:16139
_callee$ @ GlobalStateProvider.tsx:33
tryCatch @ runtime.js:45
invoke @ runtime.js:274
prototype.<computed> @ runtime.js:97
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
eval @ asyncToGenerator.js:32
eval @ asyncToGenerator.js:21
eval @ GlobalStateProvider.tsx:31
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
performSyncWorkOnRoot @ react-dom.development.js:22269
eval @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
unbatchedUpdates @ react-dom.development.js:22438
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
eval @ app.js:174
setTimeout (async)
eval @ ready.js:37
eval @ app.js:169
Promise.then (async)
eval @ app.js:162
Promise.then (async)
eval @ app.js:52
./.cache/app.js @ commons.js:1563
options.factory @ commons.js:4019
__webpack_require__ @ commons.js:3391
(anonymous) @ commons.js:4729
__webpack_require__.O @ commons.js:3440
(anonymous) @ commons.js:4730
(anonymous) @ commons.js:4732
react_devtools_backend.js:2560 Please ensure that "gatsby-plugin-image" is included in the plugins array in gatsby-config.js, and that your version of gatsby is at least 2.24.78 
    at eval (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-6ab2b891.js:868:15)
    at div
    at section
    at HomepageHero (webpack-internal:///./src/new/template/HomepageHero/HomepageHero.tsx:34:20)
    at main
    at GlobalStateProvider (webpack-internal:///./src/provider/GlobalStateProvider.tsx:38:23)
    at Layout (webpack-internal:///./src/new/template/Layout/Layout.tsx:35:20)
    at Homepage (webpack-internal:///./src/pages/index.tsx:144:19)
    at PageRenderer (webpack-internal:///./.cache/page-renderer.js:23:29)
    at PageQueryStore (webpack-internal:///./.cache/query-result-store.js:39:30)
    at RouteHandler
    at div
    at FocusHandlerImpl (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:359:5)
    at FocusHandler (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:330:19)
    at RouterImpl (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:235:5)
    at Location (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:23)
    at Router
    at ScrollHandler (webpack-internal:///./node_modules/gatsby-react-router-scroll/scroll-handler.js:36:35)
    at RouteUpdates (webpack-internal:///./.cache/navigation.js:282:32)
    at EnsureResources (webpack-internal:///./.cache/ensure-resources.js:22:30)
    at LocationHandler (webpack-internal:///./.cache/root.js:67:29)
    at LocationProvider (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:84:5)
    at Location (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:23)
    at Root
    at ne (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-6ab2b891.js:879:13)
    at StaticQueryStore (webpack-internal:///./.cache/query-result-store.js:127:32)
    at ErrorBoundary (webpack-internal:///./.cache/fast-refresh-overlay/components/error-boundary.js:24:35)
    at DevOverlay (webpack-internal:///./.cache/fast-refresh-overlay/index.js:114:23)
    at RootWrappedWithOverlayAndProvider
jibin2706 commented 3 years ago

also upgrading these packages resulted in the same error https://github.com/jibin2706/gatsby-example/tree/dev

     "gatsby": "^3.6.0",
    "gatsby-plugin-google-tagmanager": "^3.6.0",
    "gatsby-plugin-manifest": "^3.6.0",
    "gatsby-plugin-postcss": "^4.6.0",
    "gatsby-plugin-react-helmet": "^4.6.0",
    "gatsby-plugin-react-svg": "^3.0.1",
    "gatsby-plugin-sass": "^4.6.0",
    "gatsby-plugin-sharp": "^3.6.0",
    "gatsby-plugin-typescript": "^3.6.0",
    "gatsby-transformer-sharp": "^3.6.0",
asg5704 commented 3 years ago

I deleted the node_modules and yarn.lock and ran a fresh install with npm install. Also any <StaticImage> components require an alt prop.

https://github.com/AGarcia-Clarity/gatsby-example

jibin2706 commented 3 years ago

@AGarcia-Clarity followed the same steps still facing the same error (i used yarn instead of npm)

jibin2706 commented 3 years ago

FYI dynamic image with from strapi cms is working with gatsby-image-plugin, only static image component is giving issues

github-actions[bot] commented 3 years ago

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

judewang commented 3 years ago

I met the same issue this afternoon, I followed "Using the Gatsby Image plugin" guide to add the plugins and edited my configs, but kept getting error. After debugging for 2 hours, I decided to init a new project for A/B test by running npm init gatsby, and there was no error when using StaticImage on the clean installed project. And then, back to my original project which has error when using StaticImage, things weird, the error was gone, StaticImage worked, and I cannot reproduce the issue anymore.

github-actions[bot] commented 3 years ago

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

github-actions[bot] commented 3 years ago

Hey again!

It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜