I'm new to React and am trying to utilize Semantic-ui-react. I followed the instructions for installing React and Semantic UI React, but am receiving the following error (see links for detailed screenshots, and quote below) in the development console/browser every time I try to add any element from Semantic-ui-react:
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.
Check the render method of
App.
Screenshot of error message on page
Screenshot of error message in console
When I console.log one of the Semantic-ui-react elements after import, it returns undefined.
Removing the Semantic-ui-react elements, but keeping the JSX resolves the error. I've tried reinstalling both React and Semantic UI React, double checked my imports/exports, and double checked my syntax, but I can't locate the problem.
REPO: https://github.com/LATAEVIA/SS-Artistpage
Package.json
"dependencies": {
"react": "^16.1.0",
"react-dom": "^16.1.0",
"react-scripts": "1.0.17"
"react-scripts": "1.0.17",
"semantic-ui-css": "^2.2.12",
"semantic-ui-react": "^0.76.0"
Index.html
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css"></link>
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
// import './index.css';
import 'semantic-ui-css/semantic.min.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
App.js
import React, { Component } from 'react';
import './App.css';
import { Button, Icon, Header, Container } from 'semantic-ui-css/semantic.min.css';
console.log(Button);
class App extends Component {
render() {
return ([
<Container>
<div key={0}>
<Header>
<img alt="Artist Image" />
<h1>Artist Name</h1>
<p>
Artist Bio
</p>
</Header>
</div>,
<div key={1}>
<h2>(Artist Name) Songs That Feel Like:</h2>
<form>
<input type="checkbox" name="mood_tags" value="Calm" /> Calm<br/>
<input type="checkbox" name="mood_tags" value="Mellow" /> Mellow<br/>
<input type="submit" value="Submit" />
<Button size='small' color='green'>
<Icon name='download' />
Download
</Button>
</form>
</div>
</Container>
]);
}
}
export default App;

