CODEWITHSUNDEEP
reactjssemantic-ui-react
LaTaevia
LaTaevia

Reputation: 25

What is causing Semantic-UI-React elements to break my basic Reactjs App?

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

enter image description here

Screenshot of error message in console

enter image description here

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;

Upvotes: 2

Views: 1730

Answers (1)

Abdennour TOUMI
Abdennour TOUMI

Reputation: 93183

Replace : 

import { Button, Icon, Header, Container  } from 'semantic-ui-css/semantic.min.css';

By: 

import { Button, Icon, Header, Container  } from 'semantic-ui-react';
import 'semantic-ui-css/semantic.min.css';

Indeed, components cannot be imported from css file .

Upvotes: 5

Related Questions