Saturday, 17 October 2020

Cannot get SVG as a component to render in CRA

I've written the following TypeScript component:

import React from 'react'
import cx from 'classnames'

/* import SVGs */
import { ReactComponent as Phone } from '../images/phone.svg' 
import { ReactComponent as AtDesk } from '../images/at-desk.svg' 
import { ReactComponent as Available } from '../images/available.svg' 
import { ReactComponent as Blushing } from '../images/blushing.svg' 
import { ReactComponent as Skills } from '../images/skills.svg' 
import { ReactComponent as Smile } from '../images/smile.svg' 
import { ReactComponent as Beach } from '../images/beach.svg' 

const selectMiniMe = (name: string): any => {
    switch (name) {
      case 'available' :
        return <Available />
      case 'at-desk':
        return <AtDesk/>
      case 'blushing':
        return <Blushing />
      case 'skills':
        return <Skills />
      case 'phone':
        return <Phone />
        case 'beach':
          return <Beach />
      case 'smile':
      default:
        return <Smile />
    }
  }

/* Import Types */
import Props from './types/props'

/* import Styles */
import styles from './styles.module.scss'

/* Render Component */
export const MiniMe: React.FC<Props> = ({ name, width, position, classes}: Props) => {
  return <div className={cx(styles['mini-me'], styles[`w-${width}`], classes)}>
    { selectMiniMe(name) }
    </div>
}


export default MiniMe

This component renders without issue as a story in storybook. Everything looks and works exactly as expected and no errors are reported.

When I try to import that component into a brand new Create-React-App TypeScript app. I get the following error:

Error: 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 `MiniMe`.

I suspect the issue is loader related but as far as I can tell, I'm doing everything the way that CRA is already configured to work with so I have no idea where it's failing.

For additional reference, here is a link to the repo: https://github.com/foxleigh81/alex-foxleigh-portfolio/tree/2020

I've also managed to find a reference to this exact issue - which as far as I can tell was actually fixed in CRA in 2018, so I've no idea why I'm getting this issue here: https://github.com/facebook/create-react-app/pull/5573



from Cannot get SVG as a component to render in CRA

No comments:

Post a Comment