字符串在运行gatsby开发时包含无效字符。

Question

我正在构建一个gatsby web应用程序，我在windows上使用wsl，它运行良好，我甚至将它部署到一个github页面存储库中，运行良好，但后来我决定不再使用wsl，所以我卸载它，克隆了git存储库，并尝试使用gatsby develop构建应用程序，但是在localhost页面中，它显示了这个错误，没有更多的上下文：

Unhandled Runtime Error.
One unhandled runtime error found in your files. See the list below to fix it:
Unknown Runtime Error
String contains an invalid character
No codeFrame could be generated

这并不特别有用。

然后，通过运行gh- page命令将我的页面部署到github页面存储库，我得到了以下错误：

 ERROR 

Page data from page-data.json for the failed page "/": {
  "componentChunkName": "component---src-pages-index-js",
  "path": "/",
  "result": {
    "data": {
      "allFile": {
        "nodes": [
          {
            "name": "1_corazon-de-maple",
            "id": "ac582d47-3543-54cd-83b1-9366ca594fe3",
            "childImageSharp": {
              "gatsbyImageData": {
                "layout": "constrained",
                "backgroundColor": "#f8e8d8",
                "images": {
                  "fallback": {
                    "src": "/static/9acd54f4f5e8efa9b11549c85e00ea4f/f76e2/1_corazon-de-maple.png",
                    "srcSet": "/static/9acd54f4f5e8efa9b11549c85e00ea4f/2fe1e/1_corazon-de-maple.png 480w,\n/static/9acd54f4f5e8efa9b11549c85e00ea4f/d1fbd/1_corazon-de-maple.png
961w,\n/static/9acd54f4f5e8efa9b11549c85e00ea4f/f76e2/1_corazon-de-maple.png 1921w",
                    "sizes": "(min-width: 1921px) 1921px, 100vw"
                  },
                  "sources": [
                    {
                      "srcSet": "/static/9acd54f4f5e8efa9b11549c85e00ea4f/3a3a2/1_corazon-de-maple.webp 480w,\n/static/9acd54f4f5e8efa9b11549c85e00ea4f/e58ca/1_corazon-de-maple.webp
961w,\n/static/9acd54f4f5e8efa9b11549c85e00ea4f/2d899/1_corazon-de-maple.webp 1921w",
                      "type": "image/webp",
                      "sizes": "(min-width: 1921px) 1921px, 100vw"
                    }
                  ]
                },
                "width": 1921,
                "height": 1081
              }
            }
          },
          {
            "name": "2_appartar",
            "id": "12e5156f-1297-5068-a800-2b063db9bf20",
            "childImageSharp": {
              "gatsbyImageData": {
                "layout": "constrained",
                "backgroundColor": "#f8f8f8",
                "images": {
                  "fallback": {
                    "src": "/static/86855c6fbdba7e8237ff47290ac1c15f/eb413/2_appartar.png",
                    "srcSet": "/static/86855c6fbdba7e8237ff47290ac1c15f/a67ed/2_appartar.png 360w,\n/static/86855c6fbdba7e8237ff47290ac1c15f/379bb/2_appartar.png
720w,\n/static/86855c6fbdba7e8237ff47290ac1c15f/eb413/2_appartar.png 1440w",
                    "sizes": "(min-width: 1440px) 1440px, 100vw"
                  },
                  "sources": [
                    {
                      "srcSet": "/static/86855c6fbdba7e8237ff47290ac1c15f/28975/2_appartar.webp 360w,\n/static/86855c6fbdba7e8237ff47290ac1c15f/4b463/2_appartar.webp
720w,\n/static/86855c6fbdba7e8237ff47290ac1c15f/3b606/2_appartar.webp 1440w",
                      "type": "image/webp",
                      "sizes": "(min-width: 1440px) 1440px, 100vw"
                    }
                  ]
                },
                "width": 1440,
                "height": 900
              }
            }
          },
          {
            "name": "3_sipago",
            "id": "65960d9a-741b-5ce9-8519-ddca5800e91d",
            "childImageSharp": {
              "gatsbyImageData": {
                "layout": "constrained",
                "backgroundColor": "#f8f8f8",
                "images": {
                  "fallback": {
                    "src": "/static/3ab66ed0d806a8922cb37b7737185c68/87926/3_sipago.png",
                    "srcSet": "/static/3ab66ed0d806a8922cb37b7737185c68/a3fa1/3_sipago.png 350w,\n/static/3ab66ed0d806a8922cb37b7737185c68/bc3b9/3_sipago.png
700w,\n/static/3ab66ed0d806a8922cb37b7737185c68/87926/3_sipago.png 1400w",
                    "sizes": "(min-width: 1400px) 1400px, 100vw"
                  },
                  "sources": [
                    {
                      "srcSet": "/static/3ab66ed0d806a8922cb37b7737185c68/26a00/3_sipago.webp 350w,\n/static/3ab66ed0d806a8922cb37b7737185c68/f23f0/3_sipago.webp
700w,\n/static/3ab66ed0d806a8922cb37b7737185c68/2c2d0/3_sipago.webp 1400w",
                      "type": "image/webp",
                      "sizes": "(min-width: 1400px) 1400px, 100vw"
                    }
                  ]
                },
                "width": 1400,
                "height": 788
              }
            }
          }
        ]
      },
      "site": {
        "siteMetadata": {
          "title": "Raul Meza Montoya | Portfolio"
        }
      },
      "file": {
        "id": "df889c4b-9f80-5d5e-af33-55a721c9d098",
        "publicURL": "/static/cd0bd82dbb5f2ff0d8d7ae76b84f470c/cv_raul-meza-montoya.pdf"
      }
    },
    "pageContext": {}
  },
  "staticQueryHashes": [
    "1796249492"
  ]
}

failed Building static HTML for pages - 1.092s

 ERROR #95313 

Building static HTML failed for path "/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  15 |
  16 | module.exports = _defineProperty;
> 17 | module.exports["default"] = module.exports, module.exports.__esModule = true;

我检查了页面中的组件，似乎禁用了修复页面的svg组件列表，但我无法确定原因。UXUIDesign、FrontEnd和GraphicDesign都是导入的svg组件，如下所示：

import FrontEnd from "../images/svgs/front-end_sm.svg";

<ul id="specialty-list" className="list inline-list">
  <li>
    <UXUIDesign className="svg inline-svg svg-icon" />
    <p>Diseño UX/UI</p>
  </li>
  <li>
    <FrontEnd className="svg inline-svg svg-icon" />
    <p>Desarrollo Front End</p>
  </li>
  <li>
    <GraphicDesign className="svg inline-svg svg-icon" />
    <p>Diseño Gráfico</p>
  </li>
</ul>

更新：

使用带有.svg的jsx将svg从常规的.svg文件转换为.js似乎修复了导致错误的svgs，不确定是什么导致了失败，盖茨比也没有指定出了什么问题。

Answer 1

我认为您的问题是因为您导入SVG的方式。在盖茨比，这将起作用：

return <div>
  <svg>
  {/* some SVG magic code here */}
 </svg>
</div>

但这不会：

import SomeSvg from '../svg/path/some-svg.svg'

return <div>
  <SomeSvg />
</div>

因为默认情况下，webpack不会将SVG文件解释为React组件。您可以按照这个详细的答案：导入SVG作为Gatsby中的一个组件，但基本上，您需要使用gatsby-plugin-react-svg。安装后：

{
  resolve: 'gatsby-plugin-react-svg',
  options: {
    rule: {
      include: /svgs/
    }
  }
}

注1:只需添加包含SVG的文件夹即可。include是一个正则表达式(这就是为什么在斜杠和/__之间)，所以只需添加文件夹名

注2: SVG文件夹必须只包含SVG资产，否则编译可能失败

然后，像您正在做的那样导入它：

import FrontEnd from "../images/svgs/front-end_sm.svg";

Answer 2

将site移动到allFile查询或file查询

export const query = graphql`
  query {
    allFile(
      filter: { relativeDirectory: { eq: "thumbnails" } }
      sort: { fields: name }
    ) {
      nodes {
        name
        id
        childImageSharp {
          gatsbyImageData
        }
      }
      site {
        siteMetadata {
          title
        }
      }
    }
    file(name: {eq: "cv_raul-meza-montoya"}) {
      id
      publicURL
    }
  }
`