1

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

enter image description here

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.

Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
Kevin Whitaker
  • 13
  • 2

1 Answers1

0

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.

Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
  • Much thanks - I understand the issue better now but still struggling to figure out how to solve it. If I track right, the SVGs that actually use Icon.js are created from predefined path objects (Contacts.js -> getIcon -> icons.js) and so I can't figure out how to import the icons as react components directly. And I tried just removing all the icons from the Contacts sidebar, which seemed like it should have fixed the problem, but I get the same error. – Kevin Whitaker Jan 02 '21 at 01:41
  • I've added two ways of importing SVG as React component directly. One using plugins and one with built-in way – Ferran Buireu Jan 02 '21 at 06:59
  • Thanks, for some reason when I just reloaded the page this morning (without the icons) it worked even though it wasn't working last night – Kevin Whitaker Jan 02 '21 at 18:48