Gatsby - 模块解析失败：意外字符“�”

Question

嗨，我已经尝试运行 Gatsby 一个星期了。

我正在尝试将我的旧 Gatsby 网站转移到最新的 hello-world，因为我的 Mac 升级迫使我继续前进。

我已经升级并安装了所有插件，但是当我尝试运行时，我得到了这个：'模块解析失败：意外字符'�''

有没有办法获得更多关于意外情况的信息？ 或者关于如何解决这个问题的任何想法？

gatsby-config 的 Pastebin： https ://pastebin.com/FzJqgdx0

plugins: [
    `gatsby-plugin-styled-components`,
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`, // Needed for dynamic images
    `gatsby-plugin-use-query-params`,
    `gatsby-transformer-json`,
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        implementation: require("node-sass"),
      },
    },
    {
      resolve: `gatsby-plugin-alias-imports`,
      options: {
        alias: {
          "@components": "src/components",
          "@images": "src/assets/images",
          "@assets": "src/assets",
          "@utils": "src/utils",
        },
        extensions: [".js", ".jsx", ".ts", ".tsx"],
      },
    },
    {
      resolve: `gatsby-plugin-breadcrumb`,
      options: {
        defaultCrumb: {
          key: "Home",
          location: {
            pathname: "/",
          },
          crumbLabel: "Home",
          crumbSeparator: " / ",
        },
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/assets/images/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `./data/`,
      },
    },
    {
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: "/assets/images",
        },
      },
    },
  ],

我在过去工作的项目中使用 svg、scss 和 pdfs。

Answer 1

该错误可能来自多种原因，我认为它缺少您尝试过的内容、所做的更改等的一些调试，以提供更可靠的答案。

但是，在您的gatsby-config中，我认为关于gatsby-plugin-react-svg有一个奇怪的配置。 正如您在将 SVG 作为 Gatsby 中的组件导入中看到的那样， include规则是一个正则表达式，因此必须匹配模式，并且它应该匹配/src文件夹中的文件夹，它本身不是路径（所以删除引号）。 尝试以下操作：

{
  resolve: "gatsby-plugin-react-svg",
  options: {
    rule: {
      include: /images/,
    },
  },

另请注意，您包含的文件夹只能包含 SVG assets ，否则会破坏编译。 如果/images文件夹不符合此条件，请为您的 SVG 资产创建一个新的单独文件夹。

出于调试目的，我会尝试隔离并确定错误所在，评论和播放一些插件以确定哪个是有问题的插件。