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