My journey with ReactJS has just begun, and I've encountered some issues with the code that I believe should work but doesn't.
To start off, I set up a new ReactJS project using the npm command create-react-app. Following this, I installed Google's material ui in my project folder with
npm install --save material-ui@nextDespite following these steps, I'm facing errors when attempting to import certain components from 'material-ui'.
import Card from 'material-ui/Card'Upon investigating with VS Code, pressing F12 on 'material-ui/Card' reveals that Card is indeed the default export, making the import above successful.
import {Card} from 'material-ui'
A similar approach works here as well, displaying 'Card' as a named export upon hitting F12 on 'material-ui'.
The problem arises when I try to import other elements like:
import {Card, CardText} from 'material-ui'While 'Card' imports without any issues, utilizing <CardText> triggers an error message:
React.createElement: 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.
Strangely, both components seem to be exported in the same manner.
declare module "material-ui" {
export import Card = __MaterialUI.Card.Card;
export import CardText = __MaterialUI.Card.CardText;
}
Further exploration revealed:
export interface CardTextProps {
actAsExpander?: boolean;
color?: string;
expandable?: boolean;
style?: React.CSSProperties;
className?: string;
}
export class CardText extends React.Component<CardTextProps> {
}
In addition to this, my attempts at importing other features end in failure despite seemingly correct syntax:
import getMuiTheme from 'material-ui/styles/getMuiTheme'
Module not found: Can't resolve 'material-ui/styles/getMuiTheme'
Although everything appears to be in place, I continue to face challenges with these imports.