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

Question

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`.

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

Answer 1

Try defining the including rule as a string:

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

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