Gatsby GraphQL Ошибка The fragment "GatsbyImageSharpFluid" does not exist
Подскажите куда копать? На локальном хосте, все отлично работает. Выгружаю на Гатсби Клауд, при билде выдает вот такой вот еррор.
extract queries from components
2.00s
onPreExtractQueries
0.00s
There was an error in your GraphQL query:
The fragment "GatsbyImageSharpFluid" does not exist.
1 | import React, { useMemo } from 'react';
2 | import { graphql, useStaticQuery } from 'gatsby';
3 | import Img from 'gatsby-image';
4 | import PropTypes from 'prop-types';
5 |
6 | const Image = ({ src, ...rest }) => {
> 7 | const data = useStaticQuery(graphql`
| ^^^^^^^^^^^^^^^^^^^^^^^^
8 | query {
9 | images: allFile(filter: { internal: { mediaType: { regex: `/image/` } } }) {
10 | edges {
11 | node {
12 | relativePath
13 | extension
14 | publicURL
15 | childImageSharp {
16 | fluid(maxWidth: 600) {
17 | ...GatsbyImageSharpFluid
RAW log:
17:51:57 PM:
Cloning into '/usr/src/app/www'...
17:51:59 PM:
Found package-lock.json with lockfileversion >= 2, using node 16
17:51:59 PM:
Installing node version 16
17:52:00 PM:
Downloading and installing node v16.14.0...
17:52:05 PM:
Now using node v16.14.0 (npm v8.3.1)
17:52:36 PM:
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
17:52:36 PM:
npm
17:52:36 PM:
WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
17:52:36 PM:
npm
17:52:36 PM:
WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
17:52:37 PM:
npm
17:52:37 PM:
WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
17:52:39 PM:
npm WARN
17:52:39 PM:
deprecated [email protected]: 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.
17:52:43 PM:
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
17:53:39 PM:
added 1579 packages in 1m
17:53:39 PM:
245 packages are looking for funding
run `npm fund` for details
17:53:39 PM:
To best use Gatsby Cloud, we are installing gatsby-plugin-gatsby-cloud to your site. Please install and configure this in your site to prevent reinstallations between builds. More information here https://www.gatsbyjs.com/plugins/gatsby-plugin-gatsby-cloud/
17:53:55 PM:
added 22 packages, changed 4 packages, and audited 1602 packages in 15s
17:53:55 PM:
246 packages are looking for funding
run `npm fund` for details
17:53:56 PM:
32 vulnerabilities (9 moderate, 21 high, 2 critical)
To address issues that do not require attention, run:
npm audit fix
To address all issues possible (including breaking changes), run:
npm audit fix --force
Some issues need review, and may require choosing
a different dependency.
Run `npm audit` for details.
17:54:00 PM:
Node version v16.14.0
17:54:02 PM:
Gatsby version ╔════════════════════════════════════════════════════════════════════════╗
17:54:02 PM:
║ ║
17:54:02 PM:
║ to help improve Gatsby for all users. ║
17:54:02 PM:
║ ║
17:54:02 PM:
║ Gatsby collects anonymous usage analytics ║
17:54:02 PM:
║ If you'd like to opt-out, you can use `gatsby telemetry --disable` ║
17:54:02 PM:
║ To learn more, checkout https://gatsby.dev/telemetry ║
17:54:02 PM:
║ ║
17:54:02 PM:
╚════════════════════════════════════════════════════════════════════════╝
17:54:02 PM:
Gatsby version: 4.5.2
17:54:02 PM:
Gatsby CLI version: 4.5.1
17:54:02 PM:
Note: this is the Gatsby version for the site at: /usr/src/app/www
17:54:02 PM:
GATSBY CLEAN
17:54:04 PM:
info Deleting .cache, public, /usr/src/app/www/node_modules/.cache/babel-loader,
17:54:04 PM:
/usr/src/app/www/node_modules/.cache/terser-webpack-plugin
17:54:04 PM:
info Successfully deleted directories
17:54:06 PM:
From https://github.com/GJHack/gatsby_prokat
* branch master -> FETCH_HEAD
17:54:06 PM:
HEAD is now at 25d3a01 add gatsby-images
17:54:06 PM:
Already on 'master'
17:54:06 PM:
Your branch is up to date with 'origin/master'.
17:54:08 PM:
Node version v16.14.0
17:54:10 PM:
Gatsby version Gatsby CLI version: 4.5.1
17:54:10 PM:
Gatsby version: 4.5.2
17:54:10 PM:
Note: this is the Gatsby version for the site at: /usr/src/app/www
17:54:10 PM:
BUILDS
17:54:14 PM:
success open and validate gatsby-configs, load plugins - 0.379s
17:54:14 PM:
success onPreInit - 0.001s
17:54:14 PM:
success initialize cache - 0.325s
17:54:15 PM:
success copy gatsby files - 0.127s
17:54:15 PM:
success onPreBootstrap - 0.354s
17:54:15 PM:
success Compiling Gatsby Functions - 0.340s
17:54:15 PM:
success createSchemaCustomization - 0.001s
17:54:15 PM:
success Checking for changed pages - 0.001s
17:54:15 PM:
success source and transform nodes - 0.189s
17:54:15 PM:
info Writing GraphQL type definitions to /usr/src/app/www/.cache/schema.gql
17:54:16 PM:
success createPages - 0.000s
17:54:16 PM:
success building schema - 1.176s
17:54:17 PM:
success createPagesStatefully - 0.234s
17:54:17 PM:
info Total nodes: 22, SitePage nodes: 8 (use --verbose for breakdown)
17:54:17 PM:
success Checking for changed pages - 0.001s
17:54:17 PM:
success onPreExtractQueries - 0.001s
17:54:19 PM:
error There was an error in your GraphQL query:
17:54:19 PM:
1 | import React, { useMemo } from 'react';
17:54:19 PM:
The fragment "GatsbyImageSharpFluid" does not exist.
17:54:19 PM:
2 | import { graphql, useStaticQuery } from 'gatsby';
17:54:19 PM:
4 | import PropTypes from 'prop-types';
17:54:19 PM:
5 |
17:54:19 PM:
3 | import Img from 'gatsby-image';
17:54:19 PM:
> 7 | const data = useStaticQuery(graphql`
17:54:19 PM:
| ^^^^^^^^^^^^^^^^^^^^^^^^
17:54:19 PM:
6 | const Image = ({ src, ...rest }) => {
17:54:19 PM:
8 | query {
17:54:19 PM:
9 | images: allFile(filter: { internal: { mediaType: { regex: "/image/" } } }) {
17:54:19 PM:
10 | edges {
17:54:19 PM:
11 | node {
17:54:19 PM:
12 | relativePath
17:54:19 PM:
13 | extension
17:54:19 PM:
15 | childImageSharp {
17:54:19 PM:
14 | publicURL
17:54:19 PM:
16 | fluid(maxWidth: 600) {
17:54:19 PM:
17 | ...GatsbyImageSharpFluid
17:54:19 PM:
failed extract queries from components - 2.000s
17:54:22 PM:
ERROR Failed to compile: Error: Exited with code 1
gatsby-config.js
const path = require(`path`);
module.exports = {
siteMetadata: {
siteUrl: `https://**********`,
},
plugins: [
{
resolve: `gatsby-plugin-yandex-metrika`,
options: {
// The ID of yandex metrika.
trackingId: "********",
// Enabled a webvisor. The default value is `false`.
clickmap: true,
trackLinks: true,
accurateTrackBounce: true,
webvisor: true,
// Enables tracking a hash in URL. The default value is `false`.
trackHash: true,
// Defines where to place the tracking script - `false` means before body (slower loading, more hits)
// and `true` means after the body (faster loading, less hits). The default value is `false`.
afterBody: false,
// Use `defer` attribute of metrika script. If set to `false` - script will be loaded with `async` attribute.
// Async enables earlier loading of the metrika but it can negatively affect page loading speed. The default value is `false`.
defer: true,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: path.join(__dirname, `src`, `images`),
},
},
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
]
}
Файл Image.js
import React, { useMemo } from 'react';
import { graphql, useStaticQuery } from 'gatsby';
import Img from 'gatsby-image';
import PropTypes from 'prop-types';
const Image = ({ src, ...rest }) => {
const data = useStaticQuery(graphql`
query {
images: allFile(filter: { internal: { mediaType: { regex: "/image/" } } }) {
edges {
node {
relativePath
extension
publicURL
childImageSharp {
fluid(maxWidth: 600) {
...GatsbyImageSharpFluid
}
}
}
}
}
}
`);
const match = useMemo(() => data.images.edges.find(({ node }) => src === node.relativePath), [data, src]);
if (!match) return null;
const { node: { childImageSharp, publicURL, extension } = {} } = match;
if (extension === 'svg' || !childImageSharp) {
return <img src={publicURL} {...rest} />;
}
return <Img fluid={childImageSharp.fluid} {...rest} />;
};
Image.propTypes = {
src: PropTypes.string.isRequired,
alt: PropTypes.string,
};
export default Image;