运行 gatsby develop 时字符串包含无效字符答案

【问题标题】：String contains an invalid character when running gatsby develop运行 gatsby develop 时字符串包含无效字符
【发布时间】：2021-10-27 00:21:38
【问题描述】：

我正在构建一个 gatsby 网络应用程序，我在 windows 上使用 wsl，它运行良好，我什至将它部署到 github pages 存储库，它运行良好，但后来我决定不再需要使用 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-pages 命令将我的页面部署到 github pages 存储库，我收到此错误：

 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>

更新：

使用带有transform.tools 的 jsx 将 svg 从常规 .svg 文件转换为 .js 似乎可以修复导致错误的 svg，但不确定是什么导致它失败，而且 gatsby 没有具体说明出了什么问题。

【问题讨论】：

你是如何使用 SVG 的？（哪个插件和配置）。根据你说的，是你的错误的根源，不是吗？
只是里面有普通svg代码的.svg文件，并导入它，我不知道这是错误的还是什么，它似乎以前工作过，但是将它们转换为jsx .js文件似乎可以解决它。

标签： reactjs graphql gatsby

【解决方案1】：

将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
    }
  }
`

【讨论】：

【解决方案2】：

我认为您的问题是因为您导入 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 组件。你可以按照这个详细的答案：Import SVG as a component in 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";

【讨论】：