1

I'm building a gatsby web app, I was working with wsl on windows, and it was working well, I even deployed it to a github pages repository, which worked fine, but then I decided I didn't need to use wsl anymore, so I uninstalled it, cloned the git repository and tried to build the app using gatsby develop but in the localhost page it shows this error with no more context:

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

Which isn't particularly useful.

Then, by running the gh-pages command to deploy my page to a github pages repository, I get this error:

 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;

I checked the components in my page and it seems disabling a list of svg components fixed the page, but I can't determine why. the UXUIDesign, FrontEnd, and GraphicDesign are all svg components imported like this:

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>

Update:

Transforming the svg from a regular .svg file to a .js using jsx with transform.tools seems to fix the svgs causing an error, not sure what caused it to fail, and gatsby doesn't specify what went wrong.

RaulMezaMo
  • 13
  • 5
  • How are you using the SVG? (which plugin and configuration). According to what you said is the source of your errors, isn't it? – Ferran Buireu Aug 27 '21 at 05:04
  • Just the .svg file with the regular svg code inside, and importing it, I don't know if that's wrong or anything, it seemed to work before, but converting them to a jsx .js file seems to fix it. – RaulMezaMo Aug 27 '21 at 22:06

2 Answers2

0

Move site into allFile query or file query

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
    }
  }
`
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Viet
  • 12,133
  • 2
  • 15
  • 21
0

I think your issue comes because of the way you are importing the SVG. In Gatsby, this will work:

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

But this won't:

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

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

Because by default, webpack won't interpret SVG files as React components. You can follow this detailed answer: Import SVG as a component in Gatsby but basically, you need to use gatsby-plugin-react-svg. After installing it:

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

Note 1: just add the folder that contains the SVG. include is a regular expression (that's why is between slashes, /) so just add the folder name

Note 2: the SVG folder must only contain SVG assets, otherwise the compilation may fail

Then, import it like you were doing:

import FrontEnd from "../images/svgs/front-end_sm.svg";
Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67