reactjs - "gatsby-node.js"运行 onCreateNode 生命周期时抛出错误 : fmImagesToRelative is not a function

Question

我使用 astronaut 从基本的默认 gatsby starter 构建了这个项目

---

我不知道我做错了什么，因为这个项目的 gatsby-node 和 gatsby-config 与我的另一个项目非常相似。这个错误在控制台中反复循环

TypeError: fmImagesToRelative is not a function
  
  - gatsby-node.js:38 Object.exports.onCreateNode
    /Users/Sam/Documents/Projects_and_Code/Web_Dexter_V2/gatsby-node.js:38:3
  
  - api-runner-node.js:330 runAPI
    [Web_Dexter_V2]/[gatsby]/src/utils/api-runner-node.js:330:22
  
  - api-runner-node.js:440 Promise.catch.decorateEvent.pluginName
    [Web_Dexter_V2]/[gatsby]/src/utils/api-runner-node.js:440:17
  
  - From previous event:
  
  - api-runner-node.js:440 Promise.catch.decorateEvent.pluginName
    [Web_Dexter_V2]/[gatsby]/src/utils/api-runner-node.js:440:9
  
  - From previous event:
  
  - api-runner-node.js:439 
    [Web_Dexter_V2]/[gatsby]/src/utils/api-runner-node.js:439:14
  
  - timers.js:456 processImmediate
    internal/timers.js:456:21
  
  - From previous event:
  ...

gatsby-node.js

const { createFilePath } = require(`gatsby-source-filesystem`)
const { fmImagesToRelative } = require('gatsby-remark-relative-images');
const path = require("path")

exports.createPages = async ({ actions: { createPage }, graphql }) => {
  const postTemplate = path.resolve(`src/components/ArticlePage/index.tsx`)

  const result = await graphql(`
    {
      allMarkdownRemark(
        sort: { order: DESC, fields: [frontmatter___date] }
 
      ) {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `)

  if (result.errors) {
    return Promise.reject(result.errors)
  }

  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    createPage({
      path: `${node.fields.slug}`,
      component: postTemplate,
    })
  })
}

exports.onCreateNode = ({ node, getNode, actions }) => {
  fmImagesToRelative(node)
  if (node.internal.type === `MarkdownRemark`)
    actions.createNodeField({
      node,
      name: `slug`,
      value: createFilePath({ node, getNode, basePath: `pages`, trailingSlash: true}),
      
    })
  
}

gatsby-config.js

const path = require(`path`)

module.exports = {
  siteMetadata: {
    title: `Web Dexter | Saskatoon Website Design and Mobile App Design`,
    description: `Web Dexter is a web design, and mobile app design company located in Saskatoon, SK. We also do logo design and graphic design. (306)-241-7019.`,
    author: `Web Dexter Design`,
    authorDescription: "Saskatoon Web and App Design Company",
    themeColor: "#d2f5fb",
    siteUrl: "https://webdexter.ca",
    socialLinks: {
      facebook: "/",
      instagram: "/",
      linkedin: "https://linkedin.com/company/web-dexter",
      twitter: "/"
    }
    // image: "https://suddenlysask.com/static/54f3be73c004e26215a4a0cbf82c4524/ad85c/suddenly-saskatchewan-logo.webp"
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/assets/images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/markdown/`,
        name: `markdown-pages`,
      },
    },
    {
      resolve: `gatsby-plugin-create-client-paths`,
      options: { prefixes: [
        `/contact/*`,
      ] },
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/assets/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          'gatsby-remark-relative-images',
          {
            resolve: `gatsby-remark-images`,
            options: {
              backgroundColor: "transparent",
              maxWidth: "800",
              disableBgImageOnAlpha: true,
              linkImagesToOriginal: false,
              withWebp: true,
              loading: "eager"
              
            },
          },
        ],
      },
    },
    {
      resolve: 'gatsby-plugin-root-import',
      options: {
        "components": path.join(__dirname, "src/components"),
        "styles": path.join(__dirname, "src/assets/styles"),
        "interfaces": path.join(__dirname, "src/interfaces"),
        "data": path.join(__dirname, 'src/data'),
        "pages": path.join(__dirname, 'src/pages'),
        "svg": path.join(__dirname, "src/assets/images/svg"),
        "hooks": path.join(__dirname, "src/hooks"),
        "types": path.join(__dirname, "src/types")
      }
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-typescript`,
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-offline`,
    `gatsby-plugin-sitemap`,
    `gatsby-plugin-netlify`,
    // `gatsby-plugin-preact`,
    `gatsby-transformer-json`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/src/data`
      }
    },
    {
      resolve: 'gatsby-plugin-react-svg',
      options: {
        rule: {
          include: /svg/
        }
      }
    },
    { 
      resolve: `gatsby-plugin-purgecss`,
      options: {
        // printRejected: true, // Print removed selectors and processed file names
        purgeOnly: ['src/assets/styles', 'src/components','node_modules/'],
        ignore: ['node_modules/'],
        whitelist: [],
        whitelistPatterns: []
      }
    },
  ],
}

Answer 1

与gatsby-remark-relative-images: "^2.0.2"有关，使用^0.3.0版本时问题不再发生^2.0.2 或使用 "gatsby-remark-relative-images-v2": "^0.1.5", 代替时。他们的 github page 上注明了这一点