node.js - Troubleshooting SVG error in Gatsby build

Question

I'm trying to get a simple Gatsby site online -- gatsby develop works fine but on gatsby build I get this error message:

UNHANDLED REJECTION 
- Error in parsing SVG: 
- Unencoded <
- Line: 0
- Column: 2
- Char: <

I'm not explicitly using any SVGs so struggling to troubleshoot this - any advice?

My project is here, adapted from the lumen starter theme.

Answer 1

In your Icon.js (line 14) file you are using a <svg>. This is causing your issue:

// @flow strict
import React from 'react';
import styles from './Icon.module.scss';

type Props = {
  name: string,
  icon: {
    viewBox?: string,
    path?: string
  }
};

const Icon = ({ name, icon }: Props) => (
  <svg className={styles['icon']} viewBox={icon.viewBox}>
    <title>{name}</title>
    <path d={icon.path} />
  </svg>
);

export default Icon;

When dealing with SVG I would recommend using gatsby-plugin-react-svg or using a React built-in usage.

• With gatsby-plugin-react-svg you just to isolate the SVG in a separate folder that must only contain SVGs):

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

  Then import it as a React component:

  import Icon from "./path/assets/icon.svg";
  
  // ...
  
  <Icon />;
  

• React built-in usage (only available with react-scripts@2.0.0 or higher, and react@16.3.0 or higher, more details in https://create-react-app.dev/docs/adding-images-fonts-and-files/):

    import { ReactComponent as FacebookIcon } from '../images/svg/facebookF.svg';
    import { ReactComponent as Email } from '../images/svg/email.svg';
  
    ...
  
      <FacebookIcon />
      <Email /> 
  

Since you are extending from a starter theme, remove that component and it's using from your project and add it on-demand if needed.

You can read this StackOverflow answer for further details about dealing SVG in Gatsby.