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

Question

Hi I've been trying to run Gatsby for a week now.

I'm trying to transfer my old Gatsby site to the latest hello-world since my Mac upgrade has forced me to move on.

I've gotten all plugins upgraded and installed but when I try to run I get this: 'Module parse failed: Unexpected character '�''

Is there a way to either get more info on what is unexpected? Or any ideas on how to solve this?

Pastebin of gatsby-config: 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",
        },
      },
    },
  ],

I'm using svg, scss, and pdfs in my project which worked in the past.

Answer 1

The error can come from multiple reasons, I think it lacks a little debugging from what you've tried, the changes you made, etc, to provide a more solid answer.

However, in your gatsby-config I think there's an odd configuration regarding the gatsby-plugin-react-svg . As you can see in Import SVG as a component in Gatsby the include rule is a regular expression, hence must match the pattern, and it should match a folder in your /src folder, it's not a path itself (so remove the quotes). Try the following:

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

Be also aware that the folder you include, must only contain SVG assets , otherwise it will break the compilation. If the /images folder doesn't match this condition, create a new separate folder for your SVG assets.

For debugging purpose I'd try to isolate and identify where the error is, commenting and playing around some plugins to identify which is the offending one.