React JS Sementic UI keeps saying: "ReferenceError: jQuery is not defined"

Question

I am very new to React and I have a question regarding Semantic UI.

I am following a tutorial where I have to use a Header component of Semantic UI in App.js by including

    import { Header } from 'semantic-ui-css'

However, whenever the page compiles with this code it keeps returning an error message like this:

---

ReferenceError: jQuery is not defined

./node_modules/semantic-ui-css/semantic.js

node_modules/semantic-ui-css/semantic.js:497

  494 | });

  495 | 

  496 | 

> 497 | })( jQuery, window, document );

  498 | 

  499 | /*!

  500 |  * # Semantic UI 2.4.1 - Form Validation

---

While searching for the solution I read many suggestions to run

npm install -s jquery

so I did, but it still returns the same error message.

I would really appreciate it if I can help on what I should do.

---

Here are parts of my files that I think is related to the issue:

App.js

import React, { Component } from 'react';
//import './App.css';
import { Header } from 'semantic-ui-css'
import TeacherForms from './components/TeacherForm';
import CourseList from './components/CourseList';
import { Col, Row, Container, Navbar, Button} from  'react-bootstrap'
import { connect } from 'react-redux';
import * as courseAction from './actions/courseAction';
import DynamicForm from './components/DynamicForm'

class App extends Component {
  constructor(props){
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);

    this.state = {
      name: ''
    }
  }
  
  handleChange(e){
    this.setState({
      name: e.target.value
    })
  }

  handleSubmit(e){

    e.preventDefault();
    let course = {
      name: this.state.name
    }
    this.setState({
      name: ''
    });
    if (course.name == ''){
      window.alert('Please enter a course name.')
    }else{
      this.props.addCourse(course);
    } 
  }

  listView(data, index){
    return (
      <div className="row">
        <div className="col-md-10">      
              <Button className = "text-left " variant = "light" block>
                {data.name}
              </Button>
        </div>
        <div className="col-md-2">
          <confirm>
            <button onClick={(e) => {if (window.confirm('Are you sure you want to delete this item?'))
              this.deleteCourse(e, index)
            }} className="btn btn-danger">
                Remove
            </button>
          </confirm>
        </div>
    </div> 
    )
  }

  deleteCourse(e, index){
    e.preventDefault();
    this.props.deleteCourse(index);
  }

  render(){
    let name;
    return ( 
      <div className="full-page">
        <Navbar bg="dark" variant="dark">
          <Navbar.Brand href="#home">Brandeis Course Scheduling</Navbar.Brand>
        </Navbar>
        <Row>
        <Col>
          <div className="course-list">
                <h1> Academic Requirements Form </h1>
                <hr />
                <div class = "overflow">
                <h3>Add Course</h3>
                <form onSubmit={this.handleSubmit}>
                    <input type="text" onChange={this.handleChange} className="form-control" value={this.state.name}/><br />
                    <input type="submit" className="btn btn-success" value="ADD"/>
                </form>
                <hr />
                { <ul className="list-group">
                  {this.props.courses.map((course, i) => this.listView(course, i))}
                </ul> }
                </div>
            </div>

        </Col>
        <Col>
          <TeacherForms></TeacherForms>
        </Col>
        </Row>
      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  return{
    courses: state.courses
  }
};

const mapDispatchToProps = (dispatch) => {
  return {
    addCourse: course => dispatch(courseAction.addCourse(course)),
    deleteCourse: index => dispatch(courseAction.deleteCourse(index))
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
//import './index.css';
import "semantic-ui-css/semantic.css"
import $ from 'jquery';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css'
import configureStore from './store/configureStore';
import { Provider } from 'react-redux';

const store = configureStore();


ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, 
    document.getElementById('root')   
);

serviceWorker.unregister();

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Thank you so much in advance. I will also try my best to figure this out by myself as well.

Answer 1

import { Header } from 'semantic-ui-react'

just change the semantic-ui-css to semantic-ui-react since this library is jQuery free.

Answer 2

Add the CDN in index.html(inside the public folder) at the end of the head and remove it from App.js and index.js

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
</head>

and in App.js you would do

import $ from 'jquery';
window.jQuery = $;
window.$ = $;
global.jQuery = $;
import { Header } from 'semantic-ui-css'

Hope this helps

Answer 3

If you use this following command to install the semantic-ui

npm install semantic-ui-css

use the following import in your index.js file

import 'semantic-ui-css/semantic.min.css';

it will remove your error in react or other javascript