Search code examples
reactjstypescriptsvggatsbygatsby-plugin

Can't import SVG in Gatsby TypeScript Project - Element type is invalid: expected a string

I am trying to use svg files in my Gatsby TypeScript project. I am making use of gatsby-plugin-react-svg, and the error I see on the app is

One unhandled runtime error found in your files. See the list below to fix it:


Error in function createFiberFromTypeAndProps in ./node_modules/react-dom/cjs/react-dom.development.js:25058
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `IndexPage`.

enter image description here

I leveraged the information mentioned in Error while using SVG in Gatsby Typescript

I have reproduced the error in the repository linked below

https://github.com/hhimanshu/gatsby-svg-import-example

Could someone please let me know what I am doing wrong?

Thank you

Solution

  • Try defining the including rule as a string:

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

    Note the backticks: `/svg/` instead of /svg/